Get reset a value from drop down list-CodePudding

I do simple volume calculations for shapes. Every time the user selects a different figure reset the select value to an empty field. I've tried reset() but it clears all options. I would like it to be done automatically, and not with a button each time I select a different option.

<form action="javascript:calculate()" onchange="javascript:upform()">

<label for="id_shapes">List</label>
<select id="id_shapes" > 
    <option value="sphere" selected>sphere</option>
    <option value="cone">cone</option>
</select>

<br><br>
<div id="id_inputs_sphere" >
    <label for="id_radius">radius</label>
    <input id="id_radius" type="number" min="0" step="any">
    <h2><em>formula: = 4/3*&Pi;*R<sup>3</sup></em></h2>
</div>


<div id="id_inputs_cone" hidden>
    <label for="id_radius2">radius</label>
    <input id="id_radius2" type="number" min="0" step="any">
    <label for="id_height2">height</label>
    <input id="id_height2" type="number" min="0" step="any">
    <h2><em>formula: = 1/3*&Pi;*R<sup>2</sup>*H</em></h2>

</div>

<input type="submit" value="Calculate">
<p id="id_output"></p>
</form>

<script>  

function upform() {
        
        document.getElementById("id_inputs_sphere").hidden = true;
        document.getElementById("id_inputs_cone").hidden = true;

        let shape = document.getElementById("id_shapes").value;
        switch (shape) {
            case "sphere":
                document.getElementById("id_inputs_sphere").hidden = false;
                break;
            case "cone":
                document.getElementById("id_inputs_cone").hidden = false;
                break;
        }
    }

    

    

function calculate() {

let shape = document.getElementById("id_shapes").value;
let area = 0;
switch (shape) {
    case "sphere":
        let radius = document.getElementById("id_radius").value;
        area = 4/3 * Math.PI * radius**3;
        document.getElementById("id_output").innerHTML = "result = "   area;
        break;
    case "cone":
        let radius2 = document.getElementById("id_radius2").value;
        let height2 = document.getElementById("id_height2").value;
        area = 1/3 * Math.PI * radius2**2 * height2
        document.getElementById("id_output").innerHTML = "result = "   area;
        break;        
}
}

CodePudding user response：

Hi you can do this with an event listener and some function that list every item you want to clear e.g:

the function:

const clear_inputs = ()=>{
    let inputs = document.querySelectorAll('input[type="number"]');
      console.log(inputs);
      inputs.forEach(element=>{
      element.value = "";
      })
    }

Keep in mind that this particular function get all the inputs that have the type "number" so if you want to get other input types or an especific one you might want to specify those elements with their own id property.

the event listener:

 document.getElementById("id_shapes").addEventListener("change",()=>{
    clear_inputs();
    })

this event listener is triggered by your select box which list your shapes.

here's the jsfiddle if you want to check it out.

sorry for the bad english, hope it helps.