在HTML表單中添加JavaScript計算功能
[英]Adding JavaScript calculation function to HTML form
問題描述
我正在嘗試在外部JavaScript中鏈接基本計算。該表單非常簡單，該函數只是檢查以確保步數是偶數。 我已經多次檢查代碼，但是當我輸入數字並點擊提交時，什么也沒有發生。 有什么建議么？ 看來我只是沒有正確鏈接功能和輸入元素。 這是代碼：
function evenNumbers() { var evenNumberBtn = document.querySelector("button"); evenNumberBtn.addEventListener("click", evenNumbers); var startNumber = parseInt(document.getElementById("startNumber").value); var endNumber = parseInt(document.getElementById("endNumber").value); var stepNumber = parseInt(document.getElementById("stepNumber").value); while (startNumber + stepNumber <= endNumber) { if (startNumber <= endNumber){ if (startNumber % 2 === 0 && stepNumber % 2 === 0) { startNumber += stepNumber; alert(startNumber); } else if (startNumber % 2 !== 0 && stepNumber % 2 === 0) { startNumber += 1 + (stepNumber); alert(startNumber); } else { alert("Please enter a positive number for the step value."); } } else { alert("Please enter an ending number greater than the start number."); } } }
<!DOCTYPE html> <html> <head> <title>HTML5, CSS3 and JavaScript demo</title> </head> <body> <form> <label>Start: </label> <input type="number" id="startNumber"/><br/> <label>End: </label> <input type="number" id="endNumber"/><br/> <label>Step by:</label> <input type="number" id="stepNumber"/><br/> <button onclick="evenNumbers();">Submit</button> <p></p> </form> <!-- End your code here --> </body> </html>
4 個解決方案
解決方案1
1 2017-05-26 22:21:38
試試這個：在.js文件中
var evenNumberBtn = document.querySelector("button");
evenNumberBtn.addEventListener("click", evenNumbers);
解決方案2
0 2017-05-26 22:27:39
我現在已經刪除了您的實際代碼，因為它存在一些問題，您可能會陷入無限循環（我確實這樣做了，這使Chrome crash崩潰了）。
您的問題出在您的HTML中
之前
<button onclick("evenNumbers();")>Submit</button>
后
<button onclick="evenNumbers();">Submit</button>
function evenNumbers() { var startNumber = parseInt(document.getElementById("startNumber").value); var endNumber = parseInt(document.getElementById("endNumber").value); var stepNumber = parseInt(document.getElementById("stepNumber").value); alert(startNumber + ',' + endNumber + ',' + stepNumber); }
<!DOCTYPE html> <html> <head> <title>HTML5, CSS3 and JavaScript demo</title> </head> <body> <form> <label>Start: </label> <input type="text" id="startNumber"/><br/> <label>End: </label> <input type="text" id="endNumber"/><br/> <label>Step by:</label> <input type="text" id="stepNumber"/><br/> <button onclick="evenNumbers();">Submit</button> <p></p> </form> <!-- End your code here --> </body> </html>
解決方案3
0 2017-05-26 22:30:54
function evenNumbers() { //var evenNumberBtn = document.querySelector("button"); //evenNumberBtn.addEventListener("click", evenNumbers); var startNumber = parseInt(document.getElementById("startNumber").value); var endNumber = parseInt(document.getElementById("endNumber").value); var stepNumber = parseInt(document.getElementById("stepNumber").value); while (startNumber + stepNumber <= endNumber) { if (startNumber <= endNumber){ if (startNumber % 2 === 0 && stepNumber % 2 === 0) { startNumber += stepNumber; alert(startNumber); } else if (startNumber % 2 !== 0 && stepNumber % 2 === 0) { startNumber += 1 + (stepNumber); alert(startNumber); } else { alert("Please enter a positive number for the step value."); } } else { alert("Please enter an ending number greater than the start number."); } } }
<!DOCTYPE html> <html> <head> <title>HTML5, CSS3 and JavaScript demo</title> </head> <body> <form> <label>Start: </label> <input type="text" id="startNumber"/><br/> <label>End: </label> <input type="text" id="endNumber"/><br/> <label>Step by:</label> <input type="text" id="stepNumber"/><br/> <button onclick="evenNumbers()">Submit</button> <p></p> </form> <!-- End your code here --> </body> </html>
解決方案4
0 2017-05-26 22:43:44
evenNumber函數內部的前兩行必須在函數外部，否則您的代碼永遠不會到達該塊內部。
$( document ).ready(function() {
var evenNumberBtn = document.querySelector("button");
evenNumberBtn.addEventListener("click", evenNumbers);
function evenNumbers() {
/*
your code here
*/
}
});
同樣，evenNumbers內部的邏輯似乎是錯誤的。 您可能也需要更改它。
將表單添加到我的 HTML 會使 Javascript 文件中的 Function 無法正常工作
[英]Adding a Form into My HTML Keeps Function in Javascript File from Working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.