Alert won't appear when clicking button

Question

I am learning C# and JS and I am trying to create a simple questionnaire for users to answer after reading our help section. After the user selects "yes" and clicks submit, I would like for an alert to pop up saying "Thank you for using us". If user selects, "no" a different response would appear. Could somebody help me out? The error I am getting is the following:

groupOfDefaultRadios is not a function.

Could someone help me and tell what is it wrong that I am doing? I provided a snippet.

    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>

You need to create the function, with that exact name (whatever name you gave it in the `onclick`), in the associated js file. And you don't need the return in the `onclick` assignment, or the semicolons for that matter. — JDunken, Dec 06 '19 at 20:54

score 0 · Answer 1 · answered Dec 06 '19 at 21:03

The problem is you don't have groupOfDefaultRadios defined in the js file. The onclick attribute is used to attach a function to be called when the element is clicked. When your button is clicked, it's not finding the function, so it's throwing an error. You also don't need the semicolons or the return in there, just onclick="groupOfDefaultRadios()";

score 0 · Accepted Answer · answered Dec 06 '19 at 21:05

The error is here: onclick="groupOfDefaultRadios();return false;"

You don't have a JavaScript function named groupOfDefaultRadios.

You really shouldn't even be using that 25+ year old way of setting up event handlers in the first place. Do all your event handling in JavaScript, not in your HTML.

You also should not be adding properties to the window object, like you are doing with window.question1 = ...

And, stay away from getElementsByName() as well, since it returns a live node list that can really hurt performance. It's also something that we used 25+ years ago and has a much better modern counterpart of .querySelectorAll(). But, actually, you don't really want that because you're only interested in the one radio button that was selected, so .querySelector() will return the one element that matches the CSS selector you pass into it.

See comments below:

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

Alert won't appear when clicking button

2 Answers2