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
– Siddharth Pal, Commented Sep 18, 2019 at 19:30
You have to supply more details but can look at stackoverflow.com/questions/19644906/… — Oleg Levin
– Oleg Levin, Commented Sep 18, 2019 at 19:31

Yaozhi Lu · Accepted Answer · 2019-09-18 20:05:24Z

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>

JDunken · Accepted Answer · 2019-09-18 20:06:46Z

0

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;

answered Sep 18, 2019 at 20:06

JDunken

4632 silver badges7 bronze badges

Collectives™ on Stack Overflow

Passing variables from HTML to JS back to HTML

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related