잡히지 않은 TypeError : null의 'textContent'속성을 설정할 수 없습니다.

Udemy JS 프로젝트를 따라갈 때이 오류가 발생했습니다. 내 풀 타임 dev에 친구들 중 3 명은 그것을 이해할 수 없으며이 오류뿐만 아니라 그 변형에 대해서도 10 - 15 StackOverflow 기사를 읽었습니다.잡히지 않은 TypeError : null의 'textContent'속성을 설정할 수 없습니다.

여기에 일반적인 errror의 :

Uncaught TypeError: Cannot set property 'textContent' of null 
    at Object.displayBudget (app.js:177) 
    at updateBudget (app.js:219) 
    at ctrlAddItem (app.js:236) 
    at HTMLDocument.<anonymous> (app.js:205)

그것은 꽤 똑바로 앞으로 보이지만 바로 닫는 body 태그 전에 HTML의 하단에있는 스크립트를 배치하고 이름으로 일치하는 요소를 가지고 있지의 일반적인 솔루션 질의가 적용되지 않습니다. 나는 트리플을 체크하고, 누군가의 제안에 JQuery .ready 함수를 추가하여 페이지가로드되고 있는지 확인했다.

위에서 언급 한 모든 라인에 대해 콘솔에 중단 점을 설정하고 코드를 단계적으로 실행 한 후 오류가 발생하기 전에 내 변수가 정의되어 있고 NULL이 아닌 것처럼 보입니다. 첨부 된 그림 또는 아래 그림을 참조하십시오. 'budget__value가'완전히 HTML에 있는지

Code Step Through

. 여기

<body> 

     <div class="top"> 
      <div class="budget"> 
       <div class="budget__title"> 
        Available Budget in <span class="budget__title--month">%Month%</span>: 
       </div> 

       <div class="budget__value">+ 2,345.64</div>

내 코드의 Fiddle입니다. 또한 내가 Github (/ Laflamme02/BudgetApp)에 그것을 밀어 넣었습니다. 만약 당신이 내가 여기로 들어가는 것을보고 싶다면.

저는이 문제를 적어도 2 주 이상 해결해주었습니다. 그래서이 문제를 해결할 수있는 사람은 제가 가장 좋아하는 사람이 될 것입니다.

출처

2017-03-05 theChrisFlame

DOMString.budgetLabel에있는 클래스 이름 앞에 점을 잊어 버렸습니다. 읽어야합니다

document.querySelector('.budget__value').textContent = obj.budget

당신의 JSFiddle에서, 당신은 당신이뿐만 아니라 여러 가지 다른 문자열의 앞에 점을 넣어 잊었 볼 수 있습니다 incomeLabel, expensesLabel 및 percentageLabel. 네 가지 모두 간단한 수정입니다.

var DOMstrings = { 
    inputType:   '.add__type', 
    inputDescription: '.add__description', 
    inputValue:   '.add__value', 
    inputBtn:   '.add__btn', 
    incomeContainer: '.income__list', 
    expensesContainer: '.expenses__list', 
    budgetLabel:  'budget__value', 
    incomeLabel:  'budget__income--value', 
    expensesLabel:  'budget__expenses--value', 
    percentageLabel: 'budget__expenses--percentage' 
};

출처

2017-03-05 00:41:41 gyre

이것은 내가 멍청하다고 생각한 것이 가장 좋아하는 것입니다. @gyre, 너는 내 새로운 좋아하는 사람이야. 고맙습니다. – theChrisFlame

도와 줘서 기쁩니다! 또한 JSFiddle을 확인한 결과 세 개의 오타가 더 있습니다. 위의 수정 된 게시물을 참조하십시오. – gyre

잡히지 않은 TypeError : null의 'textContent'속성을 설정할 수 없습니다.

답변

관련 문제