我是 JavaScript 的新手，我想了解代码的工作原理。
在我的表单中，我有两个输入:
名字:必须由用户填写
国家:必须由用户选择(但国家已经存在)
一旦用户点击“添加这个目的地”按钮，它应该会出现他的名字加上他选择的目的地。 我明白为什么会出现“目的地”。 但是，如果表单为空，我不明白如何传递名字。即使我在“名字”中写了一些东西，它的值也不会传递到我要显示的结果字符串中。
我的问题有两个:
1) 为什么我的代码不起作用？
2) 更重要:浏览器(？)如何理解“名字”字段从空到填充名称/字符串的变化？
var x;
var destination = document.myTravelForm.destination.value;
var firstName = document.myTravelForm.firstname.value;
x = document.getElementById("banana").addEventListener("click", function() {
document.getElementById("travelerInfo").innerHTML = firstName + " you chose: " + destination<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Welcone to the booking site </h1>
<h4> Please, choose a destination </h4>
<form name="myTravelForm">
<label> First name: </label><br>
<input type="text" name="firstname" id="firstname" /><br>
<br>
<select name="destination">
<option value="Antarctica" selected>Antarctica</option>
<option value="Costa Rica">Costa Rica</option>
</select>
<input type="button" value="Add this destination" id="banana" />
</form>
<div id="travelerInfo"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>最佳答案
你需要在点击按钮时获取表单值，如果你在点击之前获取它们，你将获得它们的初始值。尝试这样的事情:
var x;
x = document.getElementById("banana").addEventListener("click", function() {
var destination = document.myTravelForm.destination.value;
var firstName = document.myTravelForm.firstname.value;
document.getElementById("travelerInfo").innerHTML = firstName + " you chose: " + destination;
});<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Welcone to the booking site </h1>
<h4> Please, choose a destination </h4>
<form name="myTravelForm">
<label> First name: </label><br>
<input type="text" name="firstname" id="firstname" /><br>
<br>
<select name="destination">
<option value="Antarctica" selected>Antarctica</option>
<option value="Costa Rica">Costa Rica</option>
</select>
<input type="button" value="Add this destination" id="banana" />
</form>
<div id="travelerInfo"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>关于javascript - 选择表单的值 - JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51061092/