Multiple declaration of Id for getElementById - how to automate?

user_15323288 0
Viewed 43

I have such a small javascript code (I use it in Markdown):

<button title="Click to show answer" type="button" class="btn btn-primary"
   onclick="if(document.getElementById('spoiler') .style.display=='none')
              {document.getElementById('spoiler') .style.display=''}
            else{document.getElementById('spoiler') .style.display='none'}">
  show/hide
</button><div id="spoiler" style="display:none">
***

Hidden Text

***
</div>

The problem is that if I want to make several buttons on one page to hide the text, then I need to rename spoiler to spoilerN 4 times

Questions:

  1. (Minimum) Is it possible to compactly output Id to a separate variable in this piece of code?

  2. (Maximum) Is it possible to automatically generate a variable? So that the code itself reuses the variable every time a new button is declared?

r-markdown html javascript
2 Answers

You would be better doing away with inline style AND javascript, and doing this in css with some javascript to control adding.removing css classes.

Assuming the button is always a sibling of the spoiler div, you can do this by having just a class on the spoiler div and attaching it automatically to every instance on a page:

document.querySelectorAll(".spoiler").forEach(s => {
  s.previousSibling.addEventListener("click", () => {
    s.classList.toggle("show");
  });
})
.spoiler{
  display:none
}
.show{
  display:block
}
<button title="Click to show answer" type="button" class="btn btn-primary">   
  show/hide
</button><div class="spoiler">
***

Hidden Text

***
</div>

user_2196610

Jamie's answer turned out to be very similar to the truth! Thanks!

But in Markdown, my colleagues and I made a number of small edits, because the solution did not work right away. The working version looks like this:

First chunk (One, at the beginning of the document (or in style.css for all Rmd files in bookdown)):

.spoiler{
  display:none
}
.show{
  display:block
}

The second piece (actually hidden texts)

<button title="Click to show answer" type="button" class="btn btn-primary">   
  show/hide
</button><div class="spoiler">
***

Hidden Text

***
</div>

<button title="Click to show answer" type="button" class="btn btn-primary">   
  show/hide
</button><div class="spoiler">
***

Hidden Text2

***
</div>

The third piece (one, at the very end of the Rmd file) Changed previousibling to previousElementSibling

document.querySelectorAll(".spoiler").forEach(s => {
  s.previousElementSibling.addEventListener("click", () => {
    s.classList.toggle("show");
  });
})

Thank you for your help!

user_153232880
Related