CODEWITHSUNDEEP
javascripthtml
mljm
mljm

Reputation: 337

I need to select multiple SPAN elements

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?

Upvotes: 0

Views: 2124

Answers (5)

Ben Keating
Ben Keating

Reputation: 8376

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.

Upvotes: 0

SaWo
SaWo

Reputation: 1615

Use data-XXX attribute instead of name, e.g.: <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.

Upvotes: 0

Ele
Ele

Reputation: 33726

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

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 121998

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>

Upvotes: 2

treyhakanson
treyhakanson

Reputation: 4911

Use class instead of name:

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

and getElementsByClassName instead of getElementsByName:

document.getElementsByClassName("my-class");

Upvotes: 2

Related Questions