Question

我知道这个问题听起来很愚蠢，但是我很好奇为什么我可以在JavaScript中避免这个问题。现在在下面的代码中，我给出了：

var btn=document.getElementById("btn");

btn.onclick = function get() {
  var x = document.getElementById("text").value; // --> HERE 
  document.getElementById("para").innerHTML = x;
};

get();

<input type="text" id="text" value="">
<input type="submit" value="submit" id="btn">

<p id="para"></p>

现在，当我在函数内分配变量x时，在（“文本”）之后，我将获得.nodeValue而不是.value。这是我的代码编辑器出现问题还是我遇到了错误，因为每次我在输入字段中输入名称时，它都会在该段落内显示结果，并且该段落也会很快消失

Answer 1

所以我在这里看到2个问题：

您没有关闭脚本标签。
您正在调用get（）;但该功能在该范围中不存在，而仅在onclick事件中分配。

这应该可以解决问题：

var btn=document.getElementById("btn");

btn.onclick = function get() {
  var x = document.getElementById("text").value;
  document.getElementById("para").innerHTML = x;
};

<input type="text" id="text" value="HELLO">
<input type="submit" value="submit" id="btn">

<p id="para"></p>

我已经将值预设为“ HELLO”，但是您可以根据需要进行更改，并且单击按钮时它将提供所需的值。

Answer 2

我认为您唯一的问题可能是您如何声明事件侦听器，我将其声明为侦听“ click”事件的按钮上的事件侦听器。

我也将'x'编辑为'userInput'，这样可以更清楚地了解它要实现的目标。

var btn = document.getElementById("btn");

btn.addEventListener('click', function () {
    var userInput = document.getElementById("text").value;
    document.getElementById("para").innerHTML = userInput;
});

Answer 3

var btn=document.getElementById("btn");

btn.onclick = function () {
  var x = document.getElementById("text").value; // --> HERE 
  document.getElementById("para").innerHTML = x;
};

btn.onclick()

<input type="text" id="text" value="hello">
<input type="submit" value="submit" id="btn">

<p id="para"></p>

这是您要尝试执行的工作示例。您不能在该上下文中声明函数，因为它是匿名的。我的示例效果很好，但是您应该做更多类似的事情

function get() { 
//Do something
}
btn.onclick = get;
get();

Answer 4

我不确定这是否可以解决。但是，我建议您在输入标签内添加一个onclick事件。

    <input type="submit" value="submit" id="btn" onclick="get()"> 
    <script>
    function get() {
    var x = document.getElementById("text").value; 
    document.getElementById("para").innerHTML = x;
    }
    </script>`

无法从输入字段获取用户输入并将其分配给另一个div的innerHTML

4 个答案: