时间戳

首页 > 解决方案 > 获取输入并将其输出到 HTML 文件时出现问题

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

问题描述

尝试编写一个 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！” 每次。

标签： javascripthtmlbuttoninputoutput

解决方案

您的代码有 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>

推荐阅读