更改单选按钮时如何清除表单

Question

我想在单选按钮更改时清除表单。 示例性别为男性，我仅在体重输入中填写数字如果我更改性别，表格将清晰或当我在所有输入中填写数字并单击计算然后 BMR 显示我如果我更改性别，表格也会清晰。

window.addEventListener("load", () => {
    document.getElementById('calculate').addEventListener('click', toBmr);
});

const toBmr = () => {
    const gender = document.querySelector('[name=gender]:checked').value;
    let weight = +document.getElementById('weight').value;
    let height = +document.getElementById('height').value;
    let age = +document.getElementById('age').value;

    if (weight && age && height) {
        let result = (10 * weight) + (6.25 * height) - (5 * age)
        result += gender === 'male' ? 5 : -161; 
        document.getElementById('result').innerHTML = result.toFixed(2);
        document.getElementById('showResult').style.display = "block";
    }
};

const clearForm = () => {
    document.getElementById('do-form').reset();
    document.getElementById('showResult').style.display = "none";
}

const changeGender = () => {
    let form = toBmr();
    let r = document.getElementById('showResult').style.display;
    if (r == "block") {
        form = document.querySelector('[name=gender]:checked').addEventListener('change', clearForm());
    } 
}

<form name="do-form" id="do-form">
<p>BMR Calculator</p>
<div id="selectGender" onchange="changeGender()">
  <p>Gender:
    <input type="radio" name="gender" value="male">Male
    <input type="radio" name="gender" value="female">Female
  </p>
</div>
<p>Weight:&nbsp;<input type="number" name="weight" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;">&nbsp;kg</p>
<p>Height:&nbsp;<input type="number" name="height" id="height" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;">&nbsp;cm</p>
<p>Age:&nbsp;<input type="number" name="age" id="age" size="10" maxlength="3" onkeypress="if(this.value.length > 2) return false;"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" onclick="clearForm()">Clear</button><br><br>
<div class="row-result-tab" id="showResult" style="display:none;">
  <label>BMR = &nbsp;<span id="result"></span>&nbsp;calories/day</label>
</div>

Answer 1

使用form.reset()然后检查按钮

 clearForm = (el) => { document.querySelector("#f1").reset(); // reset the form el.checked = true; // since we passed the element into the function we can simply check it }

 <form id="f1"> <input type="text" name="t" /><br /> <input type="radio" id="b1" name="b" value="b1" onclick="clearForm(this)" /> <label for="b1">b1</label><br> <input type="radio" id="b2" name="b" value="b2" onclick="clearForm(this)" /> <label for="b2">b2</label><br> </form>