如何通過HTML按鈕顯示JavaScript功能

Question

我想使用HTML按鈕顯示輸入的最小數字。 HTML表單從用戶獲取3個數字，並使用JavaScript顯示按鈕單擊時的最小數字。

<form id="3nr">
  <p><input type="number" placeholder="Numri i pare..."></p>
  <p><input type="number" placeholder="Numri i dyte..."></p>
  <p><input type="number" placeholder="Numri i trete..."></p>
  <p>Numri me i vogel = <output name="min"></output></p>

</form>

        <script type="text/javascript">
    const form = document.querySelector('form')
const inputs = form.querySelectorAll('input[type="number"]')
const out = document.querySelector('output')

form.addEventListener('input', e => {
  out.value = Math.min(...Array.prototype.map.call(inputs, input => input.value))
}, false)
        </script>

Answer 1

只需在表單中添加一個按鈕，並將click事件的事件監聽器附加到該表單即可。

 const action = document.getElementById('action'); const form = document.querySelector('form') const inputs = form.querySelectorAll('input[type="number"]'); const out = document.querySelector('output'); action.addEventListener('click', e => { e.preventDefault(); // do not submit the form on click of our button out.value = Math.min(...Array.prototype.map.call(inputs, input => input.value)) }, false) 

 <form id="3nr"> <p><input type="number" placeholder="Numri i pare..."></p> <p><input type="number" placeholder="Numri i dyte..."></p> <p><input type="number" placeholder="Numri i trete..."></p> <p><button id="action">Display</button></p> <p>Numri me i vogel = <output name="min"></output></p> </form>