How can I use a button onchange event to run the selected button's onclick function?

Question

When a radio button within an HTML form is selected, I am hoping that it will run the onclick function that I have linked to it. I tried using onclick instead of onchange earlier but it's not working with the radio buttons. Does anyone have any advice/tips I can use to resolve this issue?

function select(id, job, salary, someBool) {
  console.log(id, job, salary, someBool);
}

<form class="choice">
  <input type="radio" id="librarian" name="profession" value="lib" onclick="select('#professionSelect', 'Librarian', 4850, true);">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" onclick="select('#professionSelect', 'Motorcycle Mechanic', 2800, true)">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" onclick="select('#professionSelect', 'Actor', 3100, true)">
  <label for="actor">Actor: $3,100/month</label><br>
  <input type="radio" id="teacher" name="profession" value="tea" onclick="select('#professionSelect', 'Teacher', 4500, true)">
  <label for="teacher">Teacher: $4,500/month</label><br>
  <input type="radio" id="doctor" name="profession" value="doc" onclick="select('#professionSelect', 'Doctor', 13000, true)">
  <label for="doctor">Doctor: $13,000/month</label><br>
  <input type="radio" id="fire" name="profession" value="fi" onclick="select('#professionSelect', 'Firefighter', 3700, true)">
  <label for="fire">Firefighter: $3,700/month</label><br>
  <input type="radio" id="engineer" name="profession" value="engi" onclick="select('#professionSelect', 'Computer Engineer', 9400, true)">
  <label for="engineer">Computer Engineer: $9,400/month</label><br>
</form>

Would something like this work?

    $(".choice").change(function() {
        $(this).onclick();
    });

Answer 1

select seems to be a word you cannot use in your HTML inline event listener. Use any other non reserved keyword it works.

Also, both onclick and onchange attributes should work here. Here is an example using both of them:

function boo(name,salary){
console.log(name,salary);
}
function body(name,salary){
console.log(name,salary);
}
function select(name,salary){
console.log(name,salary);
}

<form class="choice">
<input type="radio" id="librarian" name="profession" value="lib" onchange="body('lib',4850)">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" onchange="select('mechanic',2800)">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" onchange="boo('actor',3100)">
  <label for="actor">Actor: $3,100/month</label><br>
  <input type="radio" id="teacher" name="profession" value="tea" onchange="boo('teacher',4500)">
  <label for="teacher">Teacher: $4,500/month</label><br>
  <input type="radio" id="doctor" name="profession" value="doc" onclick="boo('doctor',13000)">
  <label for="doctor">Doctor: $13,000/month</label><br>
</form>

In the above example I have used both select and body, both are not keywords in JS. But will not work in inline event handlers.

You can use them directly in JS though, as below:

let select = function(){
  console.log(event.target.value);
}
let body = function(){
  console.log(event.target.value);
}
document.querySelector('#librarian').onchange = select;
document.querySelector('#librarian2').onchange = body;

<input type="radio" id="librarian" name="profession" value="lib"  />
  <label for="librarian">Librarian: $4,850/month</label>
    <input type="radio" id="librarian2" name="profession" value="lib2"  />
  <label for="librarian2">Librarian2: $4,850/month</label>

Probably, why the docs recommend against using inline event handlers.

Keep your JS and HTML separate.