时间戳

首页 > 解决方案 > JS document.getElementById.value 无法正常工作

javascript - JS document.getElementById.value 无法正常工作

问题描述

// 这不是在控制台中打印任何值（空白）——代码 1

const addMovieBtn = document.getElementById("add-movie-btn");
const title = document.getElementById("title").value;
addMovieBtn.addEventListener("click", () => {
  console.log(title);
});
<label for="title">Favorite Movie</label>
<input type="text" id="title" />
<button id="add-movie-btn">Add Movie</button>

//这工作正常——代码2

const addMovieBtn = document.getElementById("add-movie-btn");
var title = document.getElementById("title");
addMovieBtn.addEventListener("click", () => {
  console.log(title.value);
});
<label for="title">Favorite Movie</label>
<input type="text" id="title" />
<button id="add-movie-btn">Add Movie</button>

我在这里想念什么？第一个代码（代码 1）应该也能正常工作，对吧？

请指教。谢谢你。

注意：我使用的是最新版本的 VS Code Editor、Chrome 和 Windows 10

标签： javascript

解决方案

在您的第一个片段中，您title在加载 js 时进行初始化，此时输入为空。

为了实现您的目标，您需要在单击按钮时获得价值。

const addMovieBtn = document.getElementById("add-movie-btn");
let title = document.getElementById("title").value;
addMovieBtn.addEventListener("click", () => {
  title = document.getElementById("title").value;
  console.log(title);
});
<label for="title">Favorite Movie</label>
<input type="text" id="title" />
<button id="add-movie-btn">Add Movie</button>

您的第二个片段正在呈现其他内容。您保存到对输入元素title的引用。此引用保存输入的，并且此值根据当前输入而变化，但由于这不是引用而是值（字符串），因此您无法将其保存到变量并访问它并期望它更新。valuevalue

推荐阅读