>

열이 8 개의 단추로되어 있으며 한 번에 하나의 단추 만 토글 (노란색)하고 나머지 단추는 기본 (녹색)으로 유지하려고합니다. 클릭시 함수를 실행하는 데 시간이 걸립니다. 색상이 변하지 않음을 의미합니다.

이 게시물을 사용하고 있습니다 다른 버튼을 클릭 할 때 버튼의 색상을 선택하고 변경하고 원본으로 되 돌리는 방법 내 참조로 querySelectors 및 클래스 변경을 이해하는 데 도움이되었지만 내 인생에서 내 응용 프로그램이 작동하지 않는 이유를 알 수 없습니다. 와이즈 비즈  for 루프가 호출 된 직후 발생하지만 Console.log('test) 아래에 놓이면  발사되지 않습니다.

JS

onClick

HTML

for (button in buttons) {
    buttons[button].onclick = function() {
        console.log('test')
        var yellowButton = document.querySelectorAll(".yellow")[0];
        if (this.className == "green") {
            if (yellowButton) yellowButton.className = "green";
            this.className = "yellow";
        }
    }
}

CSS

           <button class="green">UPKEEP</button>
            <button class="green">DRAW</button>
            <button class="green">MAIN</button>
            <button class="green">COMBAT</button>
            <button class="green">MAIN</button>
            <button class="green">END TURN</button>
            <button class="green">CLEANUP</button>

버튼의 1/8이 노란색 일 것으로 예상됩니다. 클릭 한 버튼입니다.

button{ width: 100%; padding: 10px 20px; margin: 3px; } .green{ background-color: green; } .yellow { background-color: yellow; }

  • 답변 # 1

    코드를 작동시킬 수있었습니다. jsFiddle

    buttons 를 정의했는지 확인하십시오  올바르게 :

    var buttons = document.querySelectorAll(".green");
    
    

  • 답변 # 2

    노란색과 녹색 클래스를 토글하지 않고 클릭시 '하이라이트'클래스를 추가하고 이전에 클릭 한 버튼에서 제거 할 수 있습니다.

    이 하이라이트 클래스는 노란색 배경 스타일을 가지고 있으므로 버튼을 클릭하면 하이라이트 클래스와 노란색 배경이 추가됩니다. 그런 다음 다른 버튼을 클릭하면 첫 번째 버튼에서 강조 표시 클래스가 제거되고 클릭 한 버튼에 적용됩니다.

    var buttons = document.querySelectorAll("button");
     
     for (button in buttons) {
        buttons[button].onclick = function() {
            console.log('test')
            buttons.forEach(function(btn){
              btn.classList.remove('highlight');
            })
            this.classList.add('highlight');
        }
    }
    
    
    button{
        width: 100%;
        padding: 10px 20px;
        margin: 3px;
    }
    .green{
        background-color: green;
    }
    .highlight {
        background-color: yellow;
    }
    
    
    <button class="green">UPKEEP</button>
    <button class="green">DRAW</button>
    <button class="green">MAIN</button>
    <button class="green">COMBAT</button>
    <button class="green">MAIN</button>
    <button class="green">END TURN</button>
    <button class="green">CLEANUP</button>
    
    

  • 답변 # 3

    내 문제는 내 HTML에 있었고, 루프가 발생하도록 스크립트 태그를 본문 끝으로 이동해야했습니다. 도와 주셔서 감사합니다!

관련 자료

  • 이전 javascript - 이름 확인을위한 다국어 문자
  • 다음 sqlite - 하위 그룹의 순위 및 중앙값을 계산하기위한 SQL 순위 쿼리