我可以在脚本中设置一个等于按钮值的变量吗，而不是更改变量以更改此按钮的名称

Question

我唯一想做的就是点击一个按钮，而不是按钮内的文本改变，实际上我这样做了:

<button id='todo-button' onclick='changeToDone()'>To Do</button>
<script>
function changeToDone() {
let toDone = document.getElementById('todo-button');
toDone.innerText = 'Done';
}

我的问题是我想这样改变函数:

function changeToDone() {
let toDone = document.getElementById('todo-button');
let text = toDone.innerText;
text = 'Done';

，但它不起作用。我刚开始学习js，所以我想知道是否有办法实现我的第二个代码和如何。

Answer 1

不完全是。在

let text = toDone.innerText;

当您引用.innerText时，将调用该元素的值getter，并返回该值。在此之后，将text变量重新赋值给其他字符串将不会做任何事情。

要像这样更改元素的文本，您需要

(1)调用.innerTextsetter

(2)具有要更改其文本的元素的this

那么，在执行

时

toDone.innerText = 'Done';

所有这些部分-toDone(this)，.innerText(属性的名称)和右侧的=(以便调用该属性的setter) -都是调用setter来更改文本的重要部分。

也就是说，可以将其抽象到函数后面，或者将对所有必要组件的引用保存在单个标识符后面，例如

const setText = text => toDone.innerText = text;
setText('Done');

但在合理的范围内，这是你所能做的。

Answer 2

这行不通。看看为什么可以推断出text的值。

function changeToDone() {
let toDone = document.getElementById('todo-button');
let text = toDone.innerText;
text = 'Done';

在第3行中，文本设置为toDone.innerText。toDone.innerText返回一个字符串值。text现在保存这个字符串值，而不是对innerText的引用。text是当前在innerText中的字符串，而不是innerText本身。

现在在第4行，text只是被分配了字符串'done'的值。没有对innerText的引用，所以没有什么可以改变。

要实际设置内部文本，您必须使用toDone.innerText的setter侧。因此，toDone.innerText = 'Done';是必要的。