Vanilla Javascript : how to make a button clickable once only

Question

I have a quiz app application that I am working on that dynamically creates 2-4 buttons for the answer. However, if you click on an answer, you can keep clicking on the same answer or keep clicking the other answers. I want the user to be able to click one of the buttons but then not be able to keep clicking. caveat though: when a user clicks one of the buttons, a new "Next" button gets created and that one does still need it's click event.

tl;dr I need dynamically created buttons to be clickable only once but a "Next" button to still be clickable.

Code:

function renderButtons() {
  var answerContainer = document.getElementById("answer-buttons");
  answerContainer.innerHTML = "";

  for (var i = 0; i < 4; i++) {
    var button = document.createElement("button");
    button.classList.add("btn");
    button.setAttribute("id", "answerBtns");
    button.hasAttribute("data-correct");
    button.setAttribute("data-correct", questions[count].answers[i].correct);
    button.onclick = btnclick;
    button.textContent = questions[count].answers[i].text;
    answerContainer.appendChild(button);
  }
}

// if user clicks on button check if true
function btnclick(e) {
  e.preventDefault();
  var value = event.target.dataset.correct;
  scoreBox.textContent = "Score: " + score;
  if (value === "true") {
    score += 5;
    document.body.style.background = "green";
  } else {
    document.body.style.background = "red";
  }

  var next = document.getElementById("answer-buttons");
  var nextBtn = document.createElement("button");
  nextBtn.classList.add("nextBtn");
  nextBtn.textContent = "Next";

  next.appendChild(nextBtn);

  nextBtn.onclick = nextBtnFx;

if you want to see what I'm talking about, the app can be found here: https://andrethetallguy.github.io/Animal-Quiz/

Thanks!!!

disable buttons before you add "next" button... – iAmOren Jul 27 '20 at 19:25 — iAmOren, Jul 27 '20 at 19:25

score 1 · Answer 1 · answered Jul 27 '20 at 19:24

1

In the handler function nextBtnFx you could disable the button with

this.disabled = "true"

that would make it unclickable after the first click

ref: https://stackoverflow.com/a/17115132/13998159

answered Jul 27 '20 at 19:24

Ameya Rane

286
1
7

Thanks for the reply, however this does not seem to do the trick – AylaWinters Jul 28 '20 at 15:50

JulHirsch · Answer 2 · 2020-07-30T08:53:26.463

0

<!DOCTYPE html>
<html>

<head>
  <title>Button</title>
</head>

<body>
  <input type="button" id="btn01" value="OK">

  <button onclick="disableElement()">Disable</button>
  <button onclick="enableElement()">Enable</button>
  <script>
    function disableElement() {
      document.getElementById("btn01").disabled = true;
    }

    function enableElement() {
      document.getElementById("btn01").disabled = false;
    }
  </script>

</body>

</html>

You can use these functions to disable/enable the buttons.

edited Jul 30 '20 at 08:53

answered Jul 27 '20 at 19:34

JulHirsch

1
2

Thanks for the reply, however this does not work :( – AylaWinters Jul 28 '20 at 15:54
Hello, what doesn't work properly (you should put the enable/disable functions in your code) i can enable/disable the buttons with the code (but you have to assign an ID to your button first and use the method with it. ID assign: "" and in "document.getElementById("enter your ID here!").disabled = false;" – JulHirsch Jul 29 '20 at 17:31
Tried that and I can still click multiple times – AylaWinters Jul 30 '20 at 19:22

Vanilla Javascript : how to make a button clickable once only

2 Answers2