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

Question

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,

ee-4-me · Accepted Answer · 2023-07-04 19:13:34Z

1

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?

answered Jul 4, 2023 at 19:13

ee-4-me

2902 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mélanie JULLIOT Over a year ago

Thanks for the reply. Here is what my full HTML look like : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="riddle.js"></script> <title>Riddle</title> </head> <body> <h1>A riddle a day</h1> <p>Click on the button below to discover your riddle of the day</p> <button onclick="riddle()">Riddle</button> <p id="Riddle"> </p> </body> </html>

Mélanie JULLIOT Over a year ago

I am sorry, this is my first time posting and commenting and I have no idea how to format the comment to make it more readable.

Mélanie JULLIOT Over a year ago

I tried with the js directly on html and it works. I'm probably badly linking the js to the html.

ee-4-me Over a year ago

It could be the linking. What does your folder structure "look" like? Generally web apps link javascript files from a different folder from where the html files are located. If you have done that here, you will need to add the path to the javascript file relative to your html file. Check out this post stackoverflow.com/questions/1411627/javascript-src-path

Mélanie JULLIOT Over a year ago

Oh so this is the problem. Never knew that. Thank you!

Chanaka-7518 · Accepted Answer · 2023-07-04 19:22:14Z

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>`

answered Jul 4, 2023 at 19:22

Chanaka-7518

536 bronze badges

1 Comment

Mélanie JULLIOT Over a year ago

Thanks for the reply. This code does work on my side. I'll try to add my code on the html and not link the js to html.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related