如何通過其值jquery增加一個數字

Question

我有一個按鈕，當單擊它時，它應該采用一個隨機數，並在單擊該按鈕時將其原始值添加回其當前值。 例如，如果隨機數 (var diamondGuess) 為 10，則數字 10 首先出現在 div (id="d-num-test") 中。 每當您單擊按鈕時，應將 10 添加到顯示在 div 中的數字值。 隨機數函數在輪次重置之前不會選擇新的隨機數。

因此，如果我從 10 開始並單擊按鈕，頁面上的 div id="d-num-test" 應該更改為 20。 再次單擊，它是 30，然后是 40，等等......我嘗試研究各種運算符和數學方法，但我得到的最接近的是 +=。 如果 10 不是隨機選擇，這將起作用。 我用變量本身嘗試了 +=，但它成倍增加（使用上面的例子是 10、20、40、80）。

任何建議將不勝感激！ 新手來了

謝謝！ 奧利弗

 $(document).ready(function() { var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; var diamondGuess = diamondNum[Math.floor(Math.random() * diamondNum.length)]; var diamondNumDom = $('#d-num-test'); diamondNumDom.text(diamondGuess); $('#diamond').on("click", function() { diamondNumDom.text(diamondGuess += diamondGuess); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="d-num-test"></div> <button id="diamond"></button>

Answer 1

為了防止覆蓋你的diamondGuess值，你需要引入一個額外的變量（下面代碼段中的diamondValue ）來跟蹤當前值：

 $(document).ready(function() { var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; var diamondGuess = diamondNum[Math.floor(Math.random() * diamondNum.length)]; var diamondValue = diamondGuess; var diamondNumDom = $('#d-num-test'); diamondNumDom.text(diamondValue); $('#diamond').on("click", function() { diamondValue += diamondGuess; diamondNumDom.text(diamondValue); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="d-num-test"></div> <button id="diamond"></button>

Answer 2

下面是一個 VanillaJS（無 jQuery）示例，說明如何完成此操作。 您的邏輯中的一個問題是diamondGuess += diamondGuess ，這意味着猜測會呈指數增長（正如您所經歷的那樣）。

您可以通過使用 textContent 的值來避免這種情況，或者像我在下面所做的那樣使用數據屬性。 因為 data-* 屬性存儲一個字符串，所以我使用一元加號（ +前綴）將字符串轉換為數值（如+numBox.dataset.value + +numBox.dataset.guess ）。

這種方法的好處是它將猜測和值耦合到元素。 只需稍加工作，您就可以將id轉換為class和其他一些最小調整，並且您可以在同一頁面上擁有獨立的計算器。

 var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; let numBox = document.querySelector('#d-num-test'); // Initialize values & attach guess to element numBox.dataset.guess = diamondNum[Math.floor(Math.random() * diamondNum.length)]; numBox.dataset.value = numBox.dataset.guess; numBox.textContent = numBox.dataset.guess; // Click Event document.addEventListener('click', function(e) { if (e.target.matches('#diamond')) { let numBox = document.querySelector('#d-num-test'); numBox.dataset.value = +numBox.dataset.value + +numBox.dataset.guess; numBox.textContent = numBox.dataset.value; } }, false);

 <div id="d-num-test"></div> <button id="diamond">Diamond</button>