将 document.getElementById 存储在变量中?
Storing document.getElementById in a variable?
我有这个脚本应该在单击按钮时更改按钮的文本。
<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 语句时才有效。
如何让变量正确存储?
jquery 是一个选项吗?
我曾经做过这样的事情:
var a = $('#theid');
A.something
当您访问 document.getElementById(element.id).textContent
时,您得到的是它的值,而不是引用。因此对其进行更改不会影响元素。
但是当您将元素分配给变量时,它会引用它。
var element = document.getElementById(element.id);
if (element.textContent == 'Edit') {
element.textContent = 'Done';
} else {
element.textContent = 'Edit';
}
既然您已经获取了该元素,则无需再次获取。你可以只使用 element.
但是您不能更改它的原因是您只是在更改包含文本的变量。它不指向元素的属性。你需要使用这个:
function toggleText(element){
var text = element.textContent;
if (text == 'Edit') {
element.textContent = 'Done';
} else {
element.textContent = 'Edit';
}
}
正如 tymeJV 评论的那样,您可以通过引用存储通过 id 获得的元素。它的 属性 是按值存储的。而是将元素存储在变量中并从变量访问其 属性。
var text = document.getElementById(element.id);
if (text.textContent == 'Edit') {
text.textContent = 'Done';
} else {
text.textContent = 'Edit';
}
只需使用:
index.js
var mainText = document.getElementById("mainText").value;
document.write(mainText);
index.html
<textarea id="mainText"></textarea>
我有这个脚本应该在单击按钮时更改按钮的文本。
<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 语句时才有效。
如何让变量正确存储?
jquery 是一个选项吗?
我曾经做过这样的事情:
var a = $('#theid');
A.something
当您访问 document.getElementById(element.id).textContent
时,您得到的是它的值,而不是引用。因此对其进行更改不会影响元素。
但是当您将元素分配给变量时,它会引用它。
var element = document.getElementById(element.id);
if (element.textContent == 'Edit') {
element.textContent = 'Done';
} else {
element.textContent = 'Edit';
}
既然您已经获取了该元素,则无需再次获取。你可以只使用 element.
但是您不能更改它的原因是您只是在更改包含文本的变量。它不指向元素的属性。你需要使用这个:
function toggleText(element){
var text = element.textContent;
if (text == 'Edit') {
element.textContent = 'Done';
} else {
element.textContent = 'Edit';
}
}
正如 tymeJV 评论的那样,您可以通过引用存储通过 id 获得的元素。它的 属性 是按值存储的。而是将元素存储在变量中并从变量访问其 属性。
var text = document.getElementById(element.id);
if (text.textContent == 'Edit') {
text.textContent = 'Done';
} else {
text.textContent = 'Edit';
}
只需使用:
index.js
var mainText = document.getElementById("mainText").value;
document.write(mainText);
index.html
<textarea id="mainText"></textarea>