Question

我是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>

Answer 1

单击按钮时需要获取表单值，如果在单击之前获取它们，则将获取它们的初始值。尝试这样的事情：

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>

Answer 2

Matheus Pitz很好地回答了您的第一个问题，变量在脚本的开头undefined处初始化。

关于第二个问题，浏览器如何理解发生了变化。该浏览器具有多种内置技术，可以协同工作以实现这一目的。

首先，您的HTML文档将由浏览器解析，并显示包含多个节点的Javascript模型。这称为DOM（文档对象模型）。

浏览器具有各种内置的JS函数，用于操作DOM并由此操作视图。例如：

document.getElementById("travelerInfo").innerHTML = 'test';

getElementById()是这种方法的示例，该方法使您可以访问DOM节点并对其执行各种操作。

希望这很有帮助，我强烈建议您阅读MDN article有关DOM的信息。这将增进您的理解，并使您成为更好的开发人员。

Answer 3

第一部分：

因为在输入事件之前就已经得到了值

将代码放入点击回调中。

第二部分

我不太了解“浏览器如何...”的意思。您只是从输入中获得了价值

SELECT DATE_DIFF(CURRENT_DATE,
                 MAX(tr_orderid) OVER (PARTITION BY domain_userid),
                 day
                ) AS recency_lastbooking
FROM df;

var destination = document.myTravelForm.destination;
var firstName = document.myTravelForm.firstname
document.getElementById("banana").addEventListener("click", function() {
 
    document.getElementById("travelerInfo").innerHTML = firstName.value + " you chose: " +  destination.value
});

选择表单的值-JavaScript

3 个答案: