<html> <head> <title>Output Tags</title> </head> <body> <!-- Script to update the interest section --> <script> document.addEventListener("DOMContentLoaded", function(event) { var e = document.getElementById("myForm"); e.addEventListener("input", function() { this.thisRate.value = this.rate.value; this.amount.value = (this.principal.valueAsNumber * this.rate.valueAsNumber) / 100; }, false); }); </script> <!-- The actual form --> <form id="form"> <fieldset> <legend>Interest Calculator</legend> <label for="principal">Amount to invest: $</label> <input type="number" min="0" id="principal" name="principal" value="10000"> <p> <label for="rate">Interest Rate: </label> <input type="range" min="0" max="20" id="rate" name="rate" value="0"> <output id="thisRate" name="thisRate" for="range">0</output><span>%</span> </p> <p> Interest Received: <strong>$<output name="amount" for="principal rate">0</output></strong> </p> </fieldset> </form> </body> </html>
Output :
Topic :
Output Tags
