Convert and Optimize JavaScript to jQuery - helper

Question

I need to convert this JavaScript function to jQuery and also to optimize it.
const sprHundredMan = 9.58,
sprHundredWoman = 10.49,
sprTwoHundredMan = 19.19,
sprTwoHundredWoman = 21.34,
sprFourHundredMan = 43.03,
sprFourHundredWoman = 47.60,
longJpMan = 8.95,
longJpWoman = 7.52,
highJpMan = 2.45,
highJpWoman = 2.09;
document.getElementById('button-calc').addEventListener('click', function (e) {
let myResult = document.getElementById('result').value;
e.preventDefault();
if (document.getElementById('male').checked && document.getElementById('sprint').value == '100') {
let score = sprHundredMan / myResult * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('male').checked && document.getElementById('sprint').value == '200') {
let score = sprTwoHundredMan / myResult * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('male').checked && document.getElementById('sprint').value == '400') {
let score = sprFourHundredMan / myResult * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('female').checked && document.getElementById('sprint').value == '100') {
let score = sprHundredWoman / myResult * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('female').checked && document.getElementById('sprint').value == '200') {
let score = sprTwoHundredWoman / myResult * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('female').checked && document.getElementById('sprint').value == '400') {
let score = sprFourHundredWoman / myResult * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('male').checked && document.getElementById('jump').value == 'Long Jump') {
let score = myResult / longJpMan * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('female').checked && document.getElementById('jump').value == 'Long Jump') {
let score = myResult / longJpWoman * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('male').checked && document.getElementById('jump').value == 'High Jump') {
let score = myResult / highJpMan * 100
document.getElementById('perf').value = score.toFixed(2);
} else if (document.getElementById('female').checked && document.getElementById('jump').value == 'High Jump') {
let score = myResult / highJpWoman * 100
document.getElementById('perf').value = score.toFixed(2);
}
});
I tried to change getElementById with $ and addEventListener with .on but it doesn't work and i do not know how to optimize it. I am beginner level and will be happy if someone help me. Thnak you.

Answer 1

First, no matter which language, if you find yourself using >2 if-else chain, go for switch statements (As I have done below). Such long chain just irritates reader :)
Also, learn some JQuery basics and syntax, changing just "getElementById with $ and addEventListener with .on" won't work. I have changed your code with JQuery selectors in place. See and run the snippet below.
const sprHundredMan = 9.58,
sprHundredWoman = 10.49,
sprTwoHundredMan = 19.19,
sprTwoHundredWoman = 21.34,
sprFourHundredMan = 43.03,
sprFourHundredWoman = 47.60,
longJpMan = 8.95,
longJpWoman = 7.52,
highJpMan = 2.45,
highJpWoman = 2.09;
$("#button-calc").click(function() {
let isMale = $('#male').is(':checked');
let isFemale = $('#female').is(':checked');
let score = 0;
let sprint = $("#sprint").val();
let jump = $("#jump").val();
if (isMale) {
score = (sprint) ? getSprintScore(sprint, sprHundredMan, sprTwoHundredMan, sprFourHundredMan) :
getJumpScore(jump, longJpMan, highJpMan);
} else if (isFemale) {
score = (sprint) ? getSprintScore(sprint, sprHundredWoman, sprTwoHundredWoman, sprFourHundredWoman) :
getJumpScore(jump, longJpWoman, highJpWomann);
} else
score = 0;
$("#perf").val(score.toFixed(2));
});
var getSprintScore = function(sprint, sprHundred, sprTwoHundred, sprFourHundred) {
let myResult = $("#result").val();
let scoreSprint = 0;
switch (sprint) {
case '100':
scoreSprint = sprHundred / myResult * 100;
break;
case '200':
scoreSprint = sprTwoHundred / myResult * 100;
break;
case '400':
scoreSprint = sprFourHundred / myResult * 100;
break;
default:
scoreSprint = 0;
}
return scoreSprint;
};
var getJumpScore = function(sprint, longJp, highJp) {
let myResult = $("#result").val();
return (jump === 'Long Jump') ? myResult / longJpMan * 100 : score = myResult / highJpMan * 100;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="male" type="radio" name="gender" value="male" checked="checked">
<label for="radio1">Male</label>
<input id="female" type="radio" name="gender" value="female">
<label for="radio2">Female</label>
<br/> Sprint: <input type="number" id="sprint">
<br/> Jump: <input type="number" id="jump">
<br/> Result: <input type="number" id="result">
<hr/>
<button id="button-calc">Compute score</button>
<input type="number" id="perf">