0

first off I have both my JavaScript and my html files in the same folder. I cannot understand why none of my javascript works in the html file.

I have tried putting the Script directly into the html file without sourcing the Script file. I have attempted 3 different ways of adding my function to the html file to no avail. I am trying to make a hangman game for practice because I figured it was probably the easiest thing to try after going thru all the classes I took. However, I cannot even get through testing if my JavaScript even works. I'll let the code speak for itself. (this JS code is within the body of the html file if that helps. Obviously, I do have script type="txt/javascript" src="hangman.js" JS tags at the bottom of my html body) 1st try: html:

<div id="game">
  <button id="testA" onclick="showWord()">show word</button>
  <p id="word"></p>
</div>

external JS file code:

function showWord() {
document.getElementById("word").innerHTML = "test";}

2nd try: html:

<div id="game">
  <button id="testA">show word</button>
  <p id="word"></p>
</div>

external JS file code:

function showWord() {
    document.getElementById("testA").addEventListener("click", function(){
    document.getElementById("word").innerText = "test";}

after this, I tried adding this code directly to the script tag and omitted the external script and still no luck. I also tried adding the onclick attribute to the html file with this with no change. 3rd try:(tried saving the element selection to a global variable here in case that was the problem) html:

<div id="game">
      <button id="testA" onclick="showWord()">show word</button>
      <p id="word"></p>
</div>

external JS file code:

const test = document.querySelector("#word");
function showWord() {
    test.innerHTML = "try 3";
}

still... no change... please help!

Adam Brame
  • 9
  • 2
  • Please provide a [mre] as a Stack Snippet, preferably. Your first method works fine here: https://jsfiddle.net/gyxmapd9/ – Unmitigated Mar 10 '23 at 02:08
  • Could it be that you added the script tag to the head element? If that's the case, it's likely that [`defer`](https://stackoverflow.com/a/39711009) is needed. – InSync Mar 10 '23 at 02:13
  • Most new developer put `script` in the header tag. Maybe this will be the problem. Try putting in after the header tag ` – Khant Min Si Thu Mar 10 '23 at 02:15
  • nope, I have only tried at the end of the html body for the script tags. – Adam Brame Mar 10 '23 at 02:16
  • Is that all that the content of your `body` tag? Do you have 2 or more elements called `word`? – qrsngky Mar 10 '23 at 02:16
  • Okay, i really don't know how to answer to the comment from Khant... I am still new so I may very well be wrong but I thought it was just head tags not header... and if i was putting it inside a header tag wouldn't it be after a
    tag not a
    end tag as in the answer? Just trying to be very precise here...     – Adam Brame Mar 10 '23 at 02:22
  • There are no other elements with the id "word" anywhere else in the html file. – Adam Brame Mar 10 '23 at 02:25
  • Does your code show any error message? – Shuo Mar 10 '23 at 02:51

2 Answers2

0

Your first try should have worked. Was your browser actually re-loading your page? If it was using a cached version of the page, and you hadn't finished your code by adding the script, you would see the previous behavior of the page. To check what is loaded in chrome, you can use f12 to view the page and see if it matches your latest changes.
see: https://alphaefficiency.com/how-does-browser-caching-affect-web-design

<HTML>
<head>
<script>
function showWord() {
document.getElementById("word").innerHTML = "test";

alert("yes?");
}
</script>
</head>
<div id="game">
  <button id="testA" onclick="showWord()">show word</button>
  <p id="word"></p>
</div>
</html>

Your second try does not appear to ever call showWord. You have the creation of the listener inside the function you want the listener to call.

Patrick Callahan
  • 1
  • 1
0

If you're adding the script via a tag that looks like:

<script type="txt/javascript" ...>

It will not work.

The documentation for the <script> element notes:

Authors are encouraged to omit the [type] attribute if the script refers to JavaScript code rather than specify a MIME type.

And the valid MIME type for javascript is text/javascript among others, not txt/javascript.

cSharp
  • 2,884
  • 1
  • 6
  • 23