我只是在為我的一個小專案開發一個簡單的計算器。我只是希望獲得有關我的 calculatArea1 功能的幫助。
我將附上幾張顯示網頁、html 代碼和 Javascript 的圖片。
html 以包含 3 個單元格的空行開頭，因此用戶可以添加視窗的高度和寬度。然后，有一個按鈕允許用戶添加新的行/視窗。這一切都很好。
我遇到的問題是，每當我添加多行時，然后開始添加寬度和高度，然后單擊計算它只會計算頂行。
我也可以添加，如果我從一行開始，然后添加高度和寬度，然后單擊計算。然后，單擊添加視窗，然后添加寬度和高度，然后再次計算。有用。
我只是希望能夠根據需要添加盡可能多的行，然后添加資料，然后單擊計算。
任何建議將不勝感激，干杯！
HTML
<table id="table1">
<tr>
<th>Height</th>
<th>Width</th>
<th>Area</th>
</tr>
<tr>
<td><input class="height" type="text"></td>
<td><input class="width" type="text"></td>
<td><div class="area"></div></td>
</tr>
</table>
這是我的 Javascript 函式
function addWindow1() {
var table1 = document.getElementById("table1");
var row1 = table1.insertRow(1);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var cell3 = row1.insertCell(2);
cell1.innerHTML = '<input type="text">';
cell2.innerHTML = '<input type="text">';
cell3.innerHTML = '<div ></div>';
};
function calculateArea1() {
var table1 = document.getElementById("table1");
for(var i = 0; row = table1.rows[i]; i ){
var height = document.querySelector('.height').value;
var width = document.querySelector('.width').value;
var area = document.querySelector('.area');
var areaResult = height * width;
area.innerHTML = areaResult;
};
};
如果我先添加多行，然后添加寬度和高度，然后單擊計算，就會發生這種情況
uj5u.com熱心網友回復：
轉到添加視窗按鈕并添加，onclick="addNewWindow()"然后添加此功能
function addNewWindow(){
let table = document.querySelectot('#table1');
let window = `
<tr>
<td><input type="number" ></td>
<td><input type="number" ></td>
<td><input type="number" disabled style="user-select: select-all"></td>
</tr>
`;
table.insertAdjacentHTML('beforeend', window)
}
然后添加計算功能
var hinputs = document.querySelectorAll('.height');
var winputs = document.querySelectorAll('.width');
hinputs.foreach(h=>{
h.addEventListener('change', ()=>{
let width = h.parentElement.querySelector('.width');
let window = h.parentElement.querySelector('.window');
if(width.value !== ""){
calculate(width.value, h.value, window )
}
})
})
winputs.foreach(w=>{
w.addEventListener('change', ()=>{
let height = w.parentElement.querySelector('.height ');
let window = w.parentElement.querySelector('.window');
if(height.value !== ""){
calculate(w.value, height.value, window)
}
})
})
function calculate(w, h, result){
result.value = w*h;
}
演示：
function addNewWindow() {
let table = document.querySelector('#table');
let window = `
<tr>
<td><input type="number" ></td>
<td><input type="number" ></td>
<td><input type="number" disabled style="user-select: select-all"></td>
</tr>
`;
table.insertAdjacentHTML('beforeend', window)
}
var hinputs = document.querySelectorAll('.height');
var winputs = document.querySelectorAll('.width');
hinputs.forEach(h => {
h.addEventListener('input', () => {
let width = h.parentElement.parentElement.querySelector('.width');
let window = h.parentElement.parentElement.querySelector('.window');
if (width.value !== "") {
calculate(width.value, h.value, window)
}
})
})
winputs.forEach(w => {
w.addEventListener('input', () => {
let height = w.parentElement.parentElement.querySelector('.height');
let window = w.parentElement.parentElement.querySelector('.window');
if (height.value !== "") {
calculate(w.value, height.value, window)
}
})
})
function calculate(w, h, result) {
result.value = w * h;
}<table id="table">
<tr>
<td><input type="number" class="height"></td>
<td><input type="number" class="width"></td>
<td><input type="number" class="window" disabled style="user-select: select-all"></td>
</tr>
<tr>
<td><input type="number" class="height"></td>
<td><input type="number" class="width"></td>
<td><input type="number" class="window" disabled style="user-select: select-all"></td>
</tr>
</table>
<button onclick="addNewWindow()">add</button>您可以使用 ".innerHTML =" 或 .insertAdjacentHTML('beforeend', '<div></div>');
但是 innerHTML 洗掉了舊輸入的值，因為它獲取舊值并將其添加到您的代碼中，然后將其替換為當前 HTML，因此所有手動應用的值都將被洗掉，因此請使用 inserting beforeend 來執行此操作：
let table = document.querySelectot('#table1');
let window = `
<tr>
<td><input type="number" ></td>
<td><input type="number" ></td>
<td><input type="number" disabled style="user-select: select-all"></td>
</tr>
`;
table.insertAdjacentHTML('beforeend', window)
uj5u.com熱心網友回復：
您只能在函式querySelector內部獲得一個元素。calculateArea1您應該遍歷每一行并使用該行的寬度和高度值更新該區域。
data一種方法是給包含寬度、高度和面積單元格的行提供一個類（比如說），然后回圈使用data該類的所有元素，并使用querySelector.
您可以將addWindow1功能簡化為：
function addWindow1() {
const row1 = table1.insertRow(1)
row1.className = 'data'
row1.innerHTML = `
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><div ></div></td>
`
}
calculateArea1然后按如下方式更新您的函式：
function calculateArea1() {
const data = document.querySelectorAll('.data')
for (let i = 0; i < data.length; i ) {
const height = data[i].querySelector('.height').value
const width = data[i].querySelector('.width').value
data[i].querySelector('.area').textContent = height * width
}
}
這是一個作業示例：
const add = document.getElementById('add')
const calc = document.getElementById('calc')
const table1 = document.getElementById('table1')
add.addEventListener('click', addWindow1)
calc.addEventListener('click', calculateArea1)
function addWindow1() {
const row1 = table1.insertRow(1)
row1.className = 'data'
row1.innerHTML = `
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><div ></div></td>
`
}
function calculateArea1() {
const data = document.querySelectorAll('.data')
for (let i = 0; i < data.length; i ) {
const height = data[i].querySelector('.height').value
const width = data[i].querySelector('.width').value
data[i].querySelector('.area').textContent = height * width
}
}<button id="add">add</button>
<button id="calc">calc</button>
<table id="table1">
<tr>
<th>Height</th>
<th>Width</th>
<th>Area</th>
</tr>
<tr class="data">
<td><input class="height" type="text" /></td>
<td><input class="width" type="text" /></td>
<td>
<div class="area"></div>
</td>
</tr>
</table>uj5u.com熱心網友回復：
在 for 回圈中，您應該從當前行而不是從 DOM 中選擇寬度/高度。
// select the first item with class `height` in the DOM => not what you want
var height = document.querySelector('.height').value;
// this should work
var height = row.querySelector('.height').value;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419447.html
標籤：