Passing variables from HTML to JS back to HTML

Question

I need to add the calculated membership fee to my membership application page for my amateur radio club. From what I read I need to use ID. But I am still having issues getting it to work. Below is a portion of the page that has the javascript in it. Any help is greatly appreciated.

                    <tr>
                        <td width="5%">&nbsp;</td>
                        <td class="bosytext" width="15%">Membership Period</td>
                            <td class="bosytext" width="75%"><input type="number" name="membershipterm"  id="term" required="required"> $22 for single year membership/ $20 per multi-year membership</td>
                            <td width="5%">&nbsp;</td>
                    </tr>
                    <tr>
                        <td width="5%">&nbsp;</td>
                        <td width="15%">Fee</td>
                        <script>
                    var fee;
                    var term;

                    if term = 1 {
                        (fee = 22;
                    } else {
                        fee = 20;
                    }
                    //calculates membership fee
                    var totalFee = (fee * term)
                    // outputs calced membership fee to html
                            document.getElementById('totalFee')
                    </script>
                        <td width="75%">id="totalFee</td>
                        <td width="5%">&nbsp;</td>
                    </tr>

Can you please reformat the question and it would be more helpful if u add simulated code which can run. — Siddharth Pal, Sep 18 '19 at 19:30
You have to supply more details but can look at https://stackoverflow.com/questions/19644906/how-to-pass-variable-from-external-javascript-to-html-form — Oleg, Sep 18 '19 at 19:31

score 0 · Accepted Answer · answered Sep 18 '19 at 20:05

Your code has lots of syntax errors.

Try this:

<html>

<body>

<table style="width:100%">

                    <tr>
                        <td class="bosytext" width="15%">Membership Period</td>
                            <td class="bosytext" width="75%">
                                <input type="number" name="membershipterm" id="term" required="required">
                                <button onclick="calc()">calc</button> 
                                $22 for single year membership/ $20 per multi-year membership </td>

                    </tr>

                    <tr>
                        <td width="15%">Fee</td>

                        <td width="75%" id="totalFee"></td>                       

                    </tr>
</table>



  <script>
    function calc(){
        var term = document.getElementById('term').value;
        var fee;

               if (term == 1) {
                        fee = 22;
                    } else {
                        fee = 20;
                    }


                    var totalFee = (fee * term);

                    document.getElementById('totalFee').innerHTML = totalFee

    }
  </script>                    

</body>
</html>

score 0 · Answer 2 · answered Sep 18 '19 at 20:06

In HTML id is used as a link to an HTML element. You set it in the tag you want to reference:

<td width="75%" id="totalFee></td>

You can then get that tag and manipulate it from js:

let total_Fee = (fee * term);
document.getElementById('totalFee').value = total_Fee;

Passing variables from HTML to JS back to HTML

2 Answers2