Passing variables from HTML to JS back to HTML Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Passing variables from HTML to JS back to HTML without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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>

Answer

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>
We are here to answer your question about Passing variables from HTML to JS back to HTML - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji