setproperty 자바스크립트

| | | | | | | | | | | | | | | | | | | | | | | | |

innerHTML 속성 을 사용하면 JavaScript를 사용하여 요소의 내용을 정의할 수 있습니다.

잘못된 요소 값을 지정하는 경우 innerHTML 메서드를 사용하거나 페이지에 요소가 표시되기 전에 스크립트를 배치하면 "Uncaught TypeError: Unable to set the "innerHTML" null "property 오류가 발생합니다. error

이 가이드에서는 이 오류의 의미와 오류가 발생할 수 있는 이유에 대해 설명합니다. JavaScript

Uncaught TypeError:에서 수정하는 방법을 배울 수 있도록 이 오류의 예를 살펴보겠습니다. "innerHTML" 속성을 null로 설정할 수 없습니다.

InnerHTML 속성은 JavaScript로 작업 중인 웹 요소에 연결되어 있습니다. getElementById () 와 같은 "getter" 를 사용하여 페이지에서 웹 요소를 선택했거나 수정하려는 JavaScript의 요소를 생성했습니다.

"`innerHTML` 속성을 null로 설정할 수 없습니다." 오류는 유형 오류입니다. 이는 속성이나 함수를 지원하지 않는 값에 속성이나 함수를 적용하려는 것을 의미합니다.

이 경우 innerHTML의 값을 동일한 요소로 설정하려고 합니다. . 없는. NULL 값은 innerHTML 속성이 아닙니다.

이 오류의 일반적인 원인은 두 가지입니다.

  • 웹 페이지에 항목이 표시되기 전에 스크립트 삽입
  • 잘못된 항목 ID를 참조하십시오.

초보자가 가장 많이 하는 실수인 근본 원인을 분석하겠습니다.

예시 시나리오

시간을 표시하는 간단한 사이트를 작성해 보겠습니다. 시작하려면 기본 HTML 페이지를 정의하십시오. 이 HTML 페이지는 날씨를 표시하는 캔버스가 됩니다.

이 HTML 페이지는 . 태그에는 웹 페이지의 제목을 정의하는

</pre></code>이 포함됩니다. <code><body></code>에는 단락</p> </a> </div> <p>단락에 <a href="/html-span/"> <span> </a>. 이 태그의 내용을 JavaScript 코드의 현재 시간으로 교체합니다.</p><p>그런 다음 시간을 검색하는 스크립트를 작성하고 이 JS 코드를 <code><head> </code>에 추가합니다. ..</p> <p>이 문서에는 HTML과 JavaScript가 포함되어 있습니다. <code>getElementById ()</ 코드> 우리의 스파를 얻습니다 n 태그 <code>SHOW_TIME</code>. 그런 다음 <ah ref = "/ JavaScrip t-Date/">JavaScript 모듈 날짜 </a> 태그를 사용하여 현재 날짜를 검색합니다.</p><p>다음 코드 줄에서 다음을 표시하는 문자열을 만듭니다. 현재 시간 및 분. 이 문자열은 다음 구조를 사용합니다.</p><p><code>HH: MM</code></p><p>시간과 분 값을 구분하는 두 개의 마침표가 있습니다. <a href="/javascript-string-interpolation/"> JavaScript 문자열 보간 </a> 이라는 기술을 사용하여 이 문자열을 만듭니다. 이를 통해 여러 값을 동일한 체인에 통합할 수 있습니다. 마지막으로 innerHTML 메서드를 사용하여 이번에는 웹 페이지에 표시합니다.</p><p>웹 브라우저에서 웹 페이지를 엽니다.</p><Figure class = `wp- picture block-` > <IMG SRC = "https://lh6.googleusercontent.com/anZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU-YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ_qdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw"ALT = "AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw"> </ 그림> <P> 시간을 표시 할 수 없습니다. 우리는 자바 스크립트 콘솔을 보면 우리의 웹 페이지, 우리는 오류를 볼 수 있습니다:</p> <p> 이것은 "`innerHTML` 속성을 null로 설정할 수 없음"의 또 다른 표현입니다. 이는 innerHTML의 값을 설정하려는 요소가 0임을 알려줍니다.</p><h2>해결책</h2><p><code>SHOW_TIME</code>의 값이 0이므로 JavaSc가 ript는 ID가 <code>SHOW_TIME</code>인 요소를 올바르게 검색할 수 없습니다.</p><p>이 경우 원인은 <code><를 입력했기 때문입니다. script></code> 일정이 너무 빠릅니다. <code> ... </pre> </div> <p><code> </div> <h2>결론</h2><p>"Uncaught TypeError: Unable to set property `innerHTML` null" 오류는 값을 갖는 요소에 대해 innerHTML 값을 설정하려고 할 때 발생합니다. 는 0과 같습니다.</p><p>이 오류를 수정하려면 <code><script></code>가 스크립트에서 선택하려는 요소 뒤에 와야 합니다. 이렇게 해도 문제가 해결되지 않으면 프로그램에서 유효한 항목을 선택해야 합니다.</p>