僅在單擊按鈕時更改顯示

Question

在調用按鈕上的單擊事件后，我試圖更改位於表單內的 div 的顯示。 但是，div 默認在頁面加載時不顯示任何內容。 只有在按鈕上發生點擊事件時，如何才能使 div 更改顯示？

 const btn = document.getElementById('btn'); const userData = {}; function getUserData() { let formContainer = document.getElementsByClassName('form-container')[0]; formContainer.classList.add('hide'); console.log('inside getUserData'); let name = document.getElementById('name').value; let feet = document.getElementById('feet').value; let inches = document.getElementById('inches').value; let diet = document.getElementById('diet').value; console.log(name + ' ' + feet); } btn.addEventListener('click', getUserData());

 <form id="dino-compare"> <div class="form-container"> <p>Name:</p> <input id="name" class="form-field__full" type="name" name="name"> <p>Height</p> <label>Feet: <input id="feet" class="form-field__short" type="number" name="feet"></label> <label>inches: <input id="inches" class="form-field__short" type="number" name="inches"></label> <p>Weight:</p> <label><input id="weight" class="form-field__full" type="number" name="weight">lbs</label> <p>Diet:</p> <select id="diet" class="form-field__full" name="diet"> <option>Herbavor</option> <option>Omnivor</option> <option>Carnivor</option> </select> <div id="btn" onclick="getUserData()">Compare Me!</div> </div> </form>

Answer 1

而不是在 html 屬性onclick中傳遞 function 只需使用 javascript 一個並在其上分配您定義的 function 如下所示

例子

 const btn = document.getElementById('btn'); const userData = {}; function getUserData() { let formContainer = document.getElementsByClassName('form-container')[0]; formContainer.classList.add('hide'); console.log('inside getUserData'); let name = document.getElementById('name').value; let feet = document.getElementById('feet').value; let inches = document.getElementById('inches').value; let diet = document.getElementById('diet').value; console.log(name + ' ' + feet); } btn.onclick = () => getUserData();

 <form id="dino-compare"> <div class="form-container"> <p>Name:</p> <input id="name" class="form-field__full" type="name" name="name"> <p>Height</p> <label>Feet: <input id="feet" class="form-field__short" type="number" name="feet"></label> <label>inches: <input id="inches" class="form-field__short" type="number" name="inches"></label> <p>Weight:</p> <label><input id="weight" class="form-field__full" type="number" name="weight">lbs</label> <p>Diet:</p> <select id="diet" class="form-field__full" name="diet"> <option>Herbavor</option> <option>Omnivor</option> <option>Carnivor</option> </select> <div id="btn">Compare Me!</div> </div> </form>