2 buttons but randomly one is right-CodePudding

I am new to programing. I am trying to make it so there are two buttons but randomly one of them is correct. If you click the right one then it prints some text. I am trying to do this in html and javascript. Any ideas? Thanks!

CodePudding user response：

This should work:

<button onclick="isCorrect()">1. option</button>
<button onclick="isCorrect()">2. option</button>
<script>
  function isCorrect() {
    if (Math.floor(Math.random() * 2) == 1) {
      alert('Correct!');
    } else {
      alert('Incorrect!')
    }
  }
</script>

CodePudding user response：

If you want the correct button to be persistant between button presses you need to first generate which one is correct. In my example I generate a number between 0 and 100, and if it's more than 50 the first button is correct.

Then on each button press I check if the pressed button is the correct one.

var correct = [];

function randomBool() {
  return Math.floor(Math.random() * 100) > 50;
}

function isCorrectButton(index) {
  if (correct[index])
    alert("You pressed the correct button.");
  else
    alert("You pressed the incorrect button.");
}

function randomize() {
  correct.length = 0;
  let random = randomBool();
  correct.push(random);
  correct.push(!random);
}

randomize();

<div>
  <button onclick="isCorrectButton(0)">A</button>
  <button onclick="isCorrectButton(1)">B</button>
  
  <button onclick="randomize()">Randomize</button>
</div>

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script>
const answers = ['first answer', 'next answer', 'one more', 'yet another'];

const random = (() => {
  const randomQuestion = Math.floor(Math.random() * answers.length);
  document.getElementById('answer').innerHTML = answers[randomQuestion];

});
  </script>
</head>
<body>
  <button onclick="random()">1</button>
  <button onclick="random()">2</button>
  <div id="answer"></div>
</body>
</html>

CodePudding user response：

You can use a random number between 0 & 1 if they match the i value of tag than it is correct option else it is wrong .

The below snippet works like this :

A random number between 0 or 1 is generated using Math.floor(Math.random() * 2); ( more about Math.random ; more about Math.floor )
Now button's are taken using the TagName , if the index of btn matches the random number it's color changes to green else it will change to red .

var btnLuck = document.getElementsByTagName("BUTTON");
function randomNumber() {
  var randNum = Math.floor(Math.random() * 2);
  document.getElementById("demo").innerHTML = randNum;
  
  for (let i = 0; i < btnLuck.length; i  )
    if (i == randNum) {
      document.getElementById("demo").innerHTML = "lucky number is "   randNum;
      btnLuck[i].style.backgroundColor = "green"
    } else {
      document.getElementById("demo").innerHTML = "lucky number is "   randNum;
      btnLuck[i].style.backgroundColor = "red"
    }
}

<button onclick="randomNumber()">Lucky number 0</button>
<button onclick="randomNumber()">Lucky number 1</button>
<div id="demo"></div>