I need to select multiple SPAN elements

Question

On my web page I want to 'hide' or 'unhide' several elements (C and F in this example) that are already inside a DIV element, such as:

<div> Select A or B <span name='hide' > or C</span></div>
<div> Also select D or E <span name='hide' > or F</span></div>
(etc)

I use javascript to hide all 'hide' elements when the page is opened, except when the page is opened on localhost, than all is shown. I do not necessarily know how many 'hide' elements there are (dynamically generated).

var hids=document.getElementsByName('hide');
if(hids!=null) {
    for(var j=0; j< hids.length; j++) {
        if(localhost==true) { // only if on localhost
            hids[j].style.visibility='visible';
        }
        else hids[j].style.visibility='hidden';
    }
}

But, the 'name' attribute is not valid for SPAN. When I use DIV instead of SPAN it messes up the format. How should I solve this properly?

Answer 1

Use class instead of name :

<span class="my-class"> or C</span>

and getElementsByClassName instead of getElementsByName :

document.getElementsByClassName("my-class");

Answer 2

If span doesn't have a name attribute, try with class name

var hids=document.getElementsByClassName('hide');

And change your html to

<div> Select A or B <span class='hide' > or C</span></div>
<div> Also select D or E <span class='hide' > or F</span></div>

Answer 3

You can use querySelectorAll to find by className hide

 var localhost = false; var hids = document.querySelectorAll('.hide'); if (hids != null) { for (var j = 0; j < hids.length; j++) { if (localhost) { // only if on localhost hids[j].style.visibility = 'visible'; } else hids[j].style.visibility = 'hidden'; } } 

 <div> Select A or B <span class='hide'> or C</span></div> <div> Also select D or E <span class='hide'> or F</span></div> (etc) 

Resource

• document.querySelectorAll()

Answer 4

Use data-XXX attribute instead of name , eg: <span data-name='hide'>

For sure, in this case, you will need to fetch them like this:

document.getElementsByTagName("data-name") and do another filtering based on the value of the data-name tag.

Answer 5

Im not sure the name property should be used here. I believe names are intended to be unique. So instead maybe through class name;

let localhost = true;
let hideList = document.getElementsByClassName("hide");

if (hideList != null) {
  for (var j=0; j < hideList.length; j++ ) {
    if (localhost === true) {
  hideList[j].style.visibility = 'visible'
    } else {
      hideList[j].style.visibility = 'hidden'
    }
  }
}

As for the <div> messing up your formatting; thats likely due to a style property: display . <span> 's behave like display: inline; while <div> 's behave like display: block; . You can override this default behavior in your own CSS. Go ahead and turn those <spans> 's into <div> 's and apply some CSS:

<div> Select A or B <div class="hide"> or C</div></div>
<div> Also select D or E <div class="hide"> or F</div></div>

<style>
  .hide {
    display: inline;
  }
</style>

The result should be visually identical to when using spans.