似乎无法在javascript变量中存储HTML输入框信息_Javascript_Html

似乎无法在javascript变量中存储HTML输入框信息

javascript html

似乎无法在javascript变量中存储HTML输入框信息,javascript,html,Javascript,Html,我使用getElementByID获取用户输入到输入框中的数字，但当我尝试显示或使用所述数字时，它返回为[object HTMLInputElement] document.getElementById() 没有返回我所期望的 <input type="number" id="first_num"> 这是一个更新的小提琴，我想您希望它返回0 我不知道你为什么要var first\u number=document.getElementById（“first\u num”）.in

我使用

getElementByID

获取用户输入到输入框中的数字，但当我尝试显示或使用所述数字时，它返回为

[object HTMLInputElement]

document.getElementById()

没有返回我所期望的

<input type="number" id="first_num">

这是一个更新的小提琴，我想您希望它返回0

我不知道你为什么要

var first\u number=document.getElementById（“first\u num”）.innerHTML=first\u number

，但你只是抓住了这个值，并把它留在那里

var first_number = document.getElementById("first_num").value;
alert(first_number);

我还更新了HTML输入，将值从0开始

<input type="number" id="first_num" value="0">

试试这个HTML：

<body>
    <table>
        <tr>
            <td>
                First Number:<input type="number" id="first_num" value="0">
            </td>
            <td>
                <button type="button" id="calculate_button">Calculate</button>
            </td>
        </tr>
    </table>
</body>

我只想说清楚：

当您使用

document.getElementById（）

或任何其他类似的选择器时，您会得到一个DOM对象，它有很多属性和方法，而不仅仅是它的值。因此，您必须手动访问值属性。
代码中的情况如下：

var first_number; document.getElementById("first_num").innerHTML = first_num; first_number = first_num; // this is how JS resolves double assignment statements console.log(first_number);
现在，语句
document.getElementById（“first_num”）.innerHTML=first_num
完全不做任何事情，因为文本输入总是没有子节点的。这意味着
innerHTML
setter是不可操作的
但是为什么要定义
first_num
？您可能会遇到一个
未定义第一个\u num
错误。这是一个关于身份证的有趣的事情。无论何时定义元素id，该id都会引用元素本身（除非该名称的变量已经存在）
比如说

<div id="foo"></div> <script>alert(foo) // foo is now the div above</script>
现在，让我们将其插入到代码中

var first_number; document.getElementById("first_num").innerHTML = document.getElementById("first_num"); // no-op first_number = document.getElementById("first_num"); console.log(first_number);
你现在可以看到发生了什么

你真正想要的是

var first_number = document.getElementById("first_num").value; console.log(first_number);
对于按钮点击处理程序，将其包装在函数中

function handler() { var first_number = document.getElementById("first_num").value; console.log(first_number); }

确保每次单击时更新该值

您必须使用document.getElementbyId（）获取值。您希望值为0吗？是的，如果您试图通过单击该按钮获取值，这是有意义的。如果这是你的意图，你肯定需要一个事件监听器。@MichaelJosephAubry是的，我认为这是因为他说他试图在用户输入数字后使用这个值。。。添加了一个“计算”按钮，很明显：）。。。同样在Calculate按钮中，还有一个
console.log（）
callYeah我同意我只是想解决他的
问题，它返回为[object HTMLInputElement]
问题，这就是我所认为的问题。那么是事件侦听器让它重新检查输入的内容吗？还有，为什么要在函数中添加false？@Plentybinary如果希望在用户单击“计算”按钮时获取值，这就是为什么我要在该按钮上捕获
单击
事件（添加一个等待
单击
事件的侦听器）。第二个参数是处理该事件的函数。第三个参数设置事件的某种优先级。根据W3C，这是一个可选值，但如果不定义它，某些浏览器（如Safari）将无法工作。在大多数情况下，其值为false。没有必要为了你的特殊目的而玩它（反正我从来没有用过）。
first_num === document.getElementById("first_num")

var first_number; document.getElementById("first_num").innerHTML = document.getElementById("first_num"); // no-op first_number = document.getElementById("first_num"); console.log(first_number);

var first_number = document.getElementById("first_num").value; console.log(first_number);

function handler() { var first_number = document.getElementById("first_num").value; console.log(first_number); }

<button type="button" onclick="handler();">