单击按钮时不会出现警报

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 函数。

您甚至不应该首先使用这种已有 25 年以上历史的方法来设置事件处理程序。 在 JavaScript 中完成所有事件处理，而不是在 HTML 中。

您也不应该向window对象添加属性，就像使用window.question1 = ...

并且， 也要远离getElementsByName() ，因为它返回一个会真正影响性能的活动节点列表。 它也是我们 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>