Question

我是JavaScript的新手，几乎都是编程。我正在尝试创建一个Web应用程序，我似乎无法将innerHTML传递给我的JavaScript代码。我做错了什么？

<head>
  <title>Injector Calculator
  </title>
</head>
<body type = "text/HTML/CSS">
  <p> Please enter your desired horse power!</p>
  Desired Horsepower: <input type ="text" id="desiredHp"></input>
  Which Engine: 
  <select id="engineType" type = "text" value="value">
    <option>G60T</option>
    <option>2.0 8v</option>
    <option>MK2 16v</option>
    <option>12V VR6</option>
    <option>24V VR6</option>
    <option>R32</option>
    <option>B5 S4</option>
  </select>
  <button id= "button1" onclick="computeCC();">Find my Injectors!</button>
  <p id = "output">ccs</p>
  <p id ="output2"></p>
  <script type = "text/javascript"> 
    function computeCC()
    {
        var hp = parseInt(document.getElementById("desiredHp").value);
        var eT = document.getElementById("engineType").value;
        document.getElementById("output").innerHTML = hp;
        document.getElementById("output2").innerHTML = eT;
    }
  </script>
</body>
</html>

Answer 1

您的代码几乎不需要重制，您在语法方面存在一些小问题。 select标签不能具有'value'属性，因为它的值是所选选项标签的值，并且您不需要select的'type'属性。输入标记没有结束标记。当我输入一些不是输入标记内的数字的文本时，您的JS函数失败。以下是代码的一些升级，如果有必要，可以进行更改。

<p> Please enter your desired horse power!</p>
Desired Horsepower: <input type ="text" id="desiredHp"/>
Which Engine: <select id="engineType">
    <option value='G60T'>G60T</option>
    <option value='2.0 8v'>2.0 8v</option>
    <option value='MK2 16v'>MK2 16v</option>
    <option value='12V VR6'>12V VR6</option>
    <option value='24V VR6'>24V VR6</option>
    <option value='R32'>R32</option>
    <option value='B5 S'>B5 S4</option>
</select>
<button id="button1" onclick="computeCC();">Find my Injectors!</button>
<p id="output"></p>
<p id="output2"></p>
<script type="text/javascript">
    function computeCC()  {
        var hp = document.getElementById("desiredHp").value;
        if (!isNaN(hp)) {
          hp = parseInt(document.getElementById("desiredHp").value);
          var eT = document.getElementById("engineType").value;
          document.getElementById("output").innerHTML = hp;
          document.getElementById("output2").innerHTML = eT;
        }
    }
</script>

Answer 2

您需要添加值属性来选择下面的选项元素。

`<select id="engineType" type = "text">
        <option value="G60T">G60T</option>
        <option value="2.0 8v">2.0 8v</option>
        <option value="MK2 16v">MK2 16v</option>
        <option value="12V VR6">12V VR6</option>
        <option value="24V VR6">24V VR6</option>
        <option value="R32">R32</option>
        <option value="B5 S4">B5 S4</option>
    </select>`

Answer 3

没有type = "text/HTML/CSS"
<option>需要价值
使用el.options[el.selectedIndex].text

总计

function output() {
  var horsepower = document.getElementById("horsepower"),
    outputHorsepower = document.getElementById("outputHorsepower"),
    engine = document.getElementById("engine"),
    outputEngine = document.getElementById("outputEngine");

  outputHorsepower.innerHTML = horsepower.value;
  outputEngine.innerHTML = engine.options[engine.selectedIndex].text;
}

<p> Please enter your desired horse power!</p>
<div>
  <label>Desired Horsepower: </label>
  <input type="text" id="horsepower" />
</div>
<div>
  <label>Which Engine:</label>
  <select id="engine" type="text">
        <option value="G60T">G60T</option>
        <option value="2.0 8v">2.0 8v</option>
        <option value="MK2 16v">MK2 16v</option>
        <option value="12V VR6">12V VR6</option>
        <option value="24V VR6">24V VR6</option>
        <option value="R32">R32</option>
        <option value="B5 S4">B5 S4</option>
    </select>
</div>
<button id="button" onclick="output();">Find my Injectors!</button>
<div id="outputHorsepower"></div>
<div id="outputEngine"></div>

innerHTML没有传递给JavaScript

3 个答案: