时间戳

首页 > 解决方案 > Javascript代码函数

javascript - Javascript代码函数

问题描述

我有这个 Javascript 代码

var button = document.querySelector("#write");
button.addEventListener("click", write);
var field = document.querySelector("#field").value;

function write() {
  alert(field);
}
<meta name="viewport" content="width=device-width">
<input type="text" name="field" id="field">
<button type="button" id="write">Write</button>
<div id="result"></div>

为什么这段代码什么都不显示？如果我更改此代码

var button = document.querySelector("#write");
button.addEventListener("click",write);
var field = document.querySelector("#field");
function write(){
  alert(field.value);
}

现在字符串显示在屏幕上

标签： javascripthtml

解决方案

这是因为在第一个代码片段中

var field = document.querySelector("#field").value; // (1)
function write(){
  alert(field);
}

您在(1)调用之前获得了价值，write这将不包含任何内容或只是未定义。在第二个片段上：

var field = document.querySelector("#field"); // (1)
function write(){
  alert(field.value);
}

您只需field先显式引用 on (1)，然后在调用write().

推荐阅读