Question

试图编写一个以用户名作为输入并输出“ Hello，[Name]！”的JS / HTML程序。当您单击他的按钮时。

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Greeter</title>
</head>

<body>
    <script src="app.js"></script>

    <input id = "txtName" placeholder="Your Name"/>
    <button onclick="sayHello()"> Say Hello </button>
</body>
</html>

JS：

let txtName = document.querySelector('#txtName');
//let name = "lauren";

function sayHello() {
    document.write("Hello, " + txtName + "!");
}

当我尝试运行它时，它输出“ Hello，null！”每次。

Answer 1

将其移动到函数本身并添加“值”：

function sayHello() {
  let txtName = document.querySelector('#txtName').value;
  document.write("Hello, " + txtName + "!");
}

Answer 2

您的函数无法访问 txtName 变量。您应该将其移入函数中。您也可以使用getElementById代替查询选择器。既然在那里，为什么不完全删除变量：

      function sayHello() {
   document.write("Hello, " + document.getElementById('txtName').value + "!");
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Greeter</title>
</head>

<body>
    <script src="app.js"></script>

    <input id = "txtName" placeholder="Your Name"/>
    <button onclick="sayHello()"> Say Hello </button>
</body>
</html>

Answer 3

您的代码有2个问题。一个是scope，另一个是value。

let txtName

由于variable是使用let启动的，因此它的scope是受限制的，而不是global。使用var使其具有全局性，因此它也可以在functions内部进行访问。

 let txtName = document.querySelector('#txtName');

此代码行在页面加载后立即运行。因此，将在页面加载时为其分配输入对象（而不是值）。为了打印名称，尽管我们需要该对象的值（第二个点），而不是整个对象本身。我们使用.value访问其值。

 var txtName = document.querySelector('#txtName').value;

在被调用函数中定义此行，否则它将获得null值，因为它将在页面加载后立即运行，并且将分配null值，因为那里没有input在输入框中。

function sayHello() {
var txtName = document.querySelector('#txtName').value;
    document.write("Hello, " + txtName + "!");
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Greeter</title>
</head>

<body>
    <script src="app.js"></script>

    <input id = "txtName" placeholder="Your Name"/>
    <button onclick="sayHello()"> Say Hello </button>
</body>
</html>

输入和输出到HTML文件时遇到问题

3 个答案: