我正在开发一个基本的距离转换器并单击要提交的表单不断重定向到 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 关注
- 83 浏览
添加回答
举报
0/150
提交
取消