>source

저는 초보자입니다. 그래서 자바스크립트를 사용하여 6개의 인터랙티브 패드로 드럼 패드를 만들고 있습니다. 각 패드를 클릭/터치할 때 각 패드의 색상을 변경할 수 있기를 원합니다. 이제 내 code가 작동하는 방식으로 첫 번째(왼쪽 상단) 패드만 클릭으로 변경됩니다. 이 효과가 모든 패드에 발생하도록 하고 싶습니다. 패드 변수의 querySelectorAll()은 트릭을 수행하지 않는 것 같습니다. 실제로 첫 번째 패드가 전혀 활성화되지 않도록 합니다. 어떤 팁? 감사 해요!

const drumKit= document.querySelector('.drumkit');
let pad= document.querySelector('.pad');
function playDrum(event) {
  if (event.target.classList.contains('pad')) {
    event.preventDefault();
    let soundToPlay= event.target.dataset.sound;
    drums.play(soundToPlay);
    pad.classList.add('playing');
  }
}
function setViewportHeight() {
  let vh= window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setViewportHeight();
window.addEventListener('resize', setViewportHeight);
drumKit.addEventListener('click', playDrum);
drumKit.addEventListener('touchstart', playDrum);

body {
  background: #353535
}
.drumkit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.pad {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  box-shadow: 0 0 10px #000000;
  flex: 1 0 calc(33.333% -20px);
  background: radial-gradient(#e3a864, #de9866, #d08367, #af6762);
}
.playing {
  transform: scale(-1.-1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}
.pad img {
  width: 150px;
  pointer-events: none;
}

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="shortcut icon" href="#">  <link rel="stylesheet" href="./styles.css">  <title>Lofi Beat Machine</title></head><body>  <div class="drumkit">    <div class="pad" data-sound="samp1"><img src="./icons/sample.png" alt="samp1"></div>    <div class="pad" data-sound="samp2"><img src="./icons/sample.png" alt="samp2"></div>    <div class="pad" data-sound="samp3"><img src="./icons/sample.png" alt="samp3"></div>    <div class="pad" data-sound="kick"><img src="./icons/kick.png" alt="kick"></div>    <div class="pad" data-sound="snare"><img src="./icons/snare.png" alt="snare"></div>    <div class="pad" data-sound="hat"><img src="./icons/closed-hihat.png" alt="hihat"></div>  </div>  <script src="howler.min.js"></script>  <script src="app.js"></script></body></html>

게시한 code에서 스니펫을 만들었습니다... 실행 가능하게 만들 수 있습니까(오류 수정)?

Louys Patrice Bessette2022-01-27 17:35:59

querySelectorAll은 요소 모음을 제공합니다. 이벤트 리스너를 추가하려면 반복해야 합니다.

A Haworth2022-01-27 17:42:57
  • 답변 # 1

    지금까지 프로젝트를 수고하셨습니다! 를 사용하는 것은 옳았지만 모든 패드에 onClick을 추가하려면 요소를 반복해야 합니다. 먼저 패드 변수를 다음과 같이 querySelectorAll로 변경합니다.

    let pad= document.querySelectorAll('.pad');
    

    패드는 이제 배열이므로 다음을 업데이트하여 playDrum 함수를 변경합니다.pad.classList.add()에게event.target.classList.add()이와 같이:

    event.target.classList.add('playing');
    

    이벤트.타겟클릭한 특정 패드를 대상으로 합니다. 마지막으로 onClick 이벤트를 첨부할 때 다음과 같은 기능을 사용할 수 있습니다.

    pad.forEach(elem=> elem.addEventListener("click", playDrum));
    

    그리고 당신은drumKit.addEventListener('touchstart', playDrum);, onClick 기능이 모든 개별 패드에 부착된 경우에는 필요하지 않습니다.

    다음은 모든 변경 사항이 포함된 JS입니다.

    const drumKit= document.querySelector('.drumkit');
    let pad= document.querySelectorAll('.pad');
    function playDrum(event) {
        if (event.target.classList.contains('pad')) {
            event.preventDefault();
            let soundToPlay= event.target.dataset.sound;
            drums.play(soundToPlay);
            event.target.classList.add('playing');
        }
    }
    function setViewportHeight() {
        let vh= window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
    setViewportHeight();
    window.addEventListener('resize' , setViewportHeight);
    pad.forEach(elem=> elem.addEventListener("click", playDrum));
    

  • 이전 txt 파일의 내용을 인쇄하고 C에서 새 파일로 다시 저장하는 방법이 있습니까?
  • 다음 javascript : 날짜 배열을 주 단위로 정렬