[英]How to display JavaScript function via HTML button
I want to display the smallest entered number using HTML button. 我想使用HTML按钮显示输入的最小数字。 HTML form gets 3 numbers from user and using JavaScript it displays the smallest number on button click. 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>
Just add a button to your form and attach an event-listener for the click
event to it. 只需在表单中添加一个按钮,并将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.