Calling a function from an external JavaScript file in HTML

Question

Calling a function from an external JavaScript file in HTML

86 Views Asked by Eric Byrd At 06 March 2024 at 18:08

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.

Original Q&A

There are 4 best solutions below

Lajos Arpad On 06 March 2024 at 18:24

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

yeah_dis_is_me On 06 March 2024 at 18:41

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 :)

Heretic Monkey On 06 March 2024 at 18:56

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>

**Alexander Nenashev** · Accepted Answer · 2024-03-06T18:21:43.870000

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

Calling a function from an external JavaScript file in HTML

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in STACKBLITZ

Trending Questions

Popular # Hahtags

Popular Questions