計算器顯示
[英]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.