计算器显示
[英]Calculator displaying
问题描述
我试图在游戏中赚钱的计算器。 我无法显示变量，尽管我认为即时通讯使用了正确的方法。
<script type="text/javascript">
var score;
var kr;
var place;
var result;
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt){
document.getElementById('myButton').addEventListener('click', krCalc, false);
}
function krCalc() {
if (place === 1 && score > 0){
kr = (score/150) * 1.5;
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
if (place === 2 && score > 0){
kr = (score/150) * 1.2;
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
if (place >= 3 && score > 0) {
kr = (score/150);
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
while (kr>10){
kr = 10;
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<form>
Place<br>
<input type="text" name="place" autocomplete="off"><br>
Score<br>
<input type="text" name="score" autocomplete="off">
<input id="myButton" type="submit" value="Submit">
</form>
<p id="result">Result:</p>
</body>
</html>
尽管我不知道发生了什么，但我会在这篇文章中添加更多内容，并且一直在互联网上试图找出如何正确执行此操作的方法。 当单击提交按钮时，由于某种原因刷新页面，我不知道为什么。
4 个解决方案
解决方案1
1 2018-10-30 00:43:46
type="submit"的输入用于提交表单。 将其更改为type="button"将阻止页面提交/刷新。
解决方案2
0 2018-10-30 00:44:36
当单击提交按钮时，由于某种原因刷新页面，我不知道为什么。
通常会刷新页面，因为“提交”按钮将触发表单提交。 普通形式如下所示：
<form class="" action="index.php" method="post">
</form>
但是，由于您没有在<form>标记中放置任何属性，因此从逻辑上讲， action的值将是当前页面，这意味着，如果您提交表单，则将一次又一次地进入页面。
如果您不希望提交表单，请不要使用type="submit" 。 改用type="button" 。 或简单起见，您也可以删除<form>标记。
解决方案3
0 2018-10-30 00:44:38
type =“ submit”，它是按钮的一种特殊类型，它尝试发送http请求。 这就是您的网站正在加载的原因。
尝试这个：
<button onclick="myFunction()">Click me</button>
解决方案4
0 2018-10-30 00:48:38
更新
score和place变量永远不会更新，因此if语句永远不会运行。 提交表单时，您需要更新变量。 尝试将其添加到krCalc函数的顶部：
place = document.getElementsByName('place')[0].value;
score = document.getElementsByName('score')[0].value;
原始答案
正如其他人所说，该表格正在提交中。 默认情况下，表单的操作是当前页面，它会重新加载页面。
最好侦听表单的submit事件（而不只是单击submit按钮），因为当关注某个字段时，它还会捕获按回车键：
<script type="text/javascript">
var score;
var kr;
var place;
var result;
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt){
document.getElementById('myForm').addEventListener('submit', krCalc);
}
function krCalc(evt) {
evt.preventDefault(); // this prevents the form from causing page refresh
if (place === 1 && score > 0){
kr = (score/150) * 1.5;
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
if (place === 2 && score > 0){
kr = (score/150) * 1.2;
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
if (place >= 3 && score > 0) {
kr = (score/150);
console.log("A score of "+score+"pts gets you "+kr+" KR while in place "+place+".");
document.getElementById("result").innerHTML = "Result: A score of "+score+"pts gets you "+kr+" KR while in place "+place+".";
}
while (kr>10){
kr = 10;
}
}
</script>
并将ID添加到表单中：
<form id="myForm">
...
</form>
使用此选项，您可以将按钮的type保留为提交，因此按钮仍将提交表单。 表单提交后（通过单击此按钮或在专注于字段时按Enter），将触发JavaScript侦听器回调。 在事件对象上调用preventDefault可以防止表单提交事件的默认操作。
在java / html成绩计算器中显示计算答案的问题
[英]Issues with displaying answer of calculations in java/html Grade Calculator
带有数字和单选按钮的 Javascript/HTML 计算器未显示 output
[英]Javascript/HTML Calculator with numbers and radio buttons is not displaying output
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.