Question

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

这是我的广播组的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 <的目标来定位输入后的文本节点/ p>

＆＃13;

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

＆＃13;

<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>

＆＃13;

您还可以修改HTML以将文本包装在span，label或其他更容易选择的元素中。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我相信label正是您所寻找的。

注意：输入不具有innerHTML / textContent属性，因为它是非结束标记。这就是为什么HTML的发明者想出了标签的原因。还有什么 - 您甚至可以通过单击相应的文本来检查单选按钮。

＆＃13;

let elem = document.querySelector('label[for="answer0id"]');

elem.textContent = 'testing123';

＆＃13;

<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>

＆＃13;

Answer 3

document.getElementById('answer0id'). 值 = 'testing123';是指<input type="radio" id="answer0id" name="answers" 值=＆＃34; answer0＆＃34; > answer0<br> 。因此，它不会改变文本。

在您的情况下，您可以通过.nextSibling.textContent选择文字（见下文）。另一种方法是将文本包装在一个额外的元素中，比如说<span id="answer0-label">answer0</span>并直接选择那个。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: