简单表格上的 html 和 javascript

Question

我正在学习网络开发的基础课程。我使用 html 创建了一个非常简单的表格，其中包含 2 列：苹果和水果。水果应该是苹果的数量 + 5（为了更好理解的基本方法）。我也尝试添加一个 addeventlistener

var apples = document.getElementById('apples');

var fruits = document.getElementById('fruits');

function calculate() {

  fruits = apples + 5;

  fruits.innerHTML = fruits;

}

// Get all the input columns

var inputElement = document.getElementById('apples');

// Add Event Listeners to all the input columns

inputElement.addEventListener('change', calculate);

<table class="egt">

  <tr>

    <th>apples</th>

    <th>fruits</th>

  </tr>

  <tr>

    <td>

      <input type="number" id="apples">

    </td>

    <td>

      <input type="number" id="fruits">

    </td>

  </tr>

</table>

我没有在“水果”栏中得到“8”。我在代码中遗漏了什么吗？提前致谢

Answer 1

var fruits = document.getElementById('fruits');function calculate(event) {//use event here to get the apples element value on every change event.target.value so you dont have to fetch the element every time  fruits.value = (parseInt(event.target.value) + 5);  //parse it as nummber and + 5}var inputElement = document.getElementById('apples');inputElement.addEventListener('change', calculate);<table class="egt">  <tr>    <th>apples</th>    <th>fruits</th>  </tr>  <tr>    <td>      <input type="number" id="apples">    </td>    <td>      <input type="number" id="fruits">    </td>  </tr></table>

Answer 2

value输入值在标签的属性上更新input。所以需要得到像fruits.value和这样的价值apple.value。并且apples.value是字符串，所以求和运算需要转为数字。var apples = document.getElementById('apples');var fruits = document.getElementById('fruits');function calculate() {&nbsp; fruits.value = Number(apples.value) + 5;}// Get all the input columnsvar inputElement = document.getElementById('apples');// Add Event Listeners to all the input columnsinputElement.addEventListener('change', calculate);<table class="egt">&nbsp; <tr>&nbsp; &nbsp; <th>apples</th>&nbsp; &nbsp; <th>fruits</th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <input type="number" id="apples">&nbsp; &nbsp; </td>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <input type="number" id="fruits">&nbsp; &nbsp; </td>&nbsp; </tr></table>

Answer 3

从中获取字符串值apples.value并用于parseInt转换为整数，然后更新水果。var apples = document.getElementById('apples');var fruits = document.getElementById('fruits');&nbsp;&nbsp;&nbsp; function calculate() {&nbsp; &nbsp; fruits.value = parseInt(apples.value) + 5;&nbsp; }&nbsp; // Get all the input columns&nbsp; var inputElement = document.getElementById('apples');&nbsp; // Add Event Listeners to all the input columns&nbsp; inputElement.addEventListener('change', calculate);<table class="egt">&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>apples</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>fruits</th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="number" id="apples">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="number" id="fruits">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </table>