Получить значения переключателей и добавить в скрипт innerHTML
У меня есть форма с текстом, выпадающими списками и переключателями. У меня есть сценарий, который затем захватывает значения и отображает значения в поле текстовой области. Я могу получить значения для текста и раскрывающихся списков, но переключатели всегда возвращают либо неопределенную ошибку, либо ошибку списка узлов объекта. Вот пример кода того, что я делаю внутри тегов формы:
<form>
<input type = "text" id = "name" onChange = "mySummary();" />
<input type = "text" id = "phone" onChange = "mySummary();" />
<input type = "radio" name = "contact" value = "Spoke with" onChange = "mySummary();" />
<input type = "radio" name = "contact" value = "left voicemail" onChange = "mySummary();" />
<input type = "text" id = "moreinfo" onChange = "mySummary();" />
<textarea id = "Summary" rows = "10" cols = "30"></textarea>
</form>
Затем я вызываю данные в своем JavaScript следующим образом:
function mySummary() {
var a = document.getElementById("name").value;
var b = document.getElementById("phone").value;
var c = document.getElementsByName("contact").value;
var d = document.getElementById("moreinfo").value;
document.getElementById("Summary").innerHTML =
"Name: " + a + "\n" +
"Phone: " + b + "\n" +
"Contacted How: " + c + "\n" +
"Additional information" + d;
}
Когда я пытаюсь использовать вышеуказанное, я получаю неопределенное сообщение для параметров радио.
Как мне вытащить значения того, что было выбрано для переключателей, и что значение изменяется на новый выбор пользователем, также изменяется и вывод. Я искал, но не нашел того, который используется в innerHTML с другими идентификаторами
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете перебрать все переключатели в группе переключателей с именем contact и проверить, какой переключатель установлен. Затем установите значение этого переключателя в переменной c:
function mySummary() {
var a = document.getElementById("name").value;
var b = document.getElementById("phone").value;
var radioBtn = document.getElementsByName("contact");
var c;
for(i=0; i<radioBtn.length; i++){
if (radioBtn[i].checked){
c = radioBtn[i].value;
}
}
var d = document.getElementById("moreinfo").value;
document.getElementById("Summary").innerHTML =
"Name: " + a + "\n" +
"Phone: " + b + "\n" +
"Contacted How: " + c + "\n" +
"Additional information" + d;
}<form>
<input type = "text" id = "name" onChange = "mySummary();" />
<input type = "text" id = "phone" onChange = "mySummary();" />
<input type = "radio" name = "contact" value = "Spoke with" onChange = "mySummary();" />
<input type = "radio" name = "contact" value = "left voicemail" onChange = "mySummary();" />
<input type = "text" id = "moreinfo" onChange = "mySummary();" />
<textarea id = "Summary" rows = "10" cols = "30"></textarea>
</form>document.getElementsByName, как следует из названия, он возвращает несколько элементов в виде массива, поэтому значение 'c' в вашем коде будет массивом, однако поскольку радиокнопки обычно используются для выбора между двумя вариантами, и у вас также есть только 2 варианта среди радиокнопок, вы также можете иметь идентификатор для отдельных радиокнопок и получать ссылку на него с помощью getElementById и проверять его свойство "checked" на узнайте, выбран ли переключатель, или вы также можете зациклить.
@ Майкл рад помочь вам.