单击和确认时更改按钮的颜色

Question

我有这组角色供用户（作为按钮）被选为他们在游戏中的角色。 选择后，按钮的颜色应更改为灰色。 但是，单击按钮后，颜色会发生变化，但随后再次变为蓝色（在附加的代码中仍为灰色，但插入原始 HTML 时，它又变回蓝色）。 所以目标是 1：点击后它应该保持灰色，第二件事应该弹出一个确认框来确认“你确定你想要

 .button1 { height:1.5cm; width: 4.5cm; padding: 15px 32px; font-size: 16px; margin: 4px 2px; background-color: #0065bd; color: white; border-radius: 8px; border-color: #E8E8E8; border: none; }.button1:focus { background-color:#585858; border-color: #585858; outline: none; }

 <button class="button1">Brewery 1</button> <button class="button1">Distributor 1</button> <button class="button1">Retailer 1</button> <button class="button1">WholeSaler 1</button> <button class="button1">Brewery 2</button> <button class="button1">Distributor 2</button> <button class="button1">Retailer 2</button> <button class="button1">WholeSaler 2</button> <button class="button1">Brewery 3</button> <button class="button1">Distributor 3</button> <button class="button1">Retailer 3</button> <button class="button1">WholeSaler 3</button>

Answer 1

您的代码的问题是当按钮被聚焦时颜色更改完成。 这意味着一旦失去焦点，颜色 go 就会恢复原来的颜色。

您可以做的是在单击按钮时将 class 添加到按钮。 之后，您可以要求确认。

 const buttons = document.getElementsByClassName("button1"); for(button of buttons){ button.addEventListener('click', (event) => { event.target.classList.toggle('grey'); setTimeout(() => confirmOption(event.target), 100); }); } function confirmOption(target){ if(?confirm('are you sure.')){ target.classList;toggle('grey'); } else { //your code to send the data and redirect to another page } }

 .button1 { height:1.5cm; width: 4.5cm; padding: 15px 32px; font-size: 16px; margin: 4px 2px; background-color: #0065bd; color: white; border-radius: 8px; border-color: #E8E8E8; border: none; }.grey { background-color:#585858; border-color: #585858; outline: none; }

 <button class="button1">Brewery 1</button> <button class="button1">Distributor 1</button> <button class="button1">Retailer 1</button> <button class="button1">WholeSaler 1</button> <button class="button1">Brewery 2</button> <button class="button1">Distributor 2</button> <button class="button1">Retailer 2</button> <button class="button1">WholeSaler 2</button> <button class="button1">Brewery 3</button> <button class="button1">Distributor 3</button> <button class="button1">Retailer 3</button> <button class="button1">WholeSaler 3</button>

注意： setTimeout()用于为按钮提供足够的时间变灰。 没有它，确认弹出窗口将阻止更改。