我正試圖讓這個計算器在我的網站上作業。但是在我在欄位中輸入數字并點擊“計算”按鈕后，答案并沒有填充。我是 javascript 新手，我覺得答案很簡單，但我看不到。請幫忙
<HTML>
<head>
<script language="javascript" type="text/javascript">
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("totalsqft").innerHTML = num1 * num2;
}
</script>
</head>
<body>
<form>
Length (ft): <input id="firstNumber" type="text" />
Width (ft): <input id="secondNumber" type="text" />
<input type="button" value="Calculate" />
</form>
Total Square Feet:
<span id="totalsqft"></span>
</body>
</html>
uj5u.com熱心網友回復：
你從來沒有真正呼叫過這個函式。將其作為單擊處理程式添加到按鈕。（并洗掉表格，因為您不想在此處實際發布表格。）
例如：
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("totalsqft").innerHTML = num1 * num2;
}Length (ft): <input id="firstNumber" type="text" />
Width (ft): <input id="secondNumber" type="text" />
<input type="button" value="Calculate" onClick="multiplyBy()" />
Total Square Feet:
<span id="totalsqft"></span>您還可以通過從邏輯中添加點擊處理程式而不是onClick在標記中使用來更有效地將邏輯 (JavaScript) 與標記 (HTML) 分開。也將 JavaScript 代碼移動到頁面末尾，因此添加點擊處理程式的操作會找到該元素。（在頁面頂部找不到它，因為在執行該代碼時它還不存在。）
例如：
Length (ft): <input id="firstNumber" type="text" />
Width (ft): <input id="secondNumber" type="text" />
<input type="button" value="Calculate" />
Total Square Feet:
<span id="totalsqft"></span>
<script language="javascript" type="text/javascript">
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("totalsqft").innerHTML = num1 * num2;
}
document.querySelector('input[type="button"]').addEventListener('click', multiplyBy);
</script>uj5u.com熱心網友回復：
在您的計算按鈕上放置一個 id 并添加此事件監聽器：
document.getElementById("calc").addEventListener("click", multiplyBy);
document.getElementById("calc").addEventListener("click", multiplyBy);<html>
<head>
<script language="javascript" type="text/javascript">
function multiplyBy() {
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("totalsqft").innerHTML = num1 * num2;
}
</script>
</head>
<body>
<form>
Length (ft): <input id="firstNumber" type="text" /> Width (ft): <input id="secondNumber" type="text" />
<input id = 'calc' type="button" value="Calculate" />
</form>
Total Square Feet:
<span id="totalsqft"></span>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/479006.html
標籤：javascript html 网络 计算器 乘法
上一篇：根據用戶選擇更改漸變顏色