我正在開發一個基本的距離轉換器并單擊要提交的表單不斷重定向到 somephpfile.php （因為這是一個練習，所以不存在）而不是將轉換后的數字以公里（mi > km）發布到 div “集裝箱底部?！?這是我到目前為止所得到的，任何幫助將不勝感激：<!doctype html><html><head> <meta charset="UTF-8"> <title>Miles to Kilometers Converter</title> <!--/ /-------- Normalize CSS --------/ /--> <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"> <!--/ /-------- Google Fonts --------/ /--> <link href="https://fonts.googleapis.com/css?family=Oswald|PT+Sans&display=swap" rel="stylesheet"> <!--/ /-------- My Styles --------/ /--> <link href="styles.css" rel="stylesheet"></head><body> <h1>Miles to Kilometers Converter</h1> <div class="container top"> <p>Type in a number of miles and click the button to convert the distance to kilometers.</p> <form method="post" action="somephpfile.php" id="convert"> <input type="number" name="distance" id="distance" placeholder="distance"> <input type="submit" name="convertdist" value="Convert Distance"> </form> </div> <div class="container bottom" id="answer"> <h2 class="invisible">Answer goes here</h2> </div> <script> var miles = parseInt(document.getElementById("distance").value); var kilometers = (miles * 1.609344); var answer = document.createElement("P"); answer.innerHTML = `"${miles} miles converts to ${kilometers} kilometers"`; document.getElementsByName("convertdist").addEventListener("click", function(event){ event.preventDefault(); document.getElementById("answer").appendChild(); }); </script></body></html>
1 回答
UYOU
TA貢獻1878條經驗 獲得超4個贊
<form method="post" action="somephpfile.php" id="convert">
<input type="number" name="distance" id="distance" placeholder="distance">
<input type="submit" name="convertdist" value="Convert Distance">
</form>
當您單擊提交按鈕時，該表單將被提交。制作如下表格。
<form id="convert"> <!-- Taken out the attributes method and action -->
<input type="number" name="distance" id="distance" placeholder="distance">
<input type="button" name="convertdist" value="Convert Distance" onclick="convert()"> <!-- Changed the button type submit->button -->
</form>
對于 JavaScript，您必須將 JS 邏輯封裝在一個函數中，并onclick在提交按鈕期間調用它，例如：
<script>
function convert(){
var miles = parseInt(document.getElementById("distance").value);
var kilometers = (miles * 1.609344);
var answer = document.createElement("P");
answer.innerHTML = `"${miles} miles converts to ${kilometers} kilometers"`;
document.getElementById("answer").appendChild(answer);
}
</script>
你做錯的事情是：
轉換+附加答案應該是可調用的，這意味著它應該是一個函數。
每當單擊按鈕時都應調用轉換函數。因此，它應該綁定到
onclick轉換按鈕的事件。無論如何，任何帶有按鈕類型的 HTML 表單
submit都將提交到屬性指定的目標，除非您在 JS 中阻止它。你做到了，但不是在應該做的地方。actionevent.preventDefault()您的代碼中的以下內容從您放置的位置沒有意義。
document.getElementsByName("convertdist").addEventListener("click", function(event){
event.preventDefault();
document.getElementById("answer").appendChild();
});
將工作版本放在這個 fiddle中。找時間退房。
- 1 回答
- 0 關注
- 100 瀏覽
添加回答
舉報
0/150
提交
取消