JavaScript in HTML not working - onclick=function() + inner.HTML

M233lanieJULLIOT
July 4, 2023
111 views
0 votes
2 Answers

I would like a random sentence (selected through a function) to appear on my HTML when we click on a button.

Here is my HTML code :

<button onclick="riddle()">Riddle</button>
<p id="Riddle"> </p>

And here is my JavaScript code:

function riddle(){
  const randomRiddle = riddlesBase[Math.floor(Math.random()*20)];
  document.getElementById("Riddle").innerHTML = randomRiddle;
};

If I console.log(randomRiddle), a sentence appears (a different one each time, but it doesn’t do anything on the website here.

Could you tell me what is wrong and how to make it work?

Thank you,

Answers

Working in JSfiddle

const riddlesBase = [
'riddle1',
'riddle2',
'riddle3',
'riddle4',
'riddle5',
'riddle6',
'riddle7',
'riddle8',
'riddle9',
'riddle10',
'riddle11',
'riddle12',
'riddle13',
'riddle14',
'riddle15',
'riddle16',
'riddle17',
'riddle18',
'riddle19',
'riddle20',
]

function riddle(){
  const randomRiddle = riddlesBase[Math.round(Math.random()* (riddlesBase.length - 1))];
  document.getElementById("Riddle").innerHTML = randomRiddle;
};

<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  </head>

  <body>
    <button onclick="riddle()">Riddle</button>
    <p id="Riddle"> </p>
  </body>
</html>

What does your full HTML look like?

I think there is no issues. Check with this code and try again.This one works properly.

   `<!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>Javascript Events</title>
      </head>
      <body>
        <script>
          const riddlesBase = [
            "Riddle 1",
            "Riddle 2",
            "Riddle 3",
            "Riddle 4",
            "Riddle 5",
            "Riddle 6",
            "Riddle 7",
            "Riddle 8",
            "Riddle 9",
            "Riddle 10",
            "Riddle 11",
            "Riddle 12",
            "Riddle 13",
            "Riddle 14",
            "Riddle 15",
            "Riddle 16",
            "Riddle 17",
            "Riddle 18",
            "Riddle 19",
            "Riddle 20",
          ];
    
          function riddle() {
            const randomRiddle = riddlesBase[Math.floor(Math.random() * 20)];
            document.getElementById("Riddle").innerHTML = randomRiddle;
            console.log(randomRiddle);
          }
        </script>
        <button onclick="riddle()">Riddle</button>
        <p id="Riddle"></p>
      </body>
    </html>`

Please signup or login to give your own answer.

Click here to cancel reply.

JavaScript in HTML not working – onclick=function() + inner.HTML

Answers