首頁猿問簡單表格上的 html 和...

簡單表格上的 html 和 javascript

JavaScript

阿波羅的戰車 2023-05-11 14:47:32

我正在學習網絡開發的基礎課程。我使用 html 創建了一個非常簡單的表格，其中包含 2 列：蘋果和水果。水果應該是蘋果的數量 + 5（為了更好理解的基本方法）。我也嘗試添加一個 addeventlistenervar apples = document.getElementById('apples');var fruits = document.getElementById('fruits');function calculate() { fruits = apples + 5; fruits.innerHTML = fruits;}// Get all the input columnsvar inputElement = document.getElementById('apples');// Add Event Listeners to all the input columnsinputElement.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”。我在代碼中遺漏了什么嗎？提前致謝

查看完整描述

3 回答

泛舟湖上清波郎朗

TA貢獻1818條經驗獲得超3個贊

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);

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

反對回復 2023-05-11

溫溫醬

TA貢獻1752條經驗獲得超4個贊

value輸入值在標簽的屬性上更新input。所以需要得到像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);

<tr>

<th>apples</th>

<th>fruits</th>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

反對回復 2023-05-11

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

從中獲取字符串值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);

<tr>

<th>apples</th>

<th>fruits</th>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

反對回復 2023-05-11

3 回答
0 關注
212 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

簡單表格上的 html 和 javascript

簡單表格上的 html 和 javascript

3 回答

添加回答