javascript - Get ID of Clicked Link & Change Its Class -

i put single-page "web app" using html, css, , javascript. there's 3 links, when user clicks link shows content link , hides content other links. when link clicked should change bold doesn't. did research , found should use:

// bold selected link this.classname = "selectedlink"; 

within function clicked link's id not working. why can't id of clicked link within function? want keep html, css, , javascript separate.

fiddle: http://jsfiddle.net/zyeuv/

<style> .selectedlink {     font-weight: bold;   } </style>  <p><a href="#" id="linkpage1" class="selectedlink">example page 1</a> | <a href="#" id="linkpage2">example page 2</a> | <a href="#" id="linkpage3">example page 3</a></p>  <div id="page1"> <h1>example page 1</h1> <p>content goes here.</p> </div>  <div id="page2"> <h1>example page 2</h1> <p>content goes here.</p> </div>  <div id="page3"> <h1>example page 3</h1> <p>content goes here.</p> </div>  <script> var pages = [page1, page2, page3];   // displays page , hides other pages function gotopage(pageid) {     console.log(pageid);     // display page     (var = 0; < pages.length; i++) {         if (pageid == pages[i].id) {             // show page             pages[i].style.display = "block";              // bold selected link             this.classname = "selectedlink";         } else {             console.log(pages[i]);             // hide page             pages[i].style.display = "none";              // unbold unselected link             this.classname = "selectedlink";         }     } }  linkpage1.onclick = function () {     gotopage("page1"); };  linkpage2.onclick = function () {     gotopage("page2"); };  linkpage3.onclick = function () {     gotopage("page3"); };  gotopage("page1"); </script> 

the problem having setting classname related how function being called.

in event handler click, this context anchor. however, when call gotopage() this context window.

you remedy changing call gotopage to

gotopage.call(this, "page1"); 

however, bump next issue this refers clicked anchor. because of that, there no way, current logic, remove selectedlink class.

the quick solution refactor code bit match pattern have established using pages array.

example

script:

var pages = [page1, page2, page3]; var links = [linkpage1, linkpage2, linkpage3];  // displays page , hides other pages function gotopage(pageid, evt) {     console.log(pageid);     // display page     (var = 0; < pages.length; i++) {         if (pageid == pages[i].id) {             // show page             pages[i].style.display = "block";              // bold selcted link             links[i].classname = "selectedlink";         } else {             console.log(pages[i]);             // hide page             pages[i].style.display = "none";              // unbold unselected link             links[i].classname = "";         }     } } 

alternate approach

by changing markup bit, can reduce of repetition in code , simplify adding new pages.

in html, add data-page attribute links:

<a href="#" id="linkpage1" class="selectedlink" data-page="page1">…</a> 

with change, script can refactored this:

// list of links data-page attribute var links = document.queryselectorall("a[data-page]"); var pages = {};  function clickhandler() {     var page = this.dataset.page;      for(var = 0; < links.length; ++i) {         links[i].classname = "";         pages[links[i].dataset.page].style.display = "none";     }      this.classname = "selectedlink";     pages[page].style.display = "block"; }  // setup handlers in loop (maybe use addeventlistener here instead) // store map of pages id for(var = 0; < links.length; ++i) {     links[i].onclick = clickhandler;     pages[links[i].dataset.page] = document.getelementbyid(links[i].dataset.page); }  // call click handler context of link initialize links[0].onclick.call(links[0]); 

demo