Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Alexander Bjørnsrud
Alexander Bjørnsrud
12,725 Points
Posted by Alexander Bjørnsrud
Alexander Bjørnsrud
12,725 Points

[SOLVED] am i missing somtion ovious? click event problems.

im working on my website. ive set it up as a test site where i can play around with what i learn. now what i want to do is to generate the page in javascript depending on what has been clicked. now i started with generating a simple arrow, to point to the generated content.:)

i understand that there might be easyer ways to do this.... please enligthen me, but the purpouse is to broaden my insigths to how javascript works:)

my code is basicly this:

//----Start----

 //gets the div content aerea----
    var content = document.getElementById("content"); 

//gets the ancor tags lab and home----
    var lab = document.getElementsByClassName("lab");
    var home = document.getElementsByClassName("home");

//generates the arrow----
    var arrow = "<div id='arrow' ></div>";

//changes the boddy id to lab(sprite css images as menu states)----
    var homeChange = function() {
        document.getElementById("home").id = "lab";
        content.style.visibility = "visible";
        document.getElementById("wrapper").innerHTML  += arrow;
    };

//changes the boddy id to menu(sprite css images as menu states)---
      var labChange = function() {
        document.getElementById("lab").id = "home";
        content.style.visibility = "hidden";
    };

//adds listeners----
lab[0].addEventListener("click", homeChange);
home[0].addEventListener("clic", labChange);

//---end----

the code works fine... and generates the arrow.. but suddenly i cant click on home anymore... or it does not change the id on Boddy... does anyone know why? have i missed something?...

feel free to visit http://anoovah.com to see the full project.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

To put code into a forum post use triple back ticks -- ``` — around the code. I fixed your code here, but in the future here's a forum discussion that describes how to add HTML, CSS, JavaScript or other code to the forum: https://teamtreehouse.com/forum/posting-code-to-the-forum

1 Answer

Alexander Bjørnsrud
Alexander Bjørnsrud
12,725 Points
Alexander Bjørnsrud
Alexander Bjørnsrud
12,725 Points

So now the problem was solved, this is the changes i did to the javascript and the html to make it happen. Hope this helps anyone else who has the same problem:

//Gets Content Aerea

    var content = document.getElementById("content");


//Generates Arrow

    var arrow = "<div id='arrow'></div>";


//Gets The Wrapper aerea 

    var wrapper = document.getElementById("wrapper");


//HTML > Content

    var stuff = function(){ 
        var a ='<div id="contentMenu">';
            a += '<ul>';
            a += '<table>';
            a += '<tr>';
            a += '<td>';
            a += '<li id="toDoList">To Do List</li>';
            a += '</td>';
            a += '<td>';
            a += '<li><a>Log in</a></li>';
            a += '</td>';
            a += '<td>';
            a += '<li><a>Test Pages</a></li>';
            a += '</td>';
            a += '</tr>';
            a += '</table>';
            a += '</ul>';
            a += '</div>';
            return a;
    }


//Get Secondary Menu

    var contentMenu = document.getElementById("contentMenu");


//Chages that happens when lab "Button is pressed"

    var homeChange = function() {
        console.log("homeChange");
        var body = document.getElementById("home");
        body.id = "lab";
        wrapper.innerHTML += arrow;
        content.innerHTML= stuff();
        content.style.display = 'block';
    };


//Chages that happens when Home "Button" is pressed

      var labChange = function() {
        console.log("labChange");
        var body = document.getElementById("lab");
        body.id = "home";
        var arrowDiv = document.getElementById("arrow");
        arrowDiv.parentNode.removeChild(arrowDiv);
        content.innerHTML = '';
        content.style.display = 'none';
    };

This is the onclick change to the anchor links:

<ul id="menu">
<li><img class="homeimg" src="#" /><a class="home" onclick="labChange()">home</a></li>
<li><img class="labimg" src="#" /><a class="lab" onclick="homeChange()">labb</a></li>
</ul>
</div>