在這里，我們有一個計數器應用程式，通過使用HTML、CSS和JavaScript來增加、減少和重置計數器，但我無法做到如何增加計數器和減少計數器以及重置計數器。
當ID為
decreaseBtn的HTML按鈕元素被點擊時。 如果計數是奇數，則減少計數器的值為-1，如圖所示。 如果計數是偶數，則減少計數器的值為-2，如圖所示。當id為increateBtn的HTML按鈕元素被點擊時。 如果計數是奇數，那么計數器的值將增加10，如圖所示。 如果計數是偶數，那么計數器的值將增加5，如圖所示。
當ID為resetBtn的HTML按鈕元素被點擊時。 將計數器的值設定為0.
當我們的網站上出現了一個新的計數器時，我們應該怎樣做？
輸出影像是計數器應用程式
>。
let counterElement = document. getElementById("counterValue") 。
function onIncrement（） {
let previousCounterValue = counterElement.textContent;
let updatedCounterValue = parseInt(previousCounterValue) 1。
if (upedCounterValue > 0) {
counterElement.style.color = "black"/span>;
}
else if (upedCounterValue < 0) {
counterElement.style.color = "black"/span>;
}
else {
counterElement.style.color = "black";
}
counterElement.textContent = updatedCounterValue;
}
function onDecrement（）{
let previousCounterValue = counterElement.textContent;
let updatedCounterValue = parseInt(previousCounterValue) - 1。
if (upedCounterValue > 0) {
counterElement.style.color = "black"/span>;
}
else if (upedCounterValue < 0) {
counterElement.style.color = "black"/span>;
}
else {
counterElement.style.color = "black";
}
counterElement.textContent = updatedCounterValue;
}
function onReset（）{
let counterValue = 0;
counterElement.textContent = counterValue。
counterElement.style.color = "black";
} @import url("https://fonts.googleapis.com/css2? family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&；family=Playfair Display: ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");
.counter-value {
字體大小。36px;
font-weight: 900;
}
.button {
color: #ffffff;
background-color: #0967d2;
字體大小。14px;
border-width: 0;
border-radius: 4px;
padding: 10px;
}<!DOCTYPE html>
<html>
<head> </head>
<body>
<p id="counterValue"/span> class="counter-value"/span>> 0</p>
< 按鈕 id="decreaseBtn" class="button" onclick="onDecrement()" > DECREASE</button>
< button id="resetBtn" class="button" onclick="onReset()" > RESET</button>。
< button id="enhanceBtn" class="button" onclick="onIncrement()" > INCREASE</button>
</body>/span>
</html>/span>預期的輸出是 計數器應用程式
uj5u.com熱心網友回復：
評論中的其他用戶已經解釋了關于如何檢查計數是奇數還是偶數。
。我想補充一個答案，它從一個稍微不同的角度來處理代碼，而且我經常發現它非常有用。
我們不提取計數器元素的textContent并將其決議為一個數字，而是保持一個數字變數。
我們給每個按鈕一個資料型別屬性，以及一個按鈕容器一個處理函式，并立即呼叫。
這樣做的原因是，我們可以使用一種叫做閉包的技術--一個從另一個函式回傳的函式，但保持對在它被回傳之前宣告的變數的參考。
我們可以將
count初始化。我們回傳閉包。
我們回傳閉包。
當任何按鈕被點擊時，事件在DOM中冒泡，并被容器中的監聽器捕獲（這被稱為事件委托。
我們檢查資料型別。我們根據型別和計數是奇數還是偶數來更新
count。最后我們更新計數器元素的文本。
- 最后我們更新計數器元素的文本。
//cache the elements.
const counterElement = document.querySelector('#counterValue'/span>) 。
const container = document.querySelector（'#container'）。
//為容器添加一個監聽器。
container.addEventListener('click', handleClick(), false) 。
//小函式來檢查是否 。
//計數是奇數還是偶數。
function isEven(count) {
return count % 2 === 0;
}
//初始化count變數; }
function handleClick(count = 0) {
//回傳一個新的函式（關閉）。
//作為當時將被呼叫的函式。
//按鈕被點擊時呼叫的函式。
return function（e）{
//從被點擊的按鈕中獲取按鈕型別。
const { type } = e.target.dataset。
//現在只需使用`switch`來更新計數。
switch(type) {
case 'decrease': {
if (isEven(count)) {
count = count - 2;
} else {
count = count - 1;
}
break;
}
case 'enhance': {
if (isEven(count)) {
count = count 5;
} else {
count = count 10;
}
break;
}
default:
case 'reset': count = 0; break;
}
//最后更新計數器元素。
counterElement.textContent = count;
}
}.counter-value {font-size: 36px; font-weight: 900; }
.button {color: #ffffff; background-color: #0967d2; 字體大小: 14px; border-width: 0; border-radius: 4px; padding: 10px;}< p id="counterValue" class="countervalue"> 0</p>
<div id="container">/span>
<button data-type="decrease" class="button"> DECREASE</button>
<button data-type="reset" class="button">> RESET</button>。
<button data-type="enhance" class="button"> INCREASE</button>
</div>uj5u.com熱心網友回復：
我是js新手，所以可能不是最好的解決方案。
。let count = 0;
const counter = document.getElementById("counterValue") 。
function isEven（num） {
return num % 2 ? false : true;
}
function onDecrement（） {
if (isEven(count)) {
count = count - 2;
} else {
count = count - 1;
}
counter.textContent = count;
}
function onReset（） {
count = 0;
counter.textContent = count;
}
function onIncrement（） {
if (isEven(count)) {
count = count 5;
} else {
count = count 10;
}
counter.textContent = count;
}.counter-value{
字體大小。36px;
font-weight: 900;
}
.button {
color: #ffffff;
background-color: #0967d2;
字體大小。14px;
border-width: 0;
border-radius: 4px;
padding: 10px;
}<!DOCTYPE html>
<html>
<head> </head>
<body>
<p id="counterValue"/span> class="counter-value"/span>> 0</p>
< 按鈕 id="decreaseBtn" class="button" onclick="onDecrement()" > DECREASE</button>
< button id="resetBtn" class="button" onclick="onReset()" > RESET</button>。
< button id="enhanceBtn" class="button" onclick="onIncrement()" > INCREASE</button>
</body>/span>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320422.html
標籤：
上一篇：在匯編中訪問引數