• 0

Need help with getelementbyclass

Asked by damindor,

 Share

Question

Collaborator

damindor

Posted
Posted

Hello I am working ona site that will never get published for copyright reasons its an excersise.I am working on my home page and decided to link to my pages using drop down menus.I found a script to help me out.

 

However when I add getmyelementbyclass instead of by id the script stops working.can you please help me out here is the code its not a lot of code very little

 

<body>
<div id="logo"></div>
 
<div id="header">
<select class="foo">
    <option value="">shooters</option>
    <option value="fpa/battlefield2/battlefield.html">battlefield2</option>
    <option value="FPA/callofduty/Call of duty.html">calofduty</option>
<option value="FPA/callofduty/callofduty.html">farcry3</option>
 
</select>
<select class="foo">
    <option value"">strategy</option>
<option value"">
</select>
<script>
    document.getElementsByClassName("foo").onchange = function() {
        if (this.selectedIndex!==0) {
            window.location.href = this.value;
        }        
    };
</script>
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
Grand Master

+virtorio MVC

Posted
  • MVC
Posted

getElementsByClassName doesn't return an object (like getElementById does), but a list of objects. You will need to assign the onchangeevent hander for every object returned in the list.

var elements = document.getElementsByClassName('foo');
    
for (var i = 0; i < elements.length; i++) {
  elements[i].onchange = function() {
    if (this.selectedIndex!==0) {
      window.location.href = this.value;
    }
  }        
}
Link to comment
Share on other sites
  • 0
Collaborator

damindor

Posted
  • Author
Posted

 

getElementsByClassName doesn't return an object (like getElementById does), but a list of objects. You will need to assign the onchangeevent hander for every object returned in the list.

var elements = document.getElementsByClassName('foo');
    
for (var i = 0; i < elements.length; i++) {
  elements[i].onchange = function() {
    if (this.selectedIndex!==0) {
      window.location.href = this.value;
    }
  } 

       
}

I have a very basic understanding of javascript I thought I could do my website without any scripts but I was wrong and I need to do this one script i can however copy and past the code a few times and use diffirnt id's instead of a class I thought there was a small syntax error.I will try your code having done this website I am excited to open my javascript pdf file and  really learn it well.

Link to comment
Share on other sites
  • 0
Grand Master

+virtorio MVC

Posted
  • MVC
Posted

If you need to know what a function does or how it works, this place is a pretty good place to look: -> .

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

 

 

Here's their reference for getElementsByClassName -> https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

 

And to get an idea of what's going on when your browser is actually running your script you should look into your browsers debugging and so you can step though your code.

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.