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>

Alternatively, put a .hidden class with your <div>s, and remove/add this class when .solutionLink is clicked. — tyteen4a03
– tyteen4a03, Commented Nov 8, 2017 at 22:39
Why without jQuery? jQuery exists to make your life so much easier. — Erik Philips
– Erik Philips, Commented Nov 8, 2017 at 22:40
there's gotta be a duplicate for cases of getElementsByClassName('classname').propertythatonlyexistsonsingleelements — user400654
– user400654, Commented Nov 8, 2017 at 22:42
plus, getElementsByClassName wants a classname, not a selector. — user400654
– user400654, Commented Nov 8, 2017 at 22:42
there's a reason getElementsByClassName is named getElementsByClassName rather than getElementByClassName — user400654
– user400654, Commented Nov 8, 2017 at 22:43

Ronnie Smith · Accepted Answer · 2017-11-08 23:20:27Z

1

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>

answered Nov 8, 2017 at 23:20

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SourceOverflow · Accepted Answer · 2017-11-08 22:58:29Z

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 begetElementsByClassName('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>

user8701049 · Accepted Answer · 2017-11-08 22:46:17Z

0

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";
}

P.S why is your CSS selector plural .solutions ?

answered Nov 8, 2017 at 22:46

user8701049

3 Comments

Pedro Over a year ago

Thank you! I'm testing your code and gt this console error "Cannot read property 'nextElementSibling' of undefined"

user8701049 Over a year ago

Here is a working example. (with some added features) codepen.io/pablo-tavarez/pen/qVqGzX

Pedro Over a year ago

Thanks a lot for your help.

Collectives™ on Stack Overflow

Onclick show/hide - Javascript

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related