我正在研究一个基本的距离转换器，然后单击要提交的表单将继续重定向到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>
<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"> <!-- Changed the button type submit->button --> </form>