首頁猿問多次單擊按鈕時如何更改...

多次單擊按鈕時如何更改 inner.HTML

JavaScript

繁花如伊 2023-03-18 11:07:46

單擊按鈕時，我試圖更改按鈕文本和樣式。代碼在將“生成”更改為“重置”按鈕時有效，但從“重置”到“生成”卻不起作用。似乎代碼只是在第一次點擊時才起作用。我怎樣才能解決這個問題？// Change Generate Button to Reset#let generateBtn = document.getElementById("generateBtn");generateBtn.addEventListener("click", () => { if ((generateBtn.innerHTML = "GENERATE")) { generateBtn.innerHTML = "RESET"; generateBtn.classList.add("resetBtn-shown"); } else { generateBtn.innerHTML = "GENERATE"; generateBtn.classList.remove("resetBtn-shown"); }});.generateBtn-shown { background-color: red; color: #eba341; font-size: 1.5rem; font-weight: 500; border-radius: 0.5rem; width: 10rem; height: 3rem; border: none;}.resetBtn-shown { background-color: #21b884; color: white;}<button id="generateBtn" class="generateBtn-shown">GENERATE</button>

查看完整描述

3 回答

慕絲7291255

TA貢獻1859條經驗獲得超6個贊

在if聲明中，你需要有==而不是等于。所以在你的情況下它需要是：

if ((generateBtn.innerHTML == "GENERATE")) {

// Change Generate Button to Reset#

let generateBtn = document.getElementById("generateBtn");

generateBtn.addEventListener("click", () => {

? if ((generateBtn.innerHTML == "GENERATE")) {

? ? generateBtn.innerHTML = "RESET";

? ? generateBtn.classList.add("resetBtn-shown");

? } else {

? ? generateBtn.innerHTML = "GENERATE";

? ? generateBtn.classList.remove("resetBtn-shown");

? }

});

.generateBtn-shown {

? background-color: red;

? color: #eba341;

? font-size: 1.5rem;

? font-weight: 500;

? border-radius: 0.5rem;

? width: 10rem;

? height: 3rem;

? border: none;

}

.resetBtn-shown {

? background-color: #21b884;

? color: white;

}

<button id="generateBtn" class="generateBtn-shown">GENERATE</button>

反對回復 2023-03-18

有只小跳蛙

TA貢獻1824條經驗獲得超8個贊

// Change Generate Button to Reset#

let generateBtn = document.getElementById("generateBtn");

generateBtn.addEventListener("click", () => {

if ((generateBtn.innerHTML === "GENERATE")) { //=== instead of =

generateBtn.innerHTML = "RESET";

generateBtn.classList.add("resetBtn-shown");

} else {

generateBtn.innerHTML = "GENERATE";

generateBtn.classList.remove("resetBtn-shown");

}

});

.generateBtn-shown {

background-color: red;

color: #eba341;

font-size: 1.5rem;

font-weight: 500;

border-radius: 0.5rem;

width: 10rem;

height: 3rem;

border: none;

}

.resetBtn-shown {

background-color: #21b884;

color: white;

}

<button id="generateBtn" class="generateBtn-shown">GENERATE</button>

反對回復 2023-03-18

12345678_0001

TA貢獻1802條經驗獲得超5個贊

嘗試這個..

你應該使用 textContent 而不是 innerHtml .. 它會給你text來自 html 標簽 .. 使用includes方法來比較文本 ..

在谷歌上搜索：innertextvs innerhtmlvs textcontent..

let generateBtn = document.getElementById("generateBtn");

generateBtn.addEventListener("click", (e) => {

if (e.target.textContent.includes("GENERATE")) {

e.target.innerText = "RESET";

e.target.classList.add("resetBtn-shown");

} else {

e.target.innerText = "GENERATE";

e.target.classList.remove("resetBtn-shown");

}

});

.generateBtn-shown {

background-color: red;

color: #eba341;

font-size: 1.5rem;

font-weight: 500;

border-radius: 0.5rem;

width: 10rem;

height: 3rem;

border: none;

}

.resetBtn-shown {

background-color: #21b884;

color: white;

}

<button id="generateBtn" class="generateBtn-shown">GENERATE</button>

反對回復 2023-03-18

3 回答
0 關注
163 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

多次單擊按鈕時如何更改 inner.HTML

多次單擊按鈕時如何更改 inner.HTML

3 回答

添加回答