提交表单测验时，window.alert 不起作用答案

【问题标题】：window.alert not working when a form quiz is submitted提交表单测验时，window.alert 不起作用
【发布时间】：2021-04-28 05:35:34
【问题描述】：

所以，我正在尝试使用 html/js 进行测验。我搜索了如何从 js 中引用 ID，但即使这样，当我单击 D 选项并提交时，js 函数也不起作用。

基本上，一旦有人在答案选项上按下提交，我就会尝试获得窗口警报。

What the code outputs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="missingletter.css">
    <title>Missing letter</title>
</head>

<body>
    <div class="images"></div>
    <div class="wordToGuess"></div>
    <form action="">
        <p class="question">What is the missing letter?</p>
        <!-- image of cat -->
        <p class="cat">_ A T</p>
        <input type="radio" id="c" name="cat" value="cat">
        <label for="cat" class="answer options">C</label><br><br>

        <input type="radio" id="m" name="mat" value="mat">
        <label for="cat" class="answer options">M</label><br> <br>

        <input type="radio" id="d" name="dat" value="dat">
        <label for="cat" class="answer options">D</label><br> <br>

        <input type="submit" value="submit">


    </form>

    <script>
        if ($('radio').attr("d") == "submit") {
            window.alert("Correct")
        } else {
            window.alert("try again")
        }
    </script>
    <div class="letters"></div>
</body>

</html>

【问题讨论】：

标签： javascript html forms popup

【解决方案1】：

你有很多问题。

要使用 jQuery $ 函数，您必须加载 jQuery 库。你可以从its website得到它
选择器radio 不会通过其ID 查找元素，它会查找所有<radio> 元素……这些元素不存在于您的文档或HTML 中。要通过 ID 查找元素，您需要 $('#The_ID')
attr(...) 使用从选定元素传递的名称获取属性的值。您的所有元素都没有d="something"。
您在文档加载时运行此代码，此时用户还有机会选择选项。您需要监听提交事件（然后停止表单提交到服务器）
您的复选框都有不同的名称，因此可以同时选择多个复选框
<label> 的 for 属性必须匹配与其关联的输入的 id。

假设你的目标是：

当用户点击提交按钮时
找出他们选中了哪个复选框
检查他们是否选择了选项dat（尽管这是错误的答案）

那么你需要一些类似的东西：

$('form').on('submit', event => {
  event.preventDefault();
  const choice = $('input[name="missing"]:checked').val();
  if (choice === 'dat') {
    alert("Correct");
  } else {
    alert("try again");
  }
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form action="">
  <p class="question">What is the missing letter?</p>
  <!-- image of cat -->
  <p class="cat">_ A T</p>
  <input type="radio" id="c" name="missing" value="cat">
  <label for="c" class="answer options">C</label><br><br>

  <input type="radio" id="m" name="missing" value="mat">
  <label for="m" class="answer options">M</label><br> <br>

  <input type="radio" id="d" name="missing" value="dat">
  <label for="d" class="answer options">D</label><br> <br>

  <input type="submit" value="submit">
</form>

【讨论】：

【解决方案2】：

您必须向表单添加一个提交侦听器。从那里，您可以检查值是否正确以显示正确的警报。使用单选按钮时，使用相同的name 属性对它们进行分组。

<form id="myForm" action="">
  <p class="question">What is the missing letter?</p>
  <!-- image of cat -->
  <p class="cat">_ A T</p>
  <input type="radio" name="answer" value="cat">
  <label for="cat" class="answer options">C</label><br><br>

  <input type="radio" name="answer" value="mat">
  <label for="cat" class="answer options">M</label><br> <br>

  <input type="radio" name="answer" value="dat">
  <label for="cat" class="answer options">D</label><br> <br>

  <input type="submit" value="submit">

</form>

$('#myForm').on('submit', function (e) {
  e.preventDefault();
 
  if ($('#myForm input[name="answer"]:checked').val() === 'cat') {
    window.alert("Correct");
  } else {
    window.alert("try again");
  }
});

【讨论】：

【解决方案3】：

试试这个

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="missingletter.css">
    <title>Missing letter</title>
</head>

<body>
    <div class="images"></div>
    <div class="wordToGuess"></div>
    <form action="" id="theform">
        <p class="question">What is the missing letter?</p>
        <!-- image of cat -->
        <p class="cat">_ A T</p>
        <input type="radio" name="option" value="cat">
        <label for="cat" class="answer options">C</label><br><br>

        <input type="radio" name="option" value="mat">
        <label for="cat" class="answer options">M</label><br> <br>

        <input type="radio" name="option" value="dat">
        <label for="cat" class="answer options">D</label><br> <br>

        <button type="submit" id="btn">Submit</button>


    </form>

    <script>
        const btn = document.querySelector('#btn');
        btn.onclick = function(){
            const options = document.querySelectorAll('input[name="option"]');
            let selectedValue;
            for (const option of options) {
                if (option.checked) {
                    selectedValue = option.value;
                    break;
                }
            }
            if(selectedValue == 'cat'){
                alert('Correct.')
            }else{
                alert('Try Again.')
            }
            
        };
    </script>
    <div class="letters">
    </div>
</body>

</html>

【讨论】：