Возникли проблемы с вводом и выводом его в файл HTML - PullRequest
Новая
       11

Возникли проблемы с вводом и выводом его в файл HTML

0 голосов
/ 26 января 2019

Попытка написать программу 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!» каждый раз.

Ответы [ 3 ]

0 голосов
/ 26 января 2019

Ваша функция не имеет доступа к переменной 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>
0 голосов
/ 27 января 2019

Ваш код имел 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>
0 голосов
/ 26 января 2019

Переместите его в саму функцию и добавьте «значение»: 

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