How do i create multiple buttons powered with javascript to display text in innerhtml?

Question

I have created a simple website for learning purposes with 2 buttons (2 awnsers on a question), let's say:

Button A and Button B

When you click on A it will display answer A inside a div on my website by innerHtml, and when you click on B it will display answer B or replace awnser A with awnser B inside the innerHtml and vice versa.

So far i thought i knew how it was working by using some scripts i found on Stackoverflow.

But now i want to create 2 more buttons like above to for question 2 with the same system as mentionent above

So a button C and D, but it keep's interfering with button A and B.

I hope someone here can help me create a page that can onclick display the awnser of question 2, underneith the awnser of question 1 without interfering.

Now i am using the code shown below fot question 1:

<button id="choiceA" class="Button" question-one="Awnser 1" onclick="questionOne(this)">
   Q 1 choice A
  </button>

  <button id="ChoiceB" class="Button" question-one="Awnser 2" onclick="questionOne(this)">
    Q1 choice B
  </button>

And here's the script:

function questionOne(elem) {
  var x = document.getElementById("questionOne");
  var description = elem.getAttribute('question-one');
  x.innerHTML = description;

  var button = document.getElementsByClassName('js-button');

  for (var i = 0; i < button.length; i++) {
    button[i].classList.remove('active-button');
  }

  elem.classList.add('active-button');
}

And this code for question 2:

<button id="choiceA" class="Button" question-two="Awnser 1" onclick="questionTwo(this)">
   Q 2 choice A
  </button>

  <button id="ChoiceB" class="Button" question-two="Awnser 2" onclick="questionTwo(this)">
    Q 2 choice B
  </button>

And the script:

function questionTwo(elem) {
  var x = document.getElementById("questionTwo");
  var description = elem.getAttribute('question-two');
  x.innerHTML = description;

  var button = document.getElementsByClassName('js-button');

  for (var i = 0; i < button.length; i++) {
    button[i].classList.remove('active-button');
  }

  elem.classList.add('active-button');
}

Please also include the logic and markup for buttons C and D. — Taplar
– Taplar, Commented Dec 24, 2019 at 16:52
Do question 1 and question 2 exist on the same page? If so you are repeating ids. — Taplar
– Taplar, Commented Dec 24, 2019 at 19:00
Yes it is all on one page.. which id is repeating? Sorry to ask, but I'm still learning and getting a bit cross eyed from looking at the same code.. — Jpvdo
– Jpvdo, Commented Dec 24, 2019 at 19:14
You have id="choiceA" and id="choiceB" in both sections. Those are repeated. I would say change those to classes, but your logic doesn't really use them so it's not clear if they are needed at all — Taplar
– Taplar, Commented Dec 24, 2019 at 19:16

random · Accepted Answer · 2019-12-25 02:13:21Z

1

You can have question choices and a section within which the answer is going to be displayed within a div container. Then you can get the div (to display answer), by getting parentElement of clicked button element and then the div within it.

document.querySelectorAll('button')
  .forEach(button => {
    button.addEventListener('click', function() {
      const div = this.parentElement.querySelector('div');
      div.textContent = this.dataset.ans;
    });
  });

<div>
  <div class="question-one"></div>
  <button class="Button" data-ans="First question choice A">choice A</button>

  <button class="Button" data-ans="First question choice B">choice B</button>
</div>
<div>
  <div class="question-two"></div>
  <button class="Button" data-ans="Second question choice A">choice A</button>

  <button class="Button" data-ans="Second question choice B">choice B</button>
</div>

edited Dec 25, 2019 at 2:13

answered Dec 24, 2019 at 16:54

random

7,9093 gold badges21 silver badges25 bronze badges

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

2 Comments

Jpvdo Over a year ago

thanks for thinking with me. i have tryed to implement your code but didn't get it to work?

random Over a year ago

@Taplar - Thanks :)

Collectives™ on Stack Overflow

How do i create multiple buttons powered with javascript to display text in innerhtml?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related