CODEWITHSUNDEEP
javascriptbuttoninnerhtml
Jpvdo
Jpvdo

Reputation: 3

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

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');
}

Upvotes: 0

Views: 1364

Answers (1)

random
random

Reputation: 7891

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>

Upvotes: 1

Related Questions