Javascript 计算器显示_Javascript

Javascript 计算器显示

javascript

Javascript 计算器显示,javascript,Javascript,我想在游戏中制作一个计算器来计算钱。我无法显示变量，尽管我认为我使用了正确的方法 <script type="text/javascript"> var score; var kr; var place; var result; window.addEventListener('load', onDocLoaded, false); function onDocLoaded(evt){ document.getElementById('myButton').addEvent

我想在游戏中制作一个计算器来计算钱。我无法显示变量，尽管我认为我使用了正确的方法

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


var评分；
var-kr；
var place；
var结果；
window.addEventListener（'load'，onDocLoaded，false）；
函数onDocLoaded（evt）{
document.getElementById（'myButton'）。addEventListener（'click'，krCalc，false）；
}
函数krCalc（）{
如果（位置===1&&score>0）{
kr=（分数/150）*1.5；
log（“分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”）；
document.getElementById（“result”）.innerHTML=“result:分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”；
}
如果（位置===2&&score>0）{
kr=（得分/150）*1.2；
log（“分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”）；
document.getElementById（“result”）.innerHTML=“result:分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”；
}
如果（排名>=3且得分>0）{
kr=（得分/150）；
log（“分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”）；
document.getElementById（“result”）.innerHTML=“result:分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”；
}
而（kr>10）{
kr=10；
}
}
地点



得分

结果：

虽然我不知道发生了什么，但我会在这篇文章中添加更多内容，并且一直在互联网上努力找出如何正确地做到这一点。当点击submit按钮时，由于某种原因，它会刷新页面，我不知道为什么。

带有

type=“submit”

的输入用于提交表单。将此更改为

type=“button”

将停止页面提交/刷新

当点击submit按钮时，由于某种原因，它会刷新页面不知道为什么

它通常会刷新页面，因为“提交”按钮将触发表单提交。普通表单如下所示：

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

</form>

但是，由于您没有在

标记中添加任何属性，因此从逻辑上讲，

操作的值将是当前页面，这意味着如果您提交表单，您将一次又一次地登录页面
如果您不想提交表单，请不要使用type=“submit”
。改用type=“button”
。或者为了简单起见，您也可以删除您的
标记。
type=“submit”这是一种特殊类型的按钮，用于尝试发送http请求。这就是您的站点正在加载的原因
试试这个：
<button onclick="myFunction()">Click me</button>

点击我
更新
score
和place
变量永远不会更新，因此if语句永远不会运行。提交表单时，您需要更新变量。尝试将此添加到krCalc
函数的顶部：
place = document.getElementsByName('place')[0].value;
score = document.getElementsByName('score')[0].value;

原始答案
正如其他人所说，正在提交表格。默认情况下，表单的操作是当前页面，这将重新加载页面
最好是监听表单的submit
事件（而不仅仅是单击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>


var评分；
var-kr；
var place；
var结果；
window.addEventListener（'load'，onDocLoaded，false）；
函数onDocLoaded（evt）{
document.getElementById（'myForm'）。addEventListener（'submit'，krCalc）；
}
函数krCalc（evt）{
evt.preventDefault（）；//这可以防止表单导致页面刷新
如果（位置===1&&score>0）{
kr=（分数/150）*1.5；
log（“分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”）；
document.getElementById（“result”）.innerHTML=“result:分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”；
}
如果（位置===2&&score>0）{
kr=（得分/150）*1.2；
log（“分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”）；
document.getElementById（“result”）.innerHTML=“result:分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”；
}
如果（排名>=3且得分>0）{
kr=（得分/150）；
log（“分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”）；
document.getElementById（“result”）.innerHTML=“result:分数为“+score+”的pts会让你在原地时获得“+kr+”kr“+place+”；
}
而（kr>10）{
kr=10；
}
}

并将ID添加到表单中：
<form id="myForm">
...
</form>


...

使用此选项，您可以将按钮的类型
保留为submit，这样按钮仍将提交表单。当表单提交时（通过单击此按钮或在关注字段时按enter键），JavaScript侦听器回调将启动。在事件对象上调用preventDefault
会阻止表单提交事件的默认操作。
谢谢，我现在使用的是按钮类型。@ImCasperr您的问题似乎是关于页面刷新的。应该更清楚地表明您在显示时遇到了问题。我会在回答这个问题时补充一些信息。另外，我建议使用此方法，而不是使用按钮type=“button”
，因为这是更好的做法。日志消息是否显示在控制台中？是的，它们是nathen，我在显示控制台消息之前就已经处理好了。请在“function krCalc（）{”之后直接添加一个console.log（“您的字符串”）。以便您可以检查是否将执行您的函数