Sum up the custom attributes of radio buttons and display in textbox

Question

I have multiple questions that contains radio buttons (every radio button has it's own custom attribute: numerical value).

$("input[type='button']").click(function() {
  function marking() {
    let q1 = $("input[name='age']:checked").attr('data-mark');
    let q2 = $("input[name='race']:checked").attr('data-mark');
    var total = parseInt(q1) + parseInt(q2);
    document.getElementById('result').value = total;
  }
  marking();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <font size="4">What is your age?</font><br>
  <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked">
  <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp;
  <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24">
  <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br>
  <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59">
  <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp;
  <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74">
  <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li>
<li>
  <font size="4">Please specify your race</font><br>
  <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked">
  <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp;
  <input type="radio" name="race" id="M" data-mark='1' value="M">
  <label for="M"><font size="4">Malay</font></label><br>
  <input type="radio" name="race" id="I" data-mark='2' value="I">
  <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp;
  <input type="radio" name="race" id="O" data-mark='5' value="O">
  <label for="O"><font size="4">Others</font></label><br><br></li>

<input type="button" name="button" value="Get Value" onclick="marking()">
<input type="text" id="result" name="result" value="" readonly>

This code can run with no issue if put into newly created php file. But run with issue (which is the value cannot display in the textbox) if put into my created php file. I wonder what is happening. I search around on internet but no result found.
Any advice or suggestion will be appreciated. Thank you in advance

Answer 1

You can remove the code in your html onclick="marking()" because you have already declared jQuery's $("input[type='button']").click(function() {...}); to handle the result calculation..

Code:

$("input[type='button']").click(function() {
  const q1 = +$("input[name='age']:checked").attr('data-mark');
  const q2 = +$("input[name='race']:checked").attr('data-mark');
  document.getElementById('result').value = q1 + q2;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <font size="4">What is your age?</font><br>
  <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked">
  <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp;
  <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24">
  <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br>
  <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59">
  <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp;
  <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74">
  <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li>

<li>
  <font size="4">Please specify your race</font><br>
  <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked">
  <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp;
  <input type="radio" name="race" id="M" data-mark='1' value="M">
  <label for="M"><font size="4">Malay</font></label><br>
  <input type="radio" name="race" id="I" data-mark='2' value="I">
  <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp;
  <input type="radio" name="race" id="O" data-mark='5' value="O">
  <label for="O"><font size="4">Others</font></label><br><br></li>

<input type="button" name="button" value="Get Value">
<input type="text" id="result" name="result" value="" readonly>

Answer 2

$("input[type='button']").click(function() {
    marking();
});

function marking() {
    let q1 = $("input[name='age']:checked").attr('data-mark');
    let q2 = $("input[name='race']:checked").attr('data-mark');
    var total = parseInt(q1) + parseInt(q2);

    document.getElementById('result').value = total;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
    <font size="4">What is your age?</font><br>
    <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked">
    <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp;
    <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24">
    <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br>
    <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59">
    <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp;
    <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74">
    <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li>

<li>
    <font size="4">Please specify your race</font><br>
    <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked">
    <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp;
    <input type="radio" name="race" id="M" data-mark='1' value="M">
    <label for="M"><font size="4">Malay</font></label><br>
    <input type="radio" name="race" id="I" data-mark='2' value="I">
    <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp;
    <input type="radio" name="race" id="O" data-mark='5' value="O">
    <label for="O"><font size="4">Others</font></label><br><br></li>

<input type="button" name="button" value="Get Value" onclick="marking()">
<input type="text" id="result" name="result" value="" readonly>