我開始制作互動式評分卡。
目標是選擇一個你會如何評價的數字，然后提交你的答案。
我想選擇一個數字，然后用 eventlistner 將所選數字的 div 元素的背景從當前背景更改為另一種顏色。到目前為止，我有提交按鈕，并在按鈕后的卡片上收到感謝資訊。
這是您可以選擇評分的 5 個數字的 html
<div class="numbers">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
這是例如第一個 div 的 css。所有 div 都具有相同的 css 代碼
.one {
width: 60px;
height: 60px;
color: var(--text-color);
background-color: var(--background-color-body);
border-radius: 50%;
justify-content: center;
align-items: center;
display: flex;
font-weight: 800;
}
我嘗試使用 for 回圈遍歷所有數字并單擊更改背景顏色
這是我試過的javascript代碼
addEventListener('click', myFunction);
{
function myFunction() {
var drugi = document.querySelectorAll('.numbers div');
for (i = 0; i <= element.length; i ) {
element[i].style.backgroundColor = 'white';
}
}
}
uj5u.com熱心網友回復：
.js您的代碼存在三個問題。首先，您的函式myFunction與事件偵聽器的作用域不同addEventListener('click', myFunction)。因此，要修復它，只需洗掉包裝它的鍵。其次，您使用的是elementbefore 宣告它。第三，回圈將為所有元素分配相同的顏色。white（注意不會注意到背景顏色）。
要修復它，只需在父級（即帶有 class 的 div 元素numbers）上使用事件委托模式并檢查是否target是div帶有 class 的元素，number然后更改背景顏色。
const numbers = document.querySelector('.numbers')
numbers.addEventListener('click', () => {
const target = event.target
if (target.className === 'numbers') return
target.style.backgroundColor = 'blue'
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/528309.html