将 document.getElementById 存储在变量中？

Question

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

<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 语句时才有效。

如何让变量正确存储？

Answer 1

jquery 是一个选项吗？

我曾经做过这样的事情：

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

Answer 2

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

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

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

Answer 3

既然您已经获取了该元素，则无需再次获取。你可以只使用 element.

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

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

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

Answer 4

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

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

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

Answer 5

只需使用：

index.js

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

index.html

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

将 document.getElementById 存储在变量中？

Storing document.getElementById in a variable?

javascript

html

document

getelementbyid

index.js

index.html