Search code examples
javascripthtmlexternal-js

HTML File Not Recognizing Functions Defined in external linked js file?


I am just starting to learn some programming for the first time and had a question I was hoping someone could help with, hopefully nothing too obvious I am missing.

(Revised Explanation Including Code Samples)

I am using a button to change the inner-html of an element, but I am trying to do the same thing in three ways. For the first way, I can do it. For the second two, I am having trouble and was looking for guidance:

First way I am doing is changing the innerhtml of a paragraph element, by clicking a button that has a statement defined directly behind the onclick event attribute for the button. This is working, code I use can be seen below:

<p id="change1">Does the button below change my text when I click it, based on entering a js function directly behind an onclick event entered as a button attribute?</p>
<button type="button" onclick="document.getElementById('change1').innerHTML = 'Yes_1'">See If It Works_1</button>

Second way I am trying to do this is by using a button that calls a function I defined within a script tag in my html file. The function I defined is supposed to perform the task of changing the innerhtml of the paragraph element I defined. This is not working, code sample can be seen below:

<p id="change2">Does the button below change my text when I click it, based on calling A Function Defined in script tag within My HTML File on with an onclick event?</p>
<button type="button" onclick="internalfunction()">See If It Works_2</button>
<script>
  function internalfunction() {
    document.getElementById("change2").innterHTML = "Yes_2";
  }
</script>

Third way I am trying to do this is the same as the second way, only instead of calling a function defined within a script tag in my HTML file, I am calling one I defined in an external js file. This file however sits in the same directory as my HTML file on my computer. This was is also not working right now. Sample of my code, and the way I linked to the js file can be seen below:

Here is the code in my HTML file:

 <p id="change3">Does This Button That Calls A Function Defined in My External JS File Work?</p>
            <button onclick="externalfunction">See If It Works_3</button>

here is the function I want to call in my external js file:

 function externalfunction(){document.getElementById("change3").innerHTML="Yes_3"};

here is the way I linked to my js file, entering this within the head of the html file:

  <script src="javascript.js"></script>

Solution

  • Per some help on the help on the comments and some more review this was confirmed a typo issue where () were omitted to call a function and innerHTML had been misspelled.