javascript - 如何制作一个文本框和按钮，以便它触发 javascript 方法而不是发布？

Question

如何在 HTML 中创建文本框和按钮，以便当我单击它时，它将触发带有该值的 JavaScript 方法并在文本框/按钮下方输出结果？如果再次点击，它会继续在文本框/按钮下方添加新的输出行？

假设我有以下功能:

function double(number)
{
    return number * 2;
}

我想要一个文本框和按钮，所以如果我点击按钮三次，我会得到这个:

Textbox Here (value of 2) - Button here
4
4
4

这是如何完成的？我是否使用带有两个输入标签的表单？或者使用按钮标签？如何让它保持在文本框/按钮下方输出？

如果这个问题难以阅读，我很抱歉，我的英语不是很好。

Answer 1

像这样的事情就可以做到:

<script type="text/javascript">

function calculate() {
   var number = parseInt(document.getElementById('Number').value);
   document.getElementById('Result').innerHTML += double(number) + '<br/>';
}

function double(number) {
   return number * 2;
}

</script>

<input type="text" id="Number"/>
<input type="button" value="Calculate" onclick="calculate();"/>
<div id="Result"></div>