为什么js中的值函数不起作用

Question

首先我创建了一个输入元素，它将接受用户输入的文本...... <input style=" font-size: 12 px;" type="text" name="text" id="txt">

然后为此我使用了一些 javascript 来获取用户输入的文本的值，为此我编写了以下代码.... const text= document.querySelector('#txt').value console.log(text)

但是我没有得到任何类型的值实际上我只是在控制台中得到一个空的 null 值任何人都可以指出代码中的错误...

Answer 1

我建议您将您的输入包装到一个表单中。然后，当表单提交后，您将能够打印输入的文本内容。请检查这个 example 我在 codepen 上做的：

const onSubmit = (e) => {
 e.preventDefault();
 const text = document.querySelector("#txt").value;
 console.log(text);
};

const form = document.querySelector("form");
form.addEventListener("submit", onSubmit);

此外，如果您不想使用表单，则可以通过“更改”事件从输入文本更改时获取值。例如：

const onChange = (e) => {
 const text = e.target.value;
 console.log(text);
};

const input = document.querySelector("#txt");
input.addEventListener("change", onChange);

如果这个例子不能满足你想要达到的效果，请告诉我;）。

Answer 2

要读取用户键入的输入，您需要将事件侦听器添加到 jnput 元素或关联的提交按钮。

这段代码给出了一个简单的例子。当用户按下 enter:

时，它会执行你的 Javascript

const input = document.querySelector('#txt');

input.addEventListener('change', function() {
  console.log(input.value);
});

<input style=" font-size: 12 px;" type="text" name="text" id="txt">

Answer 3

您是否尝试过使用 html onkeyup/onchange 事件进行一些简单的操作？

var handlerFunction = function() {
const text = document.getElementById("txt").value;
console.log(text);
}

<input style=" font-size: 12 px;" type="text" name="text" id="txt" onkeyup="handlerFunction()">

为什么js中的值函数不起作用

Why the value function in js is not working

html

javascript

css

null

input