Onclick show/hide - Javascript

Question

I'm working a very simple program that show the solution of the problem when the user click on the solution link. I'm trying to do this without using jQuery.

So the first thing that I did was to add a click to my p . But now I'm lost and I don't know how to display the solution.

Any ideas on how to fix this problem?

 var solutionLink = document.querySelectorAll("p.solutionLink"); function openSolution(){ document.getElementsByClassName('.solution').nextSibling.style.display = "block"; } for(var i=0; i< solutionLink.length; i++){ var solutions = solutionLink[i]; solutions.addEventListener('click', openSolution, false); } 

 .solutions {display:none;} 

 <p>This problem #1</p> <p class="solutionLink">Click here to see solution</p> <div class="solutions"> This is the solution to problem #1 </div> <p>This problem #2</p> <p class="solutionLink">Click here to see solution</p> <div class="solutions"> This is the solution to problem #2 </div> 

Answer 1

Your first problem is your css selector: The class solutions is really called solution .

Next I would recommend making use of the data-attributes . This way you can change your DOM-structure and don't have to change any js. Alternatively I would at least wrap every solution in its own container.

Below is a (in my opinion) nice implementation, but I still want to outline some problems with your js:

• getElementsByClassName('.solution')̀ should be getElementsByClassName('solution')̀ , since the . is not part of the class name
• getElementsByClassName returns elementS, as in more than one. You will have to access them using [0]

 var solutionLink = document.querySelectorAll("p.solutionLink"); function openSolution(){ document.getElementById(this.dataset.target).style.display = "block"; } for(var i=0; i< solutionLink.length; i++){ var solutions = solutionLink[i]; solutions.addEventListener('click', openSolution, false); } 

 .solution {display:none;} 

 <p>This problem #1</p> <p class="solutionLink" data-target="sol1">Click here to see solution</p> <div id="sol1" class="solution"> This is the solution to problem #1 </div> <p>This problem #2</p> <p class="solutionLink" data-target="sol2">Click here to see solution</p> <div id="sol2" class="solution"> This is the solution to problem #2 </div> 

Answer 2

 var solutionLinks = document.querySelectorAll(".solutionLink"); for (var i = 0; i < solutionLinks.length; i++) { solutionLinks[i].addEventListener("click", function() { this.nextElementSibling.classList.toggle("hidden"); }); } 

 .hidden { display:none; } 

 <p>This problem #1</p> <p class="solutionLink">Click here to see solution</p> <div class="hidden"> This is the solution to problem #1 </div> <p>This problem #2</p> <p class="solutionLink">Click here to see solution</p> <div class="hidden"> This is the solution to problem #2 </div> 

Answer 3

Why are you currently attempting to retrieve the nextSibling of the very element that you wish to display (the textNode ) ? Using the event Object target (the p.solutionLink ), access the adjacent elementNode ( div.solution ) . According to your code the follow solution should work for you.

function openSolution(event){
  event.target.nextElementSibling.style.display = "block";
}

PS why is your CSS selector plural .solutions ?