Question 200523 in Html Question posted in
Some basic documentation can be found here.

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

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,

Tags:

2

Answers


  1. 0

    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?

    Login or Signup to reply.
  2. 0

    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>`
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search