Simple Javascript is not running within my HTML

Question

I am new to coding so sorry if there is a blatant mistake I am missing. I made sure both files are in the same folder. I linked the js file to the HTML file using the correct path. I made sure my browser has JS enabled for websites. The code works in fiddle but does not work locally.

HTML

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<html>
<body>

<script  type="text/javascript" src="app.js" charset="utf-8"></script>

<select id="brands">
<option value="trane">trane</option>
<option value="brand2">brand2</option>
<option value="brand3">brand3</option>
</select>
    
<input id="txtField" type="text" name="b">
<button onClick="check();">submit</button>
<div id="result"></div>

</body>
</html>

Javascript

var brands = {
    "trane": tonnageTrane,
    "brand2": {},
    "brand3": {}
  }

var tonnageTrane = {
    "18": 1,
    "24": 2,
    "30": 2.5,
    "36": 3,
    "42": 3.5,
    "48": 4
  }
  

  function check() {
    var select = document.getElementById('brands');
    var value = select.options[select.selectedIndex].value;
    var inp = document.getElementById('txtField').value;
    
    document.getElementById('result').innerHTML = brands[value][inp.substring(4, 6)];
  }

edit: added the text version of code

If one of the below answers helped you, please mark it as accepted — Chris Barr
– Chris Barr, Commented Mar 29, 2023 at 17:19

Chris Barr · Accepted Answer · 2022-02-14 19:41:50Z

1

You have a few problems. First you have two opening <HTML> tags. Next, you are missing a <head> tag.

As for your script, you either need to link to the JS file LAST inside of the body tag, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
 </head>
  <body>

    Your HTML Here

    <script type="text/javascript" src="app.js" charset="utf-8"></script>
  </body>
</html>

Or within the head tag, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="app.js" charset="utf-8"></script>
  </head>
  <body>
    Your HTML Here
  </body>
</html>

edited Feb 14, 2022 at 19:41

answered Feb 14, 2022 at 19:41

Chris Barr

34.6k28 gold badges105 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

isherwood Over a year ago

None of those address the actual issue (and the script location is not a problem here).

omoshiroiii · Accepted Answer · 2022-02-14 19:51:59Z

You should write your code as below when posting a question or answer.

Your code repeats its HTML tag twice, your script tag should be in the head, and tonnage should be above brands since tonnage is used in it - regardless though your code should work. Your issue is most likely that your JavaScript file is not in the same folder as your HTML file. You can also use the HTML I made from yours below just in case there is a syntax issue I did not see; I tested the code and it works fine. When debugging your JavaScript code, you should use the console of the web browser; it will show you the errors.

JS:

var tonnageTrane = {
    "18": 1,
    "24": 2,
    "30": 2.5,
    "36": 3,
    "42": 3.5,
    "48": 4
}

var brands = {
    "trane": tonnageTrane,
    "brand2": "brand2test",
    "brand3": "brand3test"
}

function check(){
    var select = document.getElementById('brands');
    var value = select.options[select.selectedIndex].value;
    var inp = document.getElementById('txtField').value;
    document.getElementById('result').innerHTML = brands[value][inp.substring(4, 6)];
}

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
        <select id="brands">
            <option value="trane">trane</option>
            <option value="brand2">brand2</option>
            <option value="brand3">brand3</option>
        </select>
        <input id="txtField" type="text" name="b">
        <button onClick="check();">submit</button>
        <div id="result"></div>
    </body>
</html>

Collectives™ on Stack Overflow

Simple Javascript is not running within my HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related