JavaScript в HTML - невозможно использовать значения радиокнопок для отображения условного результата

Question

Я бы хотел пройти эту викторину "Стиль Buzzfeed", где я выбираю определенные ответы, и на основании того, что я выбрал, я получаю определенного исполнителя для прослушивания.Я пытаюсь сделать это прямо сейчас, используя HTML-форму и JavaScript.Я не могу получить результаты, чтобы показать.Я включил JavaScript и HTML, с которыми я работаю, ниже.

Любая помощь будет принята с благодарностью.

var season = 0;
var activity = 0;
var meal = 0;
var vacation = 0;
var total = 0;

function displayResult() { 
    season = parseInt(document.querySelector('input[name = "season"]:checked').value);

    activity = parseInt(document.querySelector('input[name = "activity"]:checked').value);

    meal = parseInt(document.querySelector('input[name = "meal"]:checked').value);

    vacation = parseInt(document.querySelector('input[name = "vacation"]:checked').value);

    total = season + activity + meal + vacation;

    document.getElementById("answer").innerHTML = total;

        if (total < 4) {document.getElementById("answer2").innerHTML = "You got Taylor Swift."; } 
        else if (total >= 4 && total < 7) {document.getElementById("answer2").innerHTML = "You got Justin Bieber."; }
        else if (total >= 7) {document.getElementById("answer2").innerHTML = "You got Maroon 5."; } 
        else {alert("Fill out all questions before submitting."); }
    return false; }
window.onload = function () {document.getElementById("form1").onclick = displayResult; };

<!--Quiz-->
<div id="main">
  <div id="header1">
    <h1>Which <span id="solo">SOLO</span> PENGUIN RECORDS artist should you listen to?</h1>
  </div>

  <form id="form1" action="#">
    <p>What is your favorite season?</p>
    <td>
      <tr>
        <p class="rb">
          <label>
            <input type="radio" name="season" id="summer" value="0" />
            <span>Summer</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="season" id="fall" value="1" >
            <span>Fall</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="season" id="winter" value="2" >
            <span>Winter</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="season" id="spring" value="3" >
            <span>Spring</span>
          </label>
        </p>
      </tr>
    </td>


    <p>Where would you prefer to spend your Saturday Morning?</p>
    <td>
      <tr>
        <p class="rb">
          <label>
            <input type="radio" name="activity" id="gym" value="1" />
            <span>The gym</span>
            </label>
        </p>

        <p class="rb">
          <label>
            <input type="radio" name="activity" id="bed" value="3" />
            <span>In bed</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="activity" id="coffee" value="2" />
            <span>Coffee Shop</span>
          </label>
        </p>
      </tr>
    </td>

    <p>What is your favorite meal of the day</p>
    <td>
      <tr>
        <p class="rb">
          <label>
            <input type="radio" name="meal" id="bfast" value="0" />
            <span>Breakfast</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="meal" id="brunch" value="1" />
            <span>Brunch</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="meal" id="lunch" value="2" />
            <span>Lunch</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="meal" id="dinner" value="3" />
            <span>Dinner</span>
          </label>
        </p>
      </tr>
    </td>

    <p>Where is your dream vacation destination?</p>
    <td>
      <tr>
        <p class="rb">
          <label>
            <input type="radio" name="vacation" id="island" value="1" />
            <span>Tropical Island</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="vacation" id="Mountains" value="2" />
            <span>Mountainside</span>
          </label>
        </p>
        <p class="rb">
          <label>
            <input type="radio" name="vacation" id="City" value="3" />
            <span>Bustling City</span>
          </label>
        </p>
      </tr>
    </td>

    <br/><br/>
    <button class="btn waves-effect waves-light black" type="submit" name="action" id="submitForm" value="submit" onSubmit="algorithm.js">Submit</button>
  </form>

  <p id="answer"></p>
  <p id="answer2"></p>
</div>

Answer 1

По-вашему, вы должны брать время года, активность, еду и отпуск из параметров URL (?season=0&activity=1&meal=0&vacation=1&action=submit#), а не напрямую создавать радиобокс, потому что вы используете <form> и onSubmit.

Если вы хотите вести себя асинхронно и получить результат непосредственно из радиобоксов, вы можете удалить <form> и кнопку отправки и использовать следующий код:

<script type="text/javascript">

(function () {

        Array.from(document.getElementsByTagName("input")).map((elem) => {

            elem.addEventListener('change', () => {

            season = parseInt(document.querySelector('input[name = "season"]:checked').value);

            activity = parseInt(document.querySelector('input[name = "activity"]:checked').value);

            meal = parseInt(document.querySelector('input[name = "meal"]:checked').value);

            vacation = parseInt(document.querySelector('input[name = "vacation"]:checked').value);

            total = season + activity + meal + vacation;

            document.getElementById("answer").innerHTML = total;

            if (total < 4) {document.getElementById("answer2").innerHTML = "You got Taylor Swift."; } 
            else if (total >= 4 && total < 7) {document.getElementById("answer2").innerHTML = "You got Justin Bieber."; }
            else if (total >= 7) {document.getElementById("answer2").innerHTML = "You got Maroon 5."; } 
            else {alert("Fill out all questions before submitting."); }

            return false;

            });
        }); 

})();