堆棧內存溢出
  簡體   English   中英

Javascript“單擊”按鈕僅工作一次而不必刷新頁面

[英]Javascript 'click' button only works once than have to refresh page

 原文  2020-01-18 23:56:30  4   2    javascript/ html/ button

問題描述

所以我在這個交互式網格上工作並設置它，所以當我單擊一個按鈕時，網格 div 會根據選擇的按鈕更改背景顏色。 我的問題是我只能單擊每個按鈕一次，然后在刷新頁面之前它無法工作。 我該如何解決這個問題，以便可以根據需要多次更改顏色？

HTML

<!DOCTYPE html>
<html>
    <head> 
         <title> Claudias Etch-A-Sketch</title>
         <link rel= "stylesheet"  href="style.css">     
    </head>


<body>
   <section class="back"> 
       <h1><center> Claudia Etch-A-Sketch!</center></h1>
    </section>

   <section>
        <div>      
            <button class="Black">Black</button>
            <button class="Random">Random Color</button>
            <button class="Clear">Clear Board</button>
        </div>
    </section>
<section>

 <div id = "container"> </div>

</section>
</body>

<script src ="javascript.js"> </script>
</html>

爪哇腳本

const container = document.getElementById("container");
const btn= document.querySelector('button');


let y = document.querySelectorAll('button');
y.forEach(button => {
    button.addEventListener('click', () => {
        let choice = button.innerHTML;
        switch (choice) {
            case "Random Color":
                random();
                break;
            case "Black":
                blackchange();
                break;
            case "Clear Board":
                reset();
                break;
        }
    });
})


function blackchange() { const bb = container.addEventListener('mouseover', e=> e.target.classList.add('black'))};


function random() {
  const rr= container.addEventListener('mouseover', e=> e.target.classList.add('random'))
};

function reset () { const rr= container.addEventListener('mouseover', e => e.target.classList.add('reset'))};

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div")


   container.appendChild(cell).className = "griditem"

  }; 
};

makeRows(16, 16);

2 個解決方案

解決方案1
 0  2020-01-19 00:50:06

您的主要問題是您不斷在容器上添加mouseover事件偵聽器，並且您的單元格最終同時具有random和black類。 然后，嘗試添加一個或另一個不會改變任何內容。 您需要刪除其他顏色的類並僅應用您想要的類。

您還可以通過只添加一次mouseover事件偵聽器並使用此事件處理程序將使用的顏色變量來使您的生活更輕松。

試試下面的演示： 

 const container = document.getElementById("container"); const buttons = document.querySelectorAll('button'); let cells = []; let selectedColor = null; buttons.forEach(button => { button.addEventListener('click', () => { switch (button.id) { case "black-btn": selectColor('black'); break; case "random-btn": selectColor('random'); break; case "clear-btn": reset(); break; } }); }) container.addEventListener('mouseover', e => { if (selectedColor !== null) { e.target.classList.remove('black', 'random'); e.target.classList.add(selectedColor); } }); function reset() { cells.forEach(cell => cell.classList.remove('black', 'random')); } function selectColor(color) { selectedColor = color; buttons.forEach(button => { button.classList[button.id === `${color}-btn` ? 'add' : 'remove']('active'); }); } function makeRows(rows, cols) { container.style.setProperty('--grid-rows', rows); container.style.setProperty('--grid-cols', cols); for (c = 0; c < (rows * cols); c++) { let cell = document.createElement("div"); cells.push(cell); container.appendChild(cell).className = "griditem"; }; }; makeRows(16, 16);
 body { font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 16px; } button.active { box-shadow: 0 0 3px #882ac6; } #container { background: #eee; display: grid; height: 150px; width: 150px; grid-template-columns: repeat(16, 1fr); } .griditem.black { background: black; } .griditem.random { -webkit-animation: random 3s infinite; animation: random 3s infinite; } @keyframes random { 0% { background-color: purple; } 15% { background-color: red; } 30% { background-color: yellow; } 45% { background-color: green; } 60% { background-color: blue; } 75% { background-color: orange; } 100% { background-color: purple; } }
 <h1>Claudia Etch-A-Sketch!</h1> <div> <button id="black-btn">Black</button> <button id="random-btn">Random Color</button> <button id="clear-btn">Clear Board</button> </div> <div id="container"></div>

解決方案2
 0 已采納  2020-01-19 00:51:28

你忘記了你對頁面所做的一切都必須清理干凈，否則你所做的事情的影響仍然存在。

設置新的mouseover功能時，需要先使用removeEventListener刪除舊的mouseover功能。 在添加新類之前，您還需要通過鼠標懸停來刪除用戶過去可能已添加到元素的其他類。

試試這個： 

 const container = document.getElementById("container"); const btn = document.querySelector('button'); let y = document.querySelectorAll('button'); y.forEach(button => { button.addEventListener('click', () => { let choice = button.innerHTML; switch (choice) { case "Random Color": random(); break; case "Black": blackchange(); break; case "Eraser": reset(); break; } }); }); var currentMouseoverFunction = function() {}; function blackchange() { container.removeEventListener('mouseover', currentMouseoverFunction); currentMouseoverFunction = function(e) { e.target.classList.remove('random'); e.target.classList.remove('reset'); e.target.classList.add('black'); }; container.addEventListener('mouseover', currentMouseoverFunction); }; function random() { container.removeEventListener('mouseover', currentMouseoverFunction); currentMouseoverFunction = function(e) { e.target.classList.remove('black'); e.target.classList.remove('reset'); e.target.classList.add('random'); }; container.addEventListener('mouseover', currentMouseoverFunction); }; function reset() { container.removeEventListener('mouseover', currentMouseoverFunction); currentMouseoverFunction = function(e) { e.target.classList.remove('black'); e.target.classList.remove('random'); e.target.classList.add('reset'); }; container.addEventListener('mouseover', currentMouseoverFunction); }; function makeRows(rows, cols) { container.style.setProperty('--grid-rows', rows); container.style.setProperty('--grid-cols', cols); for (c = 0; c < (rows * cols); c++) { let cell = document.createElement("div"); container.appendChild(cell).className = "griditem"; }; }; makeRows(16, 16);
 #container{ width:160px; height:160px; margin-top:10px; background:#eee; } #container div { float:left; height: 10px; width: 10px; } .black { background: black; } .random { background: pink; } .reset { background: transparent; }
 <section class="back"> <h1> <center> Claudia Etch-A-Sketch!</center> </h1> </section> <section> <div> <button class="Black">Black</button> <button class="Random">Random Color</button> <button class="Clear">Eraser</button> </div> </section> <section> <div id="container"> </div> </section>

我添加了自己的簡單 CSS 用於測試目的，因為我無法訪問您的 CSS。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Web按鈕只能使用一次，然后我必須刷新頁面 如何在單擊按鈕時每天僅刷新一次頁面（加載頁面后）並使用 Javascript 打印上次刷新的時間 按鈕單擊僅適用一次 單擊按鈕僅在刷新我的頁面后才有效 Iframe 點擊事件僅在頁面加載后工作一次 Javascript 切換單選按鈕僅一次（刷新）嗎？ JavaScript單擊按鈕僅一次 function 僅在單擊按鈕時有效 我的.on Swipe只能在它休息之前工作一次並且必須刷新一切--JQuery Mobile / Javascript JavaScript Click EventListener僅工作一次
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM