javascript - 使用 javascript 更改单选按钮旁边的文本？

Question

我对 javascript 很陌生，即使在尝试在线查找所有内容之后，我也无法将单选按钮旁边的文本设置为我想要的内容。我确信这很简单，如果有人能帮助我，我会非常感激。

这是我的 radio 组的 HTML 元素

<form class="description" action ="">
  <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
  <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
  <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
  <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>

这是我试图运行来测试只是改变一个的Javascript

document.getElementById('answer0id').value = 'testing123';

我知道这可能是一个简单的修复，但我真的很感激任何可以帮助我的人。

Answer 1

该文本只是一个流氓文本节点，因为输入是自关闭的并且不能包含任何内部文本，但您可以使用诸如 nextSibling 之类的内容来定位输入后面的文本节点

document.getElementById('answer0id').nextSibling.textContent = ' testing123';

<form class="description" action ="">
  <input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
  <input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
  <input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
  <input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>

您还可以修改 HTML，将文本包装在跨度、标签或其他更容易选择的元素中。

document.querySelector('#answer0id ~ label').innerHTML = 'testing123';

<form class="description" action ="">
  <input type="radio" id="answer0id" name="answers" value="answer0" />
  <label for="answer0id">answer0</label>
  <br />
  <input type="radio" id="answer1id" name="answers" value="answer1" />
  <label for="answer1id">answer1</label>
  <br />
  <input type="radio" id="answer2id" name="answers" value="answer2" />
  <label for="answer2id">answer2</label>
  <br />
  <input type="radio" id="answer3id" name="answers" value="answer3" />
  <label for="answer3id">answer3</label>
</form>