时间戳

首页 > 解决方案 > 如何修复此功能？Javascript

javascript - 如何修复此功能？Javascript

问题描述

我正在尝试创建一个函数，通过给出您需要行驶的距离和引擎的消耗来计算您需要的汽油量，但是当我单击按钮时没有任何反应，这里是代码：

function calc() {
  var dist = document.getElementById("distance").value
  var cons = document.getElementById("cons").value
  var res = dist / 100 * cons
  res.innerText = "You need " + res + "liters of gas.";
}

function load() {
  var button = document.getElementById("button");
  button.addEventListener("click", calc, false);
}
<main onload="load();">
  <h2>Calculate how much gas you need</h2>
  <input type="number" class="number" id="dist"><br/>
  <input type="number" class="number" id="cons"><br/><br/>
  <input type="button" class="button" id="button" value="Submit"><br/>
  <p id="res"></p>
</main>

标签： javascripthtmlcss

解决方案

您的代码中有几个问题：

  1. load()您可以通过执行所有代码来忽略DOMContentLoaded.

  2. 您应该参考元素p来替换innerText属性

我还建议您在命名属性时更加小心。

代码示例：

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    function calc() {
      var dist = document.getElementById("dist").value
      var cons = document.getElementById("cons").value
      var resEl = document.getElementById('res');
      var res = dist / 100 * cons
      resEl.innerText = "You need " +res+"liters of gas.";
    }

    var button = document.getElementById("calcButton");
    button.addEventListener("click", calc);
  }); 
</script>

<main>
    <h2>Calculate how much gas you need</h2>
    <input type="number" class="number" id="dist"><br/>
    <input type="number" class="number" id="cons"><br/><br/>
    <input type="button" class="clsButton" id="calcButton" value="Submit"><br/>
    <p id="res"></p>
</main>

推荐阅读