getElementsByClassName issue [duplicate]

i'm currently having issue with the getElementsByClassName property. I have a show and hide function which displays a button when you hover over the product click here I have enabled this function using the getElementById property, however due to the fact i want to duplicates of this function using a class is better practice. Is the code below the correct way to address this problem using the ClassName JS function?

Also i've been reading getElementsByClassName is not supported in IE8 is this true and is there a way to work around this?

  <script>    
  function show(viewProductBtn){
document.getElementByClassName(viewProductBtn).style.visibility = "visible";
}

function hide(viewProductBtn) {
document.getElementByClassName(viewProductBtn).style.visibility = "hidden";
}
</script>

<!--HTML-->
<div class="product-shot-bg" onMouseOver="show('viewProductBtn')"      onMouseOut="hide('viewProductBtn')">
        <a href="#" class="viewProductBtn"></a>

at present i've switched the my dev site back to getByID to demonstrate how the transition should work..

Answers:

Answer

getElementsByClassName

"Elements" in the plural. Meaning, the function returns an array (actually a NodeList), so you need to either loop through the array, or get the first element if you only want that one.

See also document.querySelector("."+viewProductBtn) for one element, document.querySelectorAll("."+viewProductBtn) for multiple, or consider using IDs and getElementById.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.