Simple Javascript没有在我的HTML中运行

fwzugrvs  于 2023-04-04  发布在  Java
关注(0)|答案(2)|浏览(120)

我是新的编码,所以很抱歉,如果有一个明显的错误,我错过了.我确保这两个文件在同一个文件夹.我链接的js文件到HTML文件使用正确的路径.我确保我的浏览器有JS启用网站.代码在fiddle工作,但不工作本地.
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)];
  }

编辑:添加了文本版本的代码

xienkqul

xienkqul1#

你有几个问题。首先你有两个打开的<HTML>标记。接下来,你缺少一个<head>标记。
至于你的脚本,你需要在body标签中链接到JS文件LAST,像这样:

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

或者在head标签中,像这样:

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

mcdcgff02#

你应该写你的代码如下当张贴一个问题或答案。
您的代码重复了两次HTML标签,您的脚本标签应该在头部,并且tonnage应该在brands之上,因为tonnage在其中使用-无论您的代码是否应该工作。您的问题很可能是您的JavaScript文件与HTML文件不在同一个文件夹中。您也可以使用我从您的HTML文件中创建的HTML,以防我没有看到语法问题;我对代码进行了测试,运行正常,调试你的JavaScript代码时,应该使用网页浏览器的控制台;它会告诉你错误。
联森:

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>

相关问题