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

Calling a function from an external JavaScript file in HTML

I’m learning HTML and practicing in the StackBlitz in-browser IDE. I’m trying to use a element’s onclick to change the text of a <p> element, but nothing’s happening when I click the button.

Code in the index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>

  <body>

    <p id="words">Starting Text</p>
    <button onclick="change()">Change Words</button>

  </body>

</html>

Code in the script.js file:

function change() {
  document.getElementById("words").innerText = 'Words Have Been Changed';
}

index.html and script.js are both in the root folder in the StackBlitz project directory.

I don’t know if there’s an obvious syntax blunder I’m missing, or if there’s something I don’t understand about the StackBlitz IDE, or something else. I tried assigning the alert() function to onclick, as well as custom functions defined in the HTML, and those all worked. It’s just when the assigned function is from the script.js file that nothing happens.

Tags:

4

Answers


  1. 0

    Either remove type="module" since a module’s scope is private or add Object.assign(window, {change}) to your script.js. Object.assign() is used to assign several functions at once, could be useful later.

    <script type="module">
function change() {
  document.getElementById("words").innerText = 'Words Have Been Changed';
}
Object.assign(window, {change});
</script>
<p id="words">Starting Text</p>
<button onclick="change()">Change Words</button>

    But better use addEventListener…

    Login or Signup to reply.
  2. 0

    Your Javascript code is correct:

    function change() {
  document.getElementById("words").innerText = 'Words Have Been Changed';
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>

    <p id="words">Starting Text</p>
    <button onclick="change()">Change Words</button>

  </body>

</html>

    so referring the script is problematic. Remove the type="module" part

    Login or Signup to reply.
  3. 0

    Just an idea but it should probably work like this:

    const changeEl = document.getElementById('wordsDiv');
const buttonEl = document.querySelector("button");

buttonEl.addEventListener("click", (event) => {
  changeEl.textContent = 'words have been change';
});
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wordsDiv">Starting Text</div>
    <button></button>
    <script src="script.js"></script>
</body>

</html>

    You may wanna go with "textContent" instead of "innerText" but that’s maybe just my preference, I dunno… and remember to style the button 🙂

    Login or Signup to reply.
  4. 0

    I believe mixing old-timey HTML with modern JavaScript is a disservice to both. Why not keep both modern?

    See Why are inline event handler attributes a bad idea in modern semantic HTML?, among others.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module">
    function changeWords() {
      document.querySelector('#words').textContent = 'Words Have Been Changed';
    }
    window.addEventListener('load', () => {
      document.querySelector('#change').addEventListener('click', changeWords);
    });
    </script>
  </head>

  <body>

    <p id="words">Starting Text</p>
    <button type="button" id="change">Change Words</button>

  </body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search