通过单击按钮调用具有返回值的函数时的正确做法 [英] Proper Practice when Calling a Function with a Return value From Button Click
问题描述
<html>
<head>
<script type="text/javascript">
function add(a,b) {
var result = parseInt(a) + parseInt(b)
return result
}
</script>
</head>
<body>
<input type="text" name="numberOne" id="txtNumberOne" />
<input type="text" name="numberTwo" id="txtNumberTwo" />
<!-- <input type="button" id="btnClick" value="Add" /> -->
<button id="btnClick">Add</button>
<p id="answer"></p>
<script>
document.getElementById("btnClick").addEventListener("click", function(){
var view = add(document.getElementById('txtNumberOne').value, document.getElementById('txtNumberTwo').value )
document.getElementById("answer").innerHTML = view;
});
</script>
</body>
</html>
问题：
当调用带有返回值的函数时，如何捕获结果并显示结果？
When calling a function with a return value, how would I go about capturing the result and displaying it?
上面的代码可以做到这一点，但是正确的做法是这样做的吗？我创建了一个addListnerEvent，当用户单击按钮时，它将调用返回答案的函数，innerHTML将显示答案。如果没有，正确的做法是什么？
The above code does that, however, it is proper practice to do it that way? I created an addListnerEvent, and when the user clicks the button it calls the function which returns the answer, the innerHTML displays the answer. If not, what is the proper practice?
推荐答案
这就是我要这样做的方式。但是请注意，我缺少一些相关信息。几点注意事项：
This is how I would do it. Note however that I'm lacking some relevant information. Few notes:
- 这只是一个答案，但是有很多不同的答案
- I假设这两个输入确实彼此唯一。因此，您不需要总和（input [i]），但需要总和（a，b）。否则，真的会有所不同
- 我将使用
document.querySelector（）语法，这与jQuery和其他语法更相似库使用 - 该表格完全没有意义。 HTML是语义的，因此请返回其语义。我假设这是某种银行对帐单，但是请更改名称以适合您的项目
- This is just an answer but there are many different kind of answers
- I'll assume that the two inputs are indeed unique each other. So you don't want a sum(input[i]), but you want a sum(a, b). It would be really different otherwise
- I will use the
document.querySelector()syntax, which is more similar to what jQuery and other libraries use - The form is completely meaningless. HTML is semantic, so give it its semantics back. I'll assume this is some kind of bank statement, but please change the names to suit your project
查看jsfiddle中的演示。代码：
<html>
<body>
<!-- inputs belong to a form -->
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button class="gettotal">Add</button>
</form>
<p class="total"></p>
<!-- scripts are better at the end of the body -->
<script>
// Retrieve a number from an input element
function getNumber(selector) {
var rawValue = document.querySelector(selector).value;
return parseInt(rawValue);
}
// Sum the value when submitting the form
document.querySelector(".totalpayment").addEventListener("submit", function(e){
e.preventDefault();
var paid = getNumber('.paid');
var due = getNumber('.due');
document.querySelector(".total").innerHTML = paid + due;
});
</script>
</body>
</html>
或者与jQuery配合使用，可以使您的生活更加轻松，而且这确实很普遍。 请参阅jsfiddle中的演示。代码：
Or with jQuery, using it makes your life much easier and it's really commonplace. See the demo it in jsfiddle. Code:
<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>
在不使用库的情况下，addEventListener和innerHTML都是当前的最佳实践（比 onclick ）。
Both addEventListener and innerHTML are best practices currently when using no library (much better than element.onclick or inline onclick anyway).
这篇关于通过单击按钮调用具有返回值的函数时的正确做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
