获取输入并将其输出到 HTML 文件时出现问题答案

【问题标题】：Having problem taking input and outputting it into an HTML file获取输入并将其输出到 HTML 文件时出现问题
【发布时间】：2019-01-26 20:22:33
【问题描述】：

尝试编写一个 JS/HTML 程序，将用户名作为输入并输出“Hello，[Name]！”当你点击他按钮时。

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！”每次。

【问题讨论】：

您在创建脚本所针对的元素之前运行脚本。尝试将其移动到文档的末尾，在结束正文标记之前。另外，你需要得到输入的value，所以txtName.value不是txtName
function sayHello() { document.write("Hello, " + txtName.value + "!"); }

标签： javascript html button input output

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：