Q:

Jquery button click function not working at all

I'm trying to get the text below my form to change based on your choice of 2 radio buttons 'yes' or 'no'. I have a function getCats that sets catVal to the chosen radio button. The function showCats features an if statement that changes the text based on the value of catVal. Submit is the id of the submit button for the form and cat is the name of the yes and no radio buttons.
Currently the on click function isn't working, the alert never appears.
$(document).ready(function(){
    $('#submit').click(function(){
        alert('k');
        getCats();
    });
});
function getCats() {
    var cats = $([name='cat']);
    var catVal;
    for(var i = 0; i < cats.length; i++){
        if(cats[i].checked){
            catVal = cats[i].value;
        }
    }
    showCats();
}
function showCats(){
    alert('show');
    if (catVal == 'yes'){
        $("#catReact").text('Hello fellow cat lover!');
    }
    if (catVal == 'no'){
        $("#catReact").text('I guess you must be a dog person.');
    }
}

A:

There are multiple changes needed to your code.

You need to change selector. Also it is better to use radio group name instead of checking for each radio button in for loop.
catValue should be a parameter to the function so it will reusable.
You should use a button instead of submit to avoid page refresh
Here is working plunker: [Plunker][1]

Here is code:

$(document).ready(function(){
$('#submit').click(function(){
    alert('k');
    getCats();
}); });
function getCats() {
var catVal= $("[name='cat']:checked").val();;

showCats(catVal);  } 
function showCats(catVal){
    alert(catVal);
    console.log($("#catReact"))
    if (catVal == 'yes'){
        $("#catReact").text('Hello fellow cat lover!');
    }
    if (catVal == 'no'){
        $("#catReact").text('I guess you must be a dog person.');
    }
}
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <form action="">
  <input type="radio" id="radio1" name="cat" value="yes"> Cat<br>
  <input type="radio" id="radio2" name="cat" value="no"> Dog<br>
  
  <input type="button" id="submit" value="submit">
  <div id="catReact" ></div>
</form>
    
  </body>

</html>

