Как включить вход в метку в querySelector () в JavaScript?

Question

Я пытаюсь построить личностный тест для моего школьного проекта. Все работало нормально, пока я не решил, что хочу, чтобы входы для кнопок радио были просто изображениями. Проблема в том, что я не уверен, как сохранить выбранный выбор и его значение, чтобы рассчитать результат.

Это мой HTML-код:

<div id="simplequiz">
    <h3>What's your favourite colour palette?</h3>
    <p>
        <input type="radio" name="colour" class="a" value="-1" />
        <label for="p">
            <img src="images/2.jpg" alt="Gothic colour palette" style="width: 200px">
        </label>
    </p>
    <button type="submit" value="submit" onClick="submitSimpleQuiz()">Submit</button>
</div>

Это мой CSS:

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#simplequiz label {
    display: inline-block;
    cursor: pointer;
}

#simplequiz label:hover {
    background-color: #efefef;
}

#simplequiz label img {
    padding: 3px;
}

А это мой Javascript:

function submitSimpleQuiz() {
    "use strict";
    var colour = praseInt(document.querySelector('input[name = "colour"]:checked').value);

    var total = colour;

    if (total < 0) {
        document.getElementById("answer").innerHTML = "Goth";
        document.getElementById("simplequiz").style.display = "none";
    } else {
        document.getElementById("answer").innerHTML = "Minimalistic";
        document.getElementById("simplequiz").style.display = "none";
    }
}

$('#simplequiz input:radio').addClass('input_hidden');
$('#simplequiz label').click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});

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

Буду очень признателен за помощь.

Я только новичок в кодировании, но я попытался включить метку в javascript, а также изменить компоновку HTML, чтобы ввод был включен в тег label.

Answer 1

Сначала от всего, что нужно для импорта Jquery для использования функции Jquery $.

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

Секунда это parseInt, а не praseInt.

Третье: используйте этот кусок кода вместо своего:

var colour = parseInt(document.querySelector("div#simplequiz input[name = 'colour']").value);

Четвертое: чтобы ваш скрипт работал правильно, ваш javasScript должен быть -

<script type="text/javascript">
function submitSimpleQuiz(){
"use strict";
var colour = parseInt(document.querySelector("div#simplequiz input[name = 'colour']").value);

if (document.querySelector("div#simplequiz input[name = 'colour']").checked) {
    colour = 0;
}

var total =  colour;

if (total < 0) {
    document.getElementById("answer").innerHTML = "Goth";
    document.getElementById("simplequiz").style.display = "none";
}
else 
{
    document.getElementById("answer").innerHTML = "Minimalistic";
    document.getElementById("simplequiz").style.display = "none";
}
}

$('#simplequiz input:radio').addClass('input_hidden');
$('#simplequiz label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>

Answer 2

Поскольку я уверен, что вы не остановитесь только на одном вопросе, вот рабочий фрагмент, в который вы можете легко добавить больше вопросов:

function submitSimpleQuiz() {
  "use strict";
  var total = 0;
  var answer = ""; // Added, just because… (see below)

  // Easy selection, now! That counts only "selected" inputs!
  var inputs = document.querySelectorAll("#simplequiz .selected input");
  for (var i = 0; i < inputs.length; i++) {
    total += parseInt(inputs[i].value);
  }

  if (total < 0) {
    answer = "Goth";
  } else {
    answer = "Minimalistic";
  }

  // Moved outside of the if to only have these instructions one time
  document.getElementById("simplequiz").style.display = "none";
  document.getElementById("answer").innerHTML = answer;
}

// Your other code, I haven't touched it. Promise.
$('#simplequiz input:radio').addClass('input_hidden');
$('#simplequiz label').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
});

.input_hidden {
  position: absolute;
  left: -9999px;
}

.selected {
  background-color: #ccc;
}

#simplequiz label {
  display: inline-block;
  cursor: pointer;
}

#simplequiz label:hover {
  background-color: #efefef;
}

#simplequiz label img {
  padding: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="simplequiz">
  <h3>What's your favourite colour palette?</h3>
  <p>
    <!-- Modified order -->
    <label for="p">
      <input type="radio" name="colour" class="a" value="-1" />
      <img src="images/2.jpg" alt="Gothic colour palette" style="width: 200px">
    </label>
    <!-- Added another one below -->
    <label for="p">
      <input type="radio" name="colour" class="a" value="1" />
      <img src="images/2.jpg" alt="Minimal colour palette" style="width: 200px">
    </label>
  </p>
  <button type="submit" value="submit" onClick="submitSimpleQuiz()">Submit</button>
</div>
<!-- Added "answer" -->
<div id="answer"></div>

Во всяком случае, у меня есть несколько замечаний, здесь:
⋅ Ваша функция submitSimpleQuiz только в JavaScript, тогда как ваш другой код в jQuery. Вы должны выбрать, что вы хотите использовать!
Moved Я переместил input в ваши label с, чтобы упростить их выбор.
⋅ Почему вы используете input s, если скрываете их и не можете / не можете их проверить?!…

Надеюсь, это поможет.

Answer 3

Вам необходимо удалить строку:
$ ('# simplequiz input: radio'). addClass ('input_hidden');
Или вам нужно изменить строку:
var color = parseInt (document.querySelector ('input [name = "color"]: флажок "). значение);
Потому что, если вы снимите флажок с радиокнопки, вы не сможете получить значение. И вы должны использовать parseInt, а не praseInt. это ошибка.