亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 ForEach 更改背景的按鈕?

如何使用 ForEach 更改背景的按鈕?

一只萌萌小番薯 2023-09-21 17:21:18
我想用 JS 創建 4 個按鈕,僅使用 ForEach 更改容器的背景。我已經使用 foreach 準備好了 4 個按鈕,但背景的顏色沒有改變。有什么幫助嗎?這是我的代碼:let color_ar = ["yellow", "green", "blue", "silver"];let buttons_ar = ["btn btn-warning", "btn btn-success", "btn btn-primary", "btn btn-secondary"];window.onload = function() {    createBtn();}function createBtn() {    buttons_ar.forEach(function(item, i) {        document.querySelector("#id_container").innerHTML += `<button id="id_button" class="${item}">${color_ar[i]}</button>`        document.querySelector("#id_button").addEventListener("click", function() {            i = 0;            document.querySelector("#id_container").style.background = color_ar[i++];        });    })}
查看完整描述

1 回答

?
慕田峪7331174

TA貢獻1828條經驗 獲得超13個贊

您使用的id_button是點擊,它僅適用于第一項,因為 ID 是唯一的。


這是一種做你想做的事的方法


const color_ar = ["yellow", "green", "blue", "silver"],

  buttons_ar = ["btn btn-warning", "btn btn-success", "btn btn-primary", "btn btn-secondary"];


function createBtn() {

  buttons_ar.forEach((item, i) => {

    document.querySelector("#id_container").innerHTML += `<button id="id_button" class="${item}">${color_ar[i]}</button>`

    document.querySelectorAll('.btn').forEach(el => el.addEventListener('click', e => e.currentTarget.parentElement.style.background = e.currentTarget.textContent))

  })

}


window.addEventListener('load', () => {

  createBtn();

})

<div id='id_container'></div>


查看完整回答
反對 回復 2023-09-21
  • 1 回答
  • 0 關注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號