, используя форму для заполнения массива

erwin_m спросил: 13 июня 2018 в 08:01 в: javascript

Я пытаюсь создать форму, которая должна создать массив в порядке, определяемом заданными вопросами. Я очень стараюсь с js, но нахожу это трудным, без опыта. Меня не удивляет, что это не сработает. Так или иначе, переменные не имеют значения. То, что я уже сделал, является вероятным способом глупости, я думаю, что их можно немного сократить ;-). Надеюсь, что кто-то посмотрит мой код и поможет мне в этом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
 <head>
  <title>Keuze studievereniging</title>
  <style>
    fieldset {max-width:500px;}
    button {margin-top:30px;}
  </style>
</head>
  <body>
<h2>Sororities hulp</h2><p>Beantwoord onderstaande vragen om te zien welke vereniging het best bij je past.</p><form name="formulier"
onsubmit="return validateForm()" method="post">
  <fieldset>
  <legend>Maak je keuze per vraag, vul alle onderdelen in.</legend>
  <div>
<p>Do you believe it is important that faith is emphasized in a sorority?</p>
  <input type="radio" id="vr1_1" name="VR1" value=1> Ja
  <input type="radio" id="vr1_0" name="VR1" value=0> Nee
<p>Would you participate in a hazing?</p>
  <input type="radio" id="vr2_1" name="VR2" value=1> Ja
  <input type="radio" id="vr2_0" name="VR2" value=0> Nee
<p>Would you like to fully integrate within the community of the sorority?</p>
  <input type="radio" id="vr3_1" name="VR3" value=1> Ja
  <input type="radio" id="vr3_0" name="VR3" value=0> Nee
<p>Do you like to party?</p>
  <input type="radio" id="vr4_1" name="VR4" value=1> Ja
  <input type="radio" id="vr4_0" name="VR4" value=0> Nee
<p>Would you sacrifice a free night of your own for the good of the sorority?</p>
  <input type="radio" id="vr5_1" name="VR5" value=1> Ja
  <input type="radio" id="vr5_0" name="VR5" value=0> Nee
<p>Would you like your sorority to be apart of a bigger european system?</p>
  <input type="radio" id="vr6_1" name="VR6" value=1> Ja
  <input type="radio" id="vr6_0" name="VR6" value=0> Nee
<p>Would you enjoy a weekly or by weekly bible study?</p>
  <input type="radio" id="vr7_1" name="VR7" value=1> Ja
  <input type="radio" id="vr7_0" name="VR7" value=0> Nee <br>
<button type="submit">Adviseer mij</button>
  </div>
</fieldset>
</form><p>De voor jou geschikste volgorde om te kijken is: </p><p id="uitslag"></p>  <script type="text/javascript">  function validateForm() {
  var x = document.forms["formulier"]["VR1", "VR2", "VR3", "VR4", "VR5", "VR6", "VR7"].value;
  if (x == "") {
      alert("You have to answer each question for a good advice");
      return false;
  }
}    var vvr11 = document.getElementsByName(vr1_1);
    console.log (vvr11);
    var vvr10 = document.getElementsByName(vr1_0);
    var vvr21 = document.getElementsByName(vr2_1);
    var vvr20 = document.getElementsByName(vr2_0);
    var vvr31 = document.getElementsByName(vr3_1);
    var vvr30 = document.getElementsByName(vr3_0);
    var vvr41 = document.getElementsByName(vr4_1);
    var vvr40 = document.getElementsByName(vr4_0);
    var vvr51 = document.getElementsByName(vr5_1);
    var vvr50 = document.getElementsByName(vr5_0);
    var vvr61 = document.getElementsByName(vr6_1);
    var vvr60 = document.getElementsByName(vr6_0);
    var vvr71 = document.getElementsByName(vr7_1);
    var vvr70 = document.getElementsByName(vr7_0);    var alpha = vvr11 + vvr31 + vvr41;
    console.log (alpha);
    var rsk = vvr11 + vvr51 + vvr71;
    var vgste = vvr11 + vvr51 + vvr71;
    var nse = vvr11 + vvr51 + vvr71;
    var audentis = vvr21 + vvr41 + vvr51;
    var taste = vvr21 + vvr31 + vvr41;
    var aegee = vvr31 + vvr41 + vvr61;    var sororities = [alpha, rsk, vgste, nse, audentis, taste, aegee];    function sortering() {
        sororities.sort(function(a, b){return a - b});
        document.getElementById("uitslag").innerHTML = sororities;
    }
    sortering ();
   </script>  </body>
 </html>

1 ответ

ds1 ответил: 13 июня 2018 в 09:14

Да, у вас есть много возможностей для улучшения вашего кода, но я оставлю эту часть вам.

Вы используете

document.getElementsByName(vr1_1);

в то время как вы действительно хотите использовать

document.getElementsByName('VR1');

, который дает вам NodeList всех элементов с именем VR1 или используйте

document.getElementById('vr1_1').checked;

для явно получить конкретный элемент (здесь: vr1_1), чтобы проверить его проверенное состояние.

erwin_m ответил: 13 июня 2018 в 09:45
Спасибо, что указал на эту ошибку, это был глупый ;-). Я пробовал оба решения, но это не помогает. Ive положил это в скрипку, jsfiddle.net/erwin_m/zL6oq5gj
ds1 ответил: 13 июня 2018 в 10:00
Это действительно работает, это зависит от того, чего именно вы хотите достичь и когда. В зависимости от этого вы можете захотеть выполнить дополнительную работу. То есть. получение NodeList не поможет вам, вы можете захотеть проверенное состояние, а не NodeList. Затем вы хотите вставить его в массив, а не конкатенировать его как строки ("a" + "b" приводит к "ab", не ["a","b"]). Кроме того, помните об апострофах, "VR1" - это строка, VR1 - неопределенная переменная, ведущая к пустому NodeList.
ds1 ответил: 13 июня 2018 в 10:29
Я обновил jsfiddle и добавил в него некоторые комментарии, которые, надеюсь, будут полезны, поскольку я не совсем уверен, чего вы хотите достичь в какой момент. Смотрите: jsfiddle.net/4e8y9v6d

Дополнительное видео по вопросу: , используя форму для заполнения массива

Javascript-джедай #24 - Массивы

JavaScript Higher Order Functions & Arrays

Javascript - forEach, filter, map, every, some, reduce, reduceRight (методы перебора массива)