需要在 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;
  }
});

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

如果输入不为空，如何取回跨度的默认值。假设我有一个字符串 "Hello, visitor" - 就在那里， 'visitor' 是跨度。如果我没有将任何东西传递给输入 - 我得到 "Hello, visitor"。如果我已经通过 "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>

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

Need to change a textcontent of span in JS Only if input is not empty (right now, it's updating all the time)

javascript

dom-events

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

Need to change a textcontent of span in JS Only if input is not empty (right now, it's updating all the time)

javascript

dom-events

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