자바 스크립트 가져 오기 및 변경하기 (변수 포함)

Question

마지막으로 그룹의 상태를 표시하는 버튼을 업데이트해야합니다. 예를 들어 판사 1이 0 점을 받았습니다. 6 개의 버튼으로 구성된 4 개의 그룹이 있습니다. 모든 점수를 입력 한 후에 점수를 저울 릅니다. 나는 마지막 점수가 무엇인지 보여주고 싶다.

내 문제는 클래스를 두 개의 루프로 잡아내는 것입니다. 콘솔은 내게 말하고있다 :

function updateJudgeLast(){ 
    for(j=1;j<5;j++){ 
     for(i=0;i<6;i++){ 
      var judgeScore ="#btnJudge"; 
      judgeScore += j; 
      judgeScore += "_"; 
      judgeScore += i; 
      console.info(judgeScore); 

      var testLast = document.getElementById(judgeScore).className.split(' ')[1]; 
      console.info(testLast); 

      switch(testLast){ 
      case "btn-default": break; 
      case "btn-last": $(judgeScore).attr("class", "btn btn-default"); break; 
      case "btn-primary": $(judgeScore).attr("class", "btn btn-last"); break; 
      } 
     } 
    } 
} 

judgeScore가 출력됩니다 루프 내부의 클래스를 얻을 수있는 요소의 id입니다 : "#btnJudge1_0" 다음 "#btnJudge1_1" 여기

Uncaught TypeError: Cannot read property 'className' of null at updateJudgeLast (scripts.js:278)

내 기능입니다. 콘솔을 검사 할 때 올바르게 인쇄되지만 클래스를 확인하기 위해 가져올 수 없으므로 null입니다. 내가 놓친 게 무엇입니까?

배경 : 이것은 내가 ESP8266에서 FastLED를 실행하고있는 스코어 보드입니다. 코드는 JSON과 JS를 사용하여 필요에 따라 페이지와 보드를 업데이트합니다.

Answer 1

document.getElementById을 사용하려는 경우 ID는 '#'으로 시작하지 않아야합니다. 이 같은 '#'을

var judgeScore ="btnJudge"; // remove # 
    judgeScore += j; 
    judgeScore += "_"; 
    judgeScore += i; 
var testLast = document.getElementById(judgeScore).className.split(' ')[1]; 

또는 document.querySelector를 사용하고 유지 :이 시도

var judgeScore ="#btnJudge"; // keep # 
    judgeScore += j; 
    judgeScore += "_"; 
    judgeScore += i; 
    console.info(judgeScore); 
var testLast = document.querySelector(judgeScore).className.split(' ')[1]; // and use querySelector