我開始研究 javascript 中的 DOM，我想創建一個程式，將輸入時給出的兩個數字相加并顯示出來。
我想知道我應該使用哪些功能，以及我沒有使用哪些功能更好。
這是我的（非常簡單的）html代碼：
let warp = document.getElementById('warp');
let first = document.getElementById('first').value;
let one = parseInt(first);
let second = document.getElementById('second').value;
let two = parseInt(second);
let res = document.getElementById('res');
//res.addEventListener('click', calcul);
//res.onclick(calcul);
let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);
function calcul(first, second) {
console.log(one two);
event.preventDefault();
}<!DOCTYPE html>
</head>
<body>
<div id="warp">
<form>
<input id="first" type="number">first number</input>
<input id="second" type="number">second number</input>
<input id="res" type="submit" value="Envoyer" onclick="calcul()" />
</form>
<div>
</body>uj5u.com熱心網友回復：
let answerElemenet = document.createElement("h1");
// You can create a h1 element to display your answer after calculating it
document.body.appendChild(answerElemenet);
// Inside the calculate Function you get the values of input one and two
// and then you store the sum value in a variable and just change your
// answerElement to have the innerHTML value of the finalSum Variable
function calculate(){
let valueOne = parseFloat(document.getElementById('first').value);
let valueTwo = parseFloat(document.getElementById('second').value);
let finalSum = valueOne valueTwo;
answerElemenet.innerHTML = finalSum;
}
uj5u.com熱心網友回復：
歡迎來到 Stackoverflow！
我復制了你的答案并做了一些小改動。以下是您可以做得更好的簡要說明和解釋：
如果您不打算更改這些參考，請使用const而不是let. 還要嘗試將輸入元素與其值分開。對輸入的參考可能不會改變，但它們的值肯定會改變。
const warp = document.getElementById('warp');
const first = document.getElementById('first');
const second = document.getElementById('second');
const res = document.getElementById('res');
在計算輸入值時，您通常希望它們盡可能新鮮，因此不是在腳本開頭保存輸入值，而是在需要時在calcul()函式中獲取它們。
您還需要某種驗證。在這里，我們嘗試將輸入轉換為數字并在不可能的情況下設定為零：
function calcul() {
event.preventDefault();
const one = parseFloat(first.value) || 0;
const two = parseFloat(second.value) || 0;
console.log(one two);
}
向 DOM 元素添加事件處理程式的首選方法是使用事件 API。因此，要呼叫該calcul()函式，請使用您評論過的行：
res.addEventListener('click', calcul);
這也意味著您應該從 DOM 中洗掉 onClick 屬性。此外，輸入不能有孩子：
<input id="first" type="number" />
<input id="second" type="number" />
<input id="res" type="submit" value="Envoyer"/>
所有這些看起來像這樣：
const warp = document.getElementById('warp');
const first = document.getElementById('first');
const second = document.getElementById('second');
const res = document.getElementById('res');
function calcul() {
event.preventDefault();
const one = parseFloat(first.value) || 0;
const two = parseFloat(second.value) || 0;
console.log(one two);
}
res.addEventListener('click', calcul);
let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);<!DOCTYPE html>
</head>
<body>
<div id="warp">
<form>
<input id="first" type="number" />
<input id="second" type="number" />
<input id="res" type="submit" value="Envoyer"/>
</form>
<div>
</body>繼續做好作業，永遠不要停止提問！
uj5u.com熱心網友回復：
這將起作用。您只需要在 calcul() 函式本身中根據它們的 id 呼叫這些值。
let warp = document.getElementById('warp');
let res = document.getElementById('res');
let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);
function calcul() {
let first = document.getElementById('first').value;
let one = parseInt(first);
let second = document.getElementById('second').value;
let two = parseInt(second);
if(isNaN(one) || isNaN(two)){
event.preventDefault();
return
}
console.log(one two);
event.preventDefault();
}<!DOCTYPE html>
</head>
<body>
<div id="warp">
<form>
<input id="first" type="number">first number</input>
<input id="second" type="number">second number</input>
<input id="res" type="submit" value="Envoyer" onclick="calcul()" />
</form>
<div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/453372.html
標籤：javascript dom 前端
上一篇：進行遷移未檢測模型中的多對多欄位