在Javascript中點擊計數器實現

我在使用Javascript實現點擊計數器時遇到了一些問題。我用Google搜索了一下，但我無法弄清楚我的代碼中的錯誤。在Javascript中點擊計數器實現

在下面的筆中，我使用了guesses變量作爲計數器。似乎每次我點擊提交，我的guesses變量被重置爲零。

我也是在這裏粘貼代碼片段：

//let targetNumber = Math.floor(Math.random() * 10) + 1; 
 
let targetNumber = 6; 
 
var guesses = 0; 
 

 
function init() { 
 
    var button = document.getElementsByTagName("button")[0]; 
 
    button.addEventListener("click", function() { 
 
    var guess = document.getElementsByName("number")[0]["value"]; 
 
    guesses += 1; 
 
    guess = parseInt(guess); 
 
    check(guess); 
 
    }); 
 

 
} 
 

 
function check(value) { 
 
    if (guesses < 5) { 
 
    if (value === targetNumber) { 
 
     showWin(); 
 
    } else { 
 
     showError(); 
 
    } 
 
    } else { 
 
    showLoss(); 
 
    } 
 
} 
 

 
function showWin() { 
 
    var p = document.createElement("P"); 
 
    var t = document.createTextNode("You Won!"); 
 
    p.appendChild(t); 
 
    document.body.appendChild(p); 
 

 
    //document.getElementsByTagName("p")[0].innerHTML = "You Won!"; 
 
    document.getElementsByTagName("form")[0].style.display = "none"; 
 
} 
 

 
function showError() { 
 
    var p = document.createElement("P"); 
 
    var t = document.createTextNode("Incorrect Guess! Try again."); 
 
    p.appendChild(t); 
 
    document.body.appendChild(p); 
 
} 
 

 
function showLoss() { 
 
    var p = document.createElement("P"); 
 
    var t = document.createTextNode("You Lost!"); 
 
    p.appendChild(t); 
 
    document.body.appendChild(p); 
 
    document.getElementsByTagName("form")[0].style.display = "none"; 
 
} 
 

 
init();

<p>Guess a number between 1 and 10</p> 
 
<form> 
 
    <input type="text" name="number"> 
 
    <button>Submit</button> 
 
</form>

來源

2016-07-21 Prashant Sethi

您需要停止提交表單 - 您可以通過將事件傳回給函數，然後使用內置的preventDefault()函數來完成此操作。

見下面的代碼 - 我已經加入註釋行，我已經改變

//let targetNumber = Math.floor(Math.random() * 10) + 1; 
 
let targetNumber = 6; 
 
var guesses = 0; 
 

 
function init() { 
 
    var button = document.getElementsByTagName("button")[0]; 
 
    button.addEventListener("click", function(e) { // pass event back here 
 
    e.preventDefault(); // prevent default action of button - stops form being submitted 
 
    var guess = document.getElementsByName("number")[0]["value"]; 
 
    guesses += 1; 
 
    guess = parseInt(guess); 
 
    check(guess); 
 
    }); 
 

 
} 
 

 
function check(value) { 
 
    if (guesses < 5) { 
 
    if (value === targetNumber) { 
 
     showWin(); 
 
    } else { 
 
     showError(); 
 
    } 
 
    } else { 
 
    showLoss(); 
 
    } 
 
} 
 

 
function showWin() { 
 
    var p = document.createElement("P"); 
 
    var t = document.createTextNode("You Won!"); 
 
    p.appendChild(t); 
 
    document.body.appendChild(p); 
 

 
    //document.getElementsByTagName("p")[0].innerHTML = "You Won!"; 
 
    document.getElementsByTagName("form")[0].style.display = "none"; 
 
} 
 

 
function showError() { 
 
    var p = document.createElement("P"); 
 
    var t = document.createTextNode("Incorrect Guess! Try again."); 
 
    p.appendChild(t); 
 
    document.body.appendChild(p); 
 
} 
 

 
function showLoss() { 
 
    var p = document.createElement("P"); 
 
    var t = document.createTextNode("You Lost!"); 
 
    p.appendChild(t); 
 
    document.body.appendChild(p); 
 
    document.getElementsByTagName("form")[0].style.display = "none"; 
 
} 
 

 
init();

<p>Guess a number between 1 and 10</p> 
 
<form> 
 
    <input type="text" name="number"> 
 
    <button>Submit</button> 
 
</form>

來源

2016-07-21 13:54:05 Pete

謝謝皮特。 @HaukurHaf，你的回答也起作用。我剛剛接受了這個答案，因爲它向我介紹了一個具有有用功能的新功能（我是一名初學者）。 –

不客氣，很高興我能幫忙:) – Pete

在你的代碼筆，表單提交，導致頁面重新加載。所以你總是重新開始，每次都將猜測變量重置爲0。

最簡單的方法是將type="button"添加到button元素，以防止它自動提交表單。默認情況下，按鈕類型是「submit」，這使得它們提交包含表單（如果有的話）。

來源

2016-07-21 13:39:41 HaukurHaf

在Javascript中點擊計數器實現

回答

相關問題