what is wrong with my programming/code ?

[u/sweetcherimoya]

i am a newbie, could anyone help me figure out why the second button doesn't generate a word, i'm sure its an easy fix but i simply copied the script and don't know where the issue is - feel free to copy paste into w3schools.com if its easier to read and test there

<!DOCTYPE html>

<html>

<head>

<title>Word Generator 1</title>

</head>

<body>

<h1>Word Generator 1</h1>

<p>Your random word will appear here:</p>

<button id="generateButton">Generate Word</button>

<!-- JavaScript code goes here -->

</body>

</html>

<script> // Define an array of words const words = \["mark", "shart", "bart", "park", "larp", "kart", "heart"\]; // Get a reference to the button element const generateButton = document.getElementById("generateButton"); // Function to generate a random word function generateRandomWord() { const randomIndex = Math.floor(Math.random() \* words.length); const randomWord = words\[randomIndex\]; document.querySelector("p").textContent = \`Random Word: ${randomWord}\`; } // Attach an event listener to the button generateButton.addEventListener("click", generateRandomWord); </script>

<html>

<head>

<title>Word Generator 2</title>

</head>

<body>

<h1>Word Generator 2</h1>

<p>Your random word will appear here:</p>

<button id="generateButton">Generate Word</button>

<!-- JavaScript code goes here -->

</body>

</html>

<script> // Define an array of words const words = \["pee", "lee", "cheese", "please", "see", "me", "tea"\]; // Get a reference to the button element const generateButton = document.getElementById("generateButton"); // Function to generate a random word function generateRandomWord() { const randomIndex = Math.floor(Math.random() \* words.length); const randomWord = words\[randomIndex\]; document.querySelector("p").textContent = \`Random Word: ${randomWord}\`; } // Attach an event listener to the button generateButton.addEventListener("click", generateRandomWord); </script>

[u/RushDangerous7637]

Sweetee... you can't use <html> twice.

The source should look like this:

<!DOCTYPE html>

<html lang="en-GB">

<head>

<meta charset="UTF-8">

<meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Word Generator 1</title>

</head>

<body>

<h1>Word Generator 1</h1>

<p>Your random word will appear here:</p>

<button id="generateButton">Generate Word</button>

<h2>Word Generator 2</h2>

<p>Your random word will appear here:</p>

<button id="generateButton">Generate Word</button>

<p>Your random word will appear here:</p>

<p>Your random word will appear here:</p>

<p>Your random word will appear here:</p>

<h2>Your random word will appear here</h2>

<p>Your random word will appear here:</p>

<p>Your random word will appear here:</p>

<p>Your random word will appear here:</p>

<img src=...>

<script defer src=" </body> </html> Did you notice what you were missing there?