How to make an output fields value change based on whether or not a checkbox is selected?

How could I make this code work. It has an input field called diameter and another field called weight. I want the weight field to be the output field which outputs a number based on the the number in the diameter field and whether the checkbox is selected.


<legend>Distance Per rotation Calculator</legend>
	<div class="main">
		<label for="diameter">Diameter (in)</label>
		<input id="diameter" name="diameter" type="number"  step="0.01" min="0" />

<label for="checkHolonomic">
    <input type="checkbox" id="checkHolonomic" />
<br />
<br />
<p> Holonomic Drive</p><br>
	<input id="submit" type="submit" onclick = "CheckForHolonomic()" value="Calculate Distance" />
    <label for="submit" class="submit">
    <span class="slider round"></span>
		<label for="weight">Distance (in)</label>
		<input id="weight" name="weight" type="number" />
<script type="text/javascript">
    function CheckForHolonomic() {
        var checkHolonomic = document.getElementById("checkHolonomic");
        if (checkHolonomic.checked) {
            return (1 * diameter);
        } else {
             return (2 * diameter);

You must set 3 event listeners:

  • On change and keyup event of diameter input
  • On change event of checkHolonomic

All must do the same calculate the distance when fire up, check it

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.