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>

如何通过HTML按钮显示JavaScript函数

1 个答案: