Run a defined function on page load and on button click

Question

I'm trying to set some values on page load, that is working perfectly. Then I have a button that will changes the values on click, that is also working great. I'm running into an issue getting the values to change back upon another button click. I want to run the same calculations that I have in my first function, and I am trying to call that function on my button click, but I'm getting an error that it's not defined. Here is my code

$(document).ready( function calcValues() {

$('#valueOne').val('1');
$('#valueTwo').val('0');

$("#quantity").keyup(function(){ 
$('#valueOne').val($('#quantity').val());



            if (document.getElementById('radioOne').checked) {
                    if(document.getElementById('quantity').value <= 9) {            
                  $('#valueOne').val('1');  
                $('#valueThree').val('0');   
                            }       
                    else if(document.getElementById('quantity').value >= 10 
&& (document.getElementById('quantity').value <= 24)) {             
                              $('#valueOne').val('0');  
                  $('#valueThree').val('1');
              }
          else if(document.getElementById('quantity').value >= 25) {
                $('#valueOne').val('0');  
                $('#valueThree').val('2');       
                        }
                }
                  else if(document.getElementById('radioTwo').checked) {
                              $('#valueOne').val($('#quantity').val());
                                $('#valueThree').val('0');
                }


         $('input[type="radio"]').click(function() {
            if($(this).attr('id') == 'radioOne') {  
                 if(document.getElementById('quantity').value <= 9) {
                  $('#valueOne').val('1');  
                $('#valueThree').val('0');   
                            }   

                     else if(document.getElementById('quantity').value >= 10 
&& (document.getElementById('quantity').value <= 24)) {
                  $('#valueOne').val('0');  
                $('#valueThree').val('1');   
                            }
               else if(document.getElementById('quantity').value >= 25) {
                $('#valueOne').val('0');  
                $('#valueThree').val('2');       
                            }
                    }

                    else if($(this).attr('id') == 'radioTwo') {  
                            $('#valueOne').val($('#quantity').val());
              $('#valueThree').val('0'); 

                    }
            })      
    }
)
})


$(document).on('click', '#buttonOne', function() {
         $('#valueThree').val('0'); 
         $('#valueOne').val('0'); 
         $('#valueTwo').val($('#quantity').val()); 
    })
    $("#quantity").keyup(function(){ 
         if(document.getElementById('#valueTwo').value > 0) {
             $('#valueThree').val('0'); 
             $('#valueOne').val('0'); 
             $('#valueTwo').val($('#quantity').val());
    }})



$(document).on('click', '#buttonTwo', function(calcValues) {
})

I have calculations in the first two functions, and nothing in the third as I'm just trying to call the first function back

Answer 1

You should define your function calcValues and call it like this:

function calValues() {
// Set values
}

$(document).ready( calcValues)

$(document).on('click', '#button1', function() {
// Change Values
})

$(document).on('click', '#button2', calcValues) 

The way you are doing it, the function calcValues it is not defined and it is not accesible.