Как получить значения из множества input на странице средствами javascript? [дубликат]

204
09 июня 2018, 18:40

Данный вопрос уже был задан и имеет решение:

  • не работает веб страница [закрыт]

var voprosy = [{ 
    "vopros": 'Столица Туркменистана?', 
    "otvety": [ 
      'Ащхабад', 
      'Мары', 
      'Дашогуз', 
    ], 
    "otvet": [0] 
  }, 
  { 
    "vopros": 'Столица Италии?', 
    "otvety": [ 
      'Милан', 
      'Ватикан', 
      'Рим', 
    ], 
    "otvet": [3] 
  }, 
  { 
    "vopros": 'Столица России?', 
    "otvety": [ 
      'Москва', 
      'Санкт-Петербург', 
      'Тула', 
    ], 
    "otvet": [0] 
  } 
]; 
 
window.onload = draw(); 
 
function draw() { 
  var questionBlock = ''; 
  var vopr = document.querySelector('.vopr'); 
  for (var i = 0; i < voprosy.length; i++) { 
    var qwest = voprosy[i].vopros; 
    questionBlock += '<div class="col-md-6 text-center"><h3>'; 
    questionBlock += qwest; 
    questionBlock += '</h3>'; 
 
    for (var j = 0; j < voprosy[i].otvety.length; j++) { 
      questionBlock += '<input type="radio" name ="answer_' + i + '" value="' + j + '" />' + voprosy[i].otvety[j] + '<br />'; 
    } 
 
    questionBlock += '</div>'; 
 
  } 
  document.getElementById("question").innerHTML = questionBlock; 
} 
 
function ok() { 
  if (answer_0 == 0 && answer_1 == 2 && answer_2 == 1) { 
    alert(name + '' + number + '<h2>Поздравляем вы прошли тест на 100</h2>'); 
  } 
}
<div class="conteiner"> 
  <div class="col-md-12"> 
    <h2 class="text-center col-md-offset-3 col-md-7">Экзаменационный тест</h2> 
    <div class="col-md-3 input-group input-group-lg"> 
      <span class="input-group-addon"> 
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
      </span> 
      <input type="txt" class="form-control" id="names" placeholder="Введите Имя"> 
    </div> 
    <br> 
    <div class="col-md-3 input-group input-group-lg"> 
      <span class="input-group-addon"> 
                                <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> 
      </span> 
      <input type="number" class="form-control" id="stud" placeholder="Введите Номер"> 
    </div> 
  </div> 
</div> 
 
 
<div class="row" id="question"></div> 
<input type="button" onclick="ok();" value="Результат" style="margin:5% ">

При открытии страницы каждому вопросу присваивается answer_0(1 вопросу) и value=0 первому ответу и тд. хотел сделать через if, но он не определяет answer

js.js:59 Uncaught ReferenceError: answer_0 is not defined at ok (js.js:59)

Answer 1

В скрипте нужно достать значения из элементов, просто так он о них никаким волшебным образом узнать не может!

var voprosy = [{ 
    "vopros": 'Столица Туркменистана?', 
    "otvety": [ 
      'Ащхабад', 
      'Мары', 
      'Дашогуз', 
    ], 
    "otvet": [0] 
  }, 
  { 
    "vopros": 'Столица Италии?', 
    "otvety": [ 
      'Милан', 
      'Ватикан', 
      'Рим', 
    ], 
    "otvet": [3] 
  }, 
  { 
    "vopros": 'Столица России?', 
    "otvety": [ 
      'Москва', 
      'Санкт-Петербург', 
      'Тула', 
    ], 
    "otvet": [0] 
  } 
]; 
 
window.onload = draw(); 
 
function draw() { 
  var questionBlock = ''; 
  var vopr = document.querySelector('.vopr'); 
  for (var i = 0; i < voprosy.length; i++) { 
    var qwest = voprosy[i].vopros; 
    questionBlock += '<div class="col-md-6 text-center"><h3>'; 
    questionBlock += qwest; 
    questionBlock += '</h3>'; 
 
    for (var j = 0; j < voprosy[i].otvety.length; j++) { 
      questionBlock += '<input type="radio" name ="answer_' + i + '" value="' + j + '" />' + voprosy[i].otvety[j] + '<br />'; 
    } 
 
    questionBlock += '</div>'; 
 
  } 
  document.getElementById("question").innerHTML = questionBlock; 
} 
 
function ok() { 
  const answer_0 = document.querySelector('input[name="answer_0"]:checked').value, 
        answer_1 = document.querySelector('input[name="answer_1"]:checked').value, 
        answer_2 = document.querySelector('input[name="answer_2"]:checked').value, 
        name = document.querySelector('#names').value, 
        number = document.querySelector('#stud').value; 
  if (answer_0 == 0 && answer_1 == 2 && answer_2 == 0) { 
    alert(name + '' + number + 'Поздравляем вы прошли тест на 100'); 
  } 
}
<div class="conteiner"> 
  <div class="col-md-12"> 
    <h2 class="text-center col-md-offset-3 col-md-7">Экзаменационный тест</h2> 
    <div class="col-md-3 input-group input-group-lg"> 
      <span class="input-group-addon"> 
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
      </span> 
      <input type="txt" class="form-control" id="names" placeholder="Введите Имя"> 
    </div> 
    <br> 
    <div class="col-md-3 input-group input-group-lg"> 
      <span class="input-group-addon"> 
                                <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> 
      </span> 
      <input type="number" class="form-control" id="stud" placeholder="Введите Номер"> 
    </div> 
  </div> 
</div> 
 
 
<div class="row" id="question"></div> 
<input type="button" onclick="ok();" value="Результат" style="margin:5% ">

READ ALSO
Как убрать класс по click

Как убрать класс по click

Имеется функция, которая добавляет класс:

165
Задание высоты элементу после render&#39;a

Задание высоты элементу после render'a

У меня вот так выглядят товары в магазине, высота у всех разная, хочу задать высоту каждого элемента равную его ширинеПри расширении окна,...

156
Ошибка при использовании VUEX во Vue.js IE11

Ошибка при использовании VUEX во Vue.js IE11

При загрузке страницы появляется такая ошибка:

181
Не броская на первый взгляд сущность – как реализовано это шаманство?

Не броская на первый взгляд сущность – как реализовано это шаманство?

Здесь https://websemanticsuk/ размещены ссылки в виде блоков и внутри каждого блока своя иконка

186