html 和 javascript 简单 table

Question

我正在学习网络开发的基础课程。我使用 html 创建了一个非常简单的 table，有 2 列：Apples 和 fruits。水果应该是苹果的数量 + 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

输入值在 input 标签的 value 属性上更新。所以需要得到像 fruits.value 和 apple.value.
而apples.value是字符串，求和需要转为数字

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

function calculate() {
  fruits.value = Number(apples.value) + 5;
}
// 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>

Answer 2

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>

在此处阅读如何target Event Property

还阅读了 JavaScript parseInt() Function

Answer 3

从apples.value中获取字符串值并使用parseInt转换为整数然后更新水果。

var apples = document.getElementById('apples');
var fruits = document.getElementById('fruits');
  
  function calculate() {
    fruits.value = parseInt(apples.value) + 5;
  }
  // 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>

html 和 javascript 简单 table

html and javascript on a simiple table

html

javascript

addeventlistener