Стиль TextNode

Question

Стиль TextNode

Я делаю простую программу с множественным выбором с помощью переключателей. Когда студент получает неправильный ответ, я могу поставить Х после ее выбора, но как мне сделать Х красным? Спасибо за любую помощь, Джерард

<body> 

<input type="radio" name="Q1" value="1756-1819,Berlioz" 
             onclick = "radioProcessor(this)" />      &nbsp; 1756-1819

<script>
function radioProcessor(theRadio){
        theRadio.nextSibling.nodeValue = theRadio.nextSibling.nodeValue + " X";
}
</script>

</body>

1

javascript dom textnode

Источник

user4276284 15 июл '15 в 19:41

2 ответа

Другие вопросы по тегам javascript dom textnode

user4276284 15 июл '15 в 20:22 2015-07-15 20:22 · Answer 1 · 2015-07-15 20:22

Скажи спасибо Андре, но это не сработало. Я думаю, потому что TextNode содержит текст, а не другие элементы (например, span). Однако благодаря вашей идее это возможно -

<input type="radio" name="Q1" value="1756-1819,Berlioz" 
             onclick = "radioProcessor(this)" /> <span>&nbsp; 1756-1819</span>

<script>
function radioProcessor(theRadio){
        console.log(theRadio.nextElementSibling); // prints [object Text]
        theRadio.nextElementSibling.setAttribute("style","color:red");
        theRadio.nextElementSibling.innerHTML = 
                          theRadio.nextElementSibling.innerHTML + " X";
}

Это ближе, но я бы хотел, чтобы только "X" было красным:-) Он также продолжает добавлять X каждый раз, когда нажимается радиокнопка!

user1248224 15 июл '15 в 21:13 2015-07-15 21:13 · Answer 2 · 2015-07-15 21:13

Этот код работает для меня. Даже при двойном нажатии на кнопку радио.

<input type="radio" name="Q1" value="1756-1819,Berlioz"
             onclick = "radioProcessor(this)" />     <span id="value"> &nbsp; 1756-1819</span>

<script>
function radioProcessor(theRadio){
  var xAdded = document.getElementsByClassName("incorrect").length;
  if(!xAdded) {
    var result = document.createElement('span');
    result.setAttribute("class", "incorrect");
    result.innerHTML = theRadio.nextSibling.nodeValue + " X";
    var value = document.getElementById("value");
    value.parentNode.insertBefore(result, value.nextSibling);
  }


}
</script>