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

【问题标题】：How to display JavaScript function via HTML button如何通过 HTML 按钮显示 JavaScript 函数
【发布时间】：2019-05-30 12:13:00
【问题描述】：

我想使用 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>

【问题讨论】：

那么您的代码的实际问题是什么？是否报告错误？有任何事情发生吗？
你的问题其实是一个陈述
代码运行良好，但它会自动显示最小的数字，而我想用按钮显示它...
您正在附加一个input 事件侦听器。添加一个按钮并附加一个执行相同工作的单击事件侦听器。

标签： javascript html forms button

【解决方案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>

【讨论】：