VS Code: HTML file not pulling functions from attached javascript

March 20, 2022

Doing some basic practice/testing for a project I’m working on and can’t get my html file to access the functions written in the attached javascript file. I feel like there’s something super basic that I’m missing but I can’t put my finger on it.

I pulled the basic button from here: Creating an ON/OFF button with javascript
And I tried the solutions here: HTML file not pulling information from javascript file

My html:

<!DOCTYPE html>
<head>
  <script type="text/javascript" src="app.js"></script>
  <link rel="stylesheet" href="style.css">
</head> 
<body>
    <input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>

My js:

function turn(){
    currentvalue = document.getElementById('turn').value;
    if(currentvalue == "X"){
        document.getElementById("turn").value="O";
    }
    else{
        document.getElementById("turn").value="X";
    }
}

The function itself works when embedded in a script tag within <body> but not when pulled from the attached javascript file. What am I missing?

>Solution :

function turn(){
    currentvalue = document.getElementById('turn').value;
    if(currentvalue == "X"){
        document.getElementById("turn").value="O";
    }
    else{
        document.getElementById("turn").value="X";
    }
}

<!DOCTYPE html>
<head>
  <script type="text/javascript" src="app.js" defer></script>
  <link rel="stylesheet" href="style.css">
</head> 
<body>
    <input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>

You need to add defer atrribute.