Question

我是html和js的新手程序员。我正在尝试制作一个页面，该页面从提示中接受名称，然后使用单选按钮执行一些动画。在添加单选按钮更改功能之前，我的提示运行顺利。任何帮助都会很棒！

当我注释掉我的代码时，提示起作用，我添加到hw4.js文件中的任何其他代码也使提示不起作用。整个代码本身也涉及AJAX和Cookies，但我决定推迟这种复杂性直到运行良好为止。我还尝试过在线下载JQuery或使用其他链接引用它。

在HTML中：

<head>
    <title>Greeting Page </title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script>
    <script src="hw4.js" defer></script>
    <meta charset="UTF-8">

</head> 
<body> 
    <h1>A Greeting Page for Important People</h1>

    <section id= forms>
        <form id = "speedForm" class="forms">
            <p id = "speeds">
                Speed 0 <input type="radio" name=choice value="0" id= "speed0" checked> Speed 1 <input type="radio" name=choice value="1" id= "1" > Speed 2 <input type="radio" name=choice value="2" id= "2" > Speed 3 <input type="radio" name=choice value="3" id= "3" > Speed 4 <input type="radio" name=choice value="4" id= "4" > Speed 5 <input type="radio" name=choice value="5" id= "5" > Speed 6 <input type="radio" name=choice value="6" id= "6" > Speed 7 <input type="radio" name=choice value="7" id= "7" > Speed 8 <input type="radio" name=choice value="8" id= "8" > Speed 9 <input type="radio" name=choice value="9" id= "9" > Speed 10 <input type="radio" name=choice value="10" id= "10" > <br>
                Speed 11 <input type="radio" name=choice value="11" id= "11" > Speed 12 <input type="radio" name=choice value="12" id= "12" > Speed 13 <input type="radio" name=choice value="13" id= "13" > Speed 14 <input type="radio" name=choice value="14" id= "14" > Speed 15 <input type="radio" name=choice value="15" id= "15" > Speed 16 <input type="radio" name=choice value="16" id= "16" > Speed 17 <input type="radio" name=choice value="17" id= "17" > Speed 18 <input type="radio" name=choice value="18" id= "18" > Speed 19 <input type="radio" name=choice value="19" id= "19" > Speed 20 <input type="radio" name=choice value="20" id= "20" > <br>
            </p>
        </form>

        <form id= "colorForm" class= "forms">
            <p>
                red <input type="radio" name= "option" value="red" id= "red" checked> yellow <input type="radio" name=option value="yellow" id= "yellow" > blue <input type="radio" name=option value="blue" id= "blue" > 
            </p>

        </form>
    </section>

    <section>
        <div class= "box">
            Welcome
        </div>
    </section>

</body>

在JS中：

var userName = prompt("What's your name?", " ");

$(document).ready(function() {      


$radios.change(function() {
  let $checked = $radios.filter(function() {.   // when radio buttons are changed for speed, check which was pressed 
    return $(this).prop('checked');
    });

    let speed = $checked.val()* 100;            // set value of checked button (0-50) * 100 to the speed
    $( ".boxes" ).effect( "shake", {times: 100}, speed);    //creat a shake effect on the box div at the corresponding speed
});


});

//event listener for color 

$(document).ready(function() {      


$radios.change(function() {
  let $checked = $radios.filter(function() {.   // when radio buttons are changed for speed, check which was pressed and return that object as $checked var
    return $(this).prop('checked');
    });

    let color = $checked.val();             // set value of checked button (0-50) * 100 to the speed
    $( ".boxes" ).css("backgroundColor", color); //change color of box to corresponding radio button value (red, yellow, blue)


});

});

Answer 1

我发现了一些错误。 1）代码中包含过多的“。”在{如上所述。 2）变量$ radios没有被加载或定义。一旦脚本没有“严格使用”，控制台就可能看不到该错误。 3）没有ID名称和e.t.c

这是带有事件委派的无线电的更简单的工作示例。无需选择所有无线电来识别已检查的无线电。将侦听器挂接到父元素，然后检查两件事 1）e.target是输入类型吗？ 2）获得它的价值。

我希望它将对您有所帮助。最好将GitHub像PR一样看待，其中代码可以很容易地带有修复建议。无论如何，请尝试以下解决方案。

"use strcit";

function addRadios(amount){
   
    radios =  document.body.querySelector('.forms');

    for(var i=0; i < amount; i++){
        var label = document.createElement("label");
        var radio = document.createElement('input');
        radio.type = 'radio';
        radio.classList.add('choice');
        radio.setAttribute('name','choice');
        radio.setAttribute('value',i);
        radio.setAttribute('id',i);
        radios.appendChild(document.createTextNode('Speed '+i));
        radios.appendChild(radio);
    }
    radios.children[0].id = 'speed0';
    radios.children[0].checked = true;
};

$("#speedForm").click( function(e){
    
    if($(e.target).prev().is("input")){
        let speed = $(e.target).val() * 100;  
        alert(speed);
    }
});

addRadios(10);

<head>
  <title>Greeting Page </title>
  <meta charset="UTF-8">
</head> 
<body> 
  <h1>A Greeting Page for Important People</h1>

  <section id= forms>
      <div id = "speedForm" class="forms">
      </div>
  </section>

  <section>
      <div class= "box">
          Welcome
      </div>
  </section>
  
  <script
  src="http://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="scripts/index.js"></script>
</body>

向我的js添加新功能时提示无法正常工作的问题？

1 个答案: