将 document.getElementById 存储在变量中？答案

【问题标题】：Storing document.getElementById in a variable?将 document.getElementById 存储在变量中？
【发布时间】：2017-11-29 10:42:14
【问题描述】：

我有这个脚本应该在单击按钮时更改按钮的文本。

<body>
   <button onclick="toggleText(this);" id="id">Edit</button>
</body>

function toggleText(element){
    var text = document.getElementById(element.id).textContent;

    if (text == 'Edit') {
        text = 'Done';
    } else {
        text = 'Edit';
    }
}

但它不起作用。仅当您将 document.getElementById(element.id).textContent 直接放入 if 语句时才有效。

如何让变量正确存储？

【问题讨论】：

你可以将getElementById的结果存储到一个变量中，但是它上面的属性不是通过引用传递的，所以你不能这样做...var y = document.getElementById(element.id); y.textContent = "done";
为什么不只是text = element.textContent？
我明白你在说什么 tymeJV。不敢相信我没想到大卫。
“但它不起作用。” JavaScript 是传递/分配按值。为变量分配新值不会更改另一个变量或属性的值（例外：全局和with 范围）。
知道了。我已经习惯了 Lua，它确实可以这样工作。

标签： javascript html document getelementbyid

【解决方案1】：

由于您已经获得了该元素，因此您无需再次获得它。你可以只使用元素。

但是你不能改变它的原因是你只是改变了包含文本的变量。它不指向元素的属性。你需要使用这个：

function toggleText(element){
  var text = element.textContent;

  if (text == 'Edit') {
    element.textContent = 'Done';
  } else {
    element.textContent = 'Edit';
  }
}

【讨论】：

【解决方案2】：

当您访问document.getElementById(element.id).textContent 时，您会得到它的价值，而不是参考。因此对其进行更改不会影响元素。

但是当您将元素分配给变量时，它会引用它。

var element = document.getElementById(element.id);
if (element.textContent == 'Edit') {
        element.textContent = 'Done';
    } else {
        element.textContent = 'Edit';
}

【讨论】：

var element = document.getElementById(element.id); 不是必需的。
我知道他基本上有元素作为参数。但他想知道为什么他的代码不起作用。所以我认为这是更好的解释。
任何重复冗余的答案都是有问题的答案，就教学而言；请注意，我并不是说你错了，只是你需要更进一步才能得到好的答案。

【解决方案3】：

只需使用：

index.js

var mainText = document.getElementById("mainText").value;
document.write(mainText);

index.html

<textarea id="mainText"></textarea>

【讨论】：

【解决方案4】：

正如 tymeJV 所评论的，您可以通过引用存储您通过 id 获得的元素。它的属性是按值存储的。而是将元素存储在变量中并从变量中访问其属性。

var text = document.getElementById(element.id);

if (text.textContent == 'Edit') {
     text.textContent = 'Done';
} else {
    text.textContent = 'Edit';
}

【讨论】：

【解决方案5】：

jquery 是一个选项吗？

我曾经做过类似的事情：

var a = $('#theid');
A.something

【讨论】：

我的意思是，在 DRY 原则逻辑中，您要编写代码使其工作的东西已经编码在 jquery 的核心中
既然事件已经为他们提供了元素，他们为什么要向大型库添加依赖项并使用它？
因为重新编码车轮从来都不是一个好的选择。因为如今，在前端世界中，大小不再是同一个问题。因为 Jqlite 存在。