仅当输入不为空时，才需要在JS中更改span的文本内容(现在，它一直在更新)

Question

const inputRef = document.querySelector('#name-input');
const textRef = document.querySelector('#name-output');
inputRef.addEventListener('input', event => {
if (event.target.value != '') {
textRef.textContent = event.target.value;
} else {
textRef.textContent;
}
});

仅当 span 不为空时才需要更改 span 的textContent值event.target.value。现在它正在不恰当地改变。

如果输入不为空，如何取回 span 的默认值。假设我有一个字符串"你好，访客" - 就在那里，"访客"是跨度。如果我没有传递任何内容来输入 - 我得到"你好，访客"。如果我通过了"Alex"，它会返回"Hello，Alex"，但我删除了所有内容 - 它将只是"Hello"，而不是"Hello，Visitor"。

Answer 1

你应该有一个保存默认值的变量。如果输入为空，则使用default值作为文本内容span

const inputRef = document.querySelector('#name-input');
const textRef = document.querySelector('#name-output');
let defaultValue = 'Visitor';
inputRef.addEventListener('input', event => {
if (event.target.value != '') {
textRef.textContent = event.target.value;
} else {
textRef.textContent = defaultValue;
}
});

<input id="name-input" />
<span>Hello, </span><span id="name-output">Visitor</span>