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