CODEWITHSUNDEEP
javascripthtmlcss
user3330391
user3330391

Reputation: 1

How do I turn a div Id into a class

I am coding a website that will detect whether the user is on a mac or pc. I have been able to get it to work as an ID but when I try it as a class it doesnt work. Could anyone please help.

<script language="JavaScript" type="text/JavaScript">
function func1()
{
  var x = navigator.platform;

  if (x == "Win32" )
  {
    document.getElementsByClassName("pcbrowser").style.display = "block";
  } 
  else if (x == "MacIntel")
  {
    document.getElementById("macbrowser").style.display = "block";
  }
}

window.onload=func1

</script>


<span id="macbrowser" style="display:none">MAC</>
<span id="pcbrowser" style="display:none">Yosemite Backup Agent</p>

Upvotes: 0

Views: 185

Answers (4)

erosman
erosman

Reputation: 7721

Here is an example ...

The HTML ...

<p id="pcbrowser" class="pc" style="display:none">Yosemite Backup Agent</p>
<p id="macbrowser" class="mac" style="display:none">MAC</p>

The JavaScript ...

// anonymous function that runs automatically
(function() {

switch (navigator.platform) {

  case 'Win32':
    // use one of these methods
    var p = document.getElementById('pcbrowser'); // by id
    var p = document.querySelector('#pcbrowser'); // by id, slower than above
    var p = document.querySelector('.pc'); // by class, only the first element with that class
    var p = document.getElementsByClassName('pc')[0]; // by class, only the first element with that class

    // change the style if found
    if (p) {
      p.style.display = 'block';
    }
    break;

  case 'MacIntel':
    // use one of these methods
    var p = document.getElementById('macbrowser'); // by id
    var p = document.querySelector('#macbrowser'); // by id, slower than above
    var p = document.querySelector('.mac'); // by class, only the first element with that class
    var p = document.getElementsByClassName('mac')[0]; // by class, only the first element with that class

    // change the style if found
    if (p) {
      p.style.display = 'block';
    }  
    break;
}

})();

Good luck :)

Upvotes: 0

TriniBoy
TriniBoy

Reputation: 690

Here you go:

var elements = document.getElementsByClassName("pcbrowser");
for (var i=0, item; i<elements.length; i++) {
    elements[i].style.display = "block";
}

Upvotes: 0

bobthedeveloper
bobthedeveloper

Reputation: 3783

The getElementsByClassName returns a HTMLCollection with ALL of the elements with this class, so you have to take the first element of this HTMLCollection (getElementsByClassName('pcbrowser')[0])

Or you can use the document.querySelector('.pcbrowser') to get the element, the dot '.' stands for class. This shouldn't be done if the site has to work on old browsers, since its only compatible since IE8.

Upvotes: 4

Pointy
Pointy

Reputation: 413712

The function is called getElementsByClassName() (plural "Elements") for a reason: it returns a NodeList, not a single element. (It's an "HTMLCollection", in particular.)

If there's definitely exactly one such element, then:

document.getElementsByClassName("pcbrowser")[0].style.display = "block";

Otherwise you can iterate through the NodeList more or less as if it were an array. Not exactly as if it were an array; if you're planning on making changes to the elements involved, then things can get weird because that API returns a NodeList that's "live" — it dynamically reflects the state of the DOM. You can copy its contents into a plain array, however:

var array = [].slice.call( theNodeList, 0 );

Upvotes: 1

Related Questions