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

Question

所以，我正在尝试用 html/js 做一个小测验。我搜索了如何从 js 引用 ID，但即使这样，当我单击 D 选项并提交时，js 功能仍无法正常工作。

基本上，一旦有人在答案选项上按下提交，我就会收到 window 提醒。

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>

Answer 1

您必须向表单添加一个提交侦听器。从那里，您可以检查该值是否正确以显示正确的警报。使用单选按钮时，使用相同的 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");
  }
});

Answer 2

你有很多问题。

要使用 jQuery $ 函数，您必须加载 jQuery 库。您可以从 its website
选择器 radio 不会根据 ID 查找元素，它会查找所有 <radio> 元素……这些元素不存在于您的文档或 HTML 中。要通过 ID 查找元素，您需要 $('#The_ID')
attr(...) 获取具有从所选元素传递的名称的属性的值。 None 个元素有 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>

Answer 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>

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

window.alert not working when a form quiz is submitted

html

javascript

forms

popup