Question

我正在学习C＃和JS，并试图创建一个简单的调查表供用户阅读我们的帮助部分后进行回答。用户选择“是”并单击“提交”后，我希望弹出一个警告消息，表示“谢谢您使用我们”。如果用户选择“否”，则会出现不同的响应。有人可以帮我吗？我收到的错误如下：

groupOfDefaultRadios不是函数。

有人可以帮助我，告诉我我做错了什么吗？我提供了一个片段。

    window.question1 =  function() {
    
   
    var option = getRVBN('groupOfDefaultRadios');
     
   if (option == 'yes') {
      alert("Thank you for your kindness");
   } 
   else {
      alert ("We are sorry! Please write to us telling us what was wrong");
   }
   }

function getRVBN(rName) {
    var radioButtons = document.getElementsByName(rName);
    for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) return radioButtons[i].value;
    }
    return '';
}
    function isEmptyOrSpaces(str) {
        return str === null || str.match(/^ *$/) !== null;
    }

     <div class="clienthelp-card">
                                    <form id="myForm">
                                    <h4> Was this helpful?</h4>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="defaultGroupExample1" name="groupOfDefaultRadios" value="yes">
                                        <label class="custom-control-label" for="defaultGroupExample1">Yes</label>
                                    </div>

                                
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="defaultGroupExample2" name="groupOfDefaultRadios" value="no">
                                        <label class="custom-control-label" for="defaultGroupExample2">No</label>
                                    </div>
                                    <input class="button" type="button" onclick="groupOfDefaultRadios();return false;" name="groupOfDefaultRadios" value="Submit">
                                        </form>
                                </div>

Answer 1

问题是您没有在js文件中定义groupOfDefaultRadios。 onclick属性用于附加单击元素时要调用的函数。单击按钮时，找不到功能，因此引发错误。您也不需要分号或return，只需onclick="groupOfDefaultRadios()";

Answer 2

错误在这里：onclick="groupOfDefaultRadios();return false;"

您没有名为groupOfDefaultRadios的JavaScript函数。

You really shouldn't even be using that 25+ year old way of setting up event handlers in the first place.用JavaScript而不是HTML来处理所有事件。

您也不应该像在使用window那样向window.question1 = ...对象添加属性

stay away from getElementsByName() as well, since it returns a live node list确实会影响性能。这也是我们25年前使用的东西，它具有.querySelectorAll()更好的现代副本。但是，实际上，您并不是真正想要的，因为您只对所选的一个单选按钮感兴趣，因此.querySelector()将返回与您传递给它的CSS选择器匹配的一个元素。

请参阅以下评论：

// Get a reference to all the DOM elements you'll use in JavaScript
let button = document.querySelector("input.button");

// Set up your events in JavaScript, not HTML
button.addEventListener("click", question1);

// Just create a function declaration instead of 
// assigning functions to brand new window properties
function question1() {
  // Find the one checked radio button within its group
  var selection = document.querySelector("input[name='groupOfDefaultRadios']:checked");
     
  // Check the selected radio button value
  if (selection.value == 'yes') {
    alert("Thank you for your kindness");
  } else {
    alert ("We are sorry! Please write to us telling us what was wrong");
  }
}

<div class="clienthelp-card">
  <form id="myForm">
    <h4> Was this helpful?</h4>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="defaultGroupExample1" name="groupOfDefaultRadios" value="yes">
      <label class="custom-control-label" for="defaultGroupExample1">Yes</label>
    </div>                         
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="defaultGroupExample2" name="groupOfDefaultRadios" value="no">
      <label class="custom-control-label" for="defaultGroupExample2">No</label>
    </div>
    <input class="button" type="button" name="groupOfDefaultRadios" value="Submit">
  </form>
</div>

单击按钮时不会显示警报

2 个答案: