Question

我正在尝试为游戏赚钱的计算器。我无法显示变量，尽管我认为即时通讯使用的是正确的方法。

<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>

尽管我不知道发生了什么，但我会在这篇文章中添加更多内容，并且已经在Internet上尝试找出如何正确执行此操作。单击提交按钮时，由于某种原因刷新页面，我不知道为什么。

Answer 1

带有type="submit"的输入用于提交表单。将其更改为type="button"将阻止页面提交/刷新。

Answer 2

当点击“提交”按钮时，由于某种原因刷新页面不知道为什么。

由于提交按钮将触发表单提交，因此通常会刷新页面。普通形式如下所示：

<form class="" action="index.php" method="post">

</form>

但是由于您没有在<form>标记中添加任何属性，因此从逻辑上讲，action的值将是当前页面，这意味着如果您提交表单，则可以您的页面一次又一次。

如果您不希望提交表单，请不要使用type="submit"。请改用type="button"。或者，为简单起见，您也可以删除<form>标签。

Answer 3

type =“ submit”是尝试发送http请求的按钮的特殊类型。这就是您的网站正在加载的原因。

尝试一下：

<button onclick="myFunction()">Click me</button>

Answer 4

更新

score和place变量永远不会更新，因此if语句永远不会运行。提交表单时，您需要更新变量。尝试将其添加到krCalc函数的顶部：

place = document.getElementsByName('place')[0].value;
score = document.getElementsByName('score')[0].value;

原始答案

正如其他人所说，该表格正在提交中。表单的操作默认为当前页面，它将重新加载页面。

最好监听表单的submit事件（而不仅仅是单击提交按钮），因为当聚焦于某个字段时，它还会捕获按下Enter键：

<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可以防止表单提交事件的默认操作。

计算器显示

4 个答案:

更新

原始答案