将`input`的值分配给变量但在JS中返回空白

Posted 2023-02-21

【中文标题】将`input`的值分配给变量但在JS中返回空白

【英文标题】：assign the value of `input ` to a variable but return blank in JS

【发布时间】：2022-01-14 20:16:54

【问题描述】：

我想将input 的值赋给javascript 中的一个变量，但我不知道为什么input 的值总是空白。

这是一个例子：

let input = document.getElementById('input').value
let val = 'not'

function check() 
  //console.log(document.getElementById('input').value) will work
  console.log(typeof input)
  console.log(input)

<input id='input' type='text'>
<button onclick='check()'>Check</button>

input 值为空白（无），但typeof input 为string。

如果我使用document.getElementById('input').value，这将完全有效，它将成功显示input 的值。

谁能解释一下为什么我将它分配给variable 不起作用？

感谢您的回复！

【问题讨论】：

您是在页面首次加载时分配变量，而不是在用户单击按钮之后。

把赋值放到check函数中就可以了。

@Barmar，哦，现在可以了。谢谢

【参考方案1】：

变量赋值val = 'not' 发生在第一次页面加载时。当您需要分配动态值时，例如单击按钮时，您需要一个事件处理机制（在您的情况下，是一个 click 事件）。单击时您正在调用一个函数，但没有为您的变量分配任何值。在函数内部进行赋值，如：

function check() 
  val = document.getElementById('input').value
  console.log(val)