Simple Javascript is not running within my HTML-CodePudding

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.

Java script

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

HTML

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

CodePudding user response：

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>

CodePudding user response：

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>