JavaScript를 사용하여 레이블 텍스트 변경


91

다음이 저에게 효과가없는 이유는 무엇입니까?

<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>

1
이런! 'doesnt'해야합니다 죄송합니다; 0
— phil crowe dec

4
스크립트가 innerHtml 레이블을 변경하려고 할 때 lbltipAddedComment가 실제로 페이지에 존재하지 않기 때문입니다. 레이블 뒤에 스크립트를 삽입하거나 jquery $ (document) .ready () 사용
— Andrew Orsich 2010

편집 버튼을 보지 못해서 죄송합니다!
— phil crowe 2010

나는 여기에 제안 된 모든 것을 시도했지만 아무것도 나를 위해 일하지 않았습니다.
— Rajan Mishra

답변:


138

레이블이 페이지 (DOM)에 존재하기 전에 스크립트가 실행되기 때문입니다. 레이블 뒤에 스크립트를 넣거나 문서가 완전히로드 될 때까지 기다리십시오 ( jQuery ready()또는 http://www.webreference.com/programming/javascript/onloads/ 와 같은 OnLoad 기능 사용 ).

작동하지 않습니다.

<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>

이것은 작동합니다.

<label id="lbltipAddedComment">test</label>
<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>

이 예제 (jsfiddle 링크) 는 순서 (스크립트 먼저, 그다음 레이블)를 유지하고 onLoad를 사용합니다.

<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';

    });  
</script>

나는 .textContent 대답은 실제로 올바른 생각
— 폴 테일러

1
@PaulTaylor,이 답변은 2010 년 이후로 여기에 있으며 92 개의 찬성표가 있습니다 (현재는 반대표도 있음). 이 질문은 innerHTML을 사용했기 때문에 코드를 이동하는 데 필요한 것만 변경했습니다. 내가 느끼는 동안은 downvote에 대한 필요가 없습니다 ... ( "대신 innerHTML을 / innerText와의 헤이, BTW, 사용하는 TextContent) 영업 이익의 문제가 아니었다, 여분의 아이디어를 제안하는 것이 괜찮습니다.
— Konerak

좋아하지만 그는 마지막 코멘트가 작동하지 않았기 때문에 솔루션이 작동하지 않았고 실제로 작동하지 않았다는 것을 이해했습니다.이 jsfiddle.net/cfxrLpe9/4 는 textContent와 작동하지만 innerHtml 은 작동하지 않습니다. 그?
— Paul Taylor

@PaulTaylor 대답은 아마도이 대답을 수락 된 것으로 표시했을 때 OP에서 작동했을 것입니다. 코드에 오타가 있습니다. 대답이 보여 주듯이 innerHTML 대신 innerHtml을 사용하고 있습니다. jsfiddle.net/cfxrLpe9/6
— Randall Flagg

22

.innerText또는 .value대신 시도 했습니까 .innerHTML?


.innerText는 레이블에서 작동합니다. <Head> 내에 Script 태그가 있고 <body>에 디자인이 있습니다. 비록 그것은 나를 위해 잘 작동하지만.
— Jai

@AshwinG 귀하의 의견이 저를 구했습니다. 나는 내 머리를 때리고 있었을 .value위해label
— Prabs

사용하려고.text('Your Text')
— 음흉

15

스크립트가 실행될 때 레이블 요소가로드되지 않기 때문입니다. 레이블과 스크립트 요소를 바꾸면 작동합니다.

<label id="lbltipAddedComment"></label>
<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>

1
아, 몰랐어! 예, 게시 된 코드가 실제 코드를 반영하는 경우 (jquery를 사용하여 document.ready 또는 이와 유사한 것을 실행하지 않음) 그게 잘 작동하지 않는 이유입니다.
— GordonM 2010

10

.textContent대신 사용하십시오 .

나는 이것을 시도하기 전까지 레이블의 가치를 바꾸는 데 어려움을 겪고 있었다.

그래도 해결되지 않으면 console.dir이 질문에 표시된대로 콘솔에 로깅하여 설정할 수있는 속성을 확인하기 위해 개체를 검사 해보십시오 . HTML 요소를 JavaScript 개체로 로깅하려면 어떻게해야합니까?


감사합니다. 내 사용 사례가 질문의 사용 사례와 비슷하다고 생각합니다 (하지만 엄격하게 확인하지는 않았습니다). 중첩 된 입력 요소가있는 레이블의 텍스트를 검색 및 / 또는 변경하려고했습니다. 예를 들어 검색하고 싶었습니다. / 또는 다음의 "enter info here:"일부를 변경하십시오 <label id='myLabel'>enter info here:<input type='text' id='inp'/></label>.. 만 .textContent일하지, 그리고 아무도 .innerHTML, .innerText또는 .value했다. (면책 조항 : 저는 Chrome에서만 확인했습니다.)
— Andrew Willems

감사합니다 저도 같은 문제에 충돌
— 폴 테일러에게

2
@AndrewWillems 불행하게도 .textContent과 .innerText(미세 읽는 동안), (그것은 또한처럼, 내장 된 입력 필드를 지워 쓰기에 대한 내 firefox60에 대한 작업은하지 않았다 .innerHTML). 내가 할 수 밖에 없었습니다 그래서 document.getElementById('myLabel').childNodes[0].nodeValue="new label text"(물론, 지수는 약간의 미봉책이 만드는 다른 무엇인가 후 0이 될 수도 있지만 나를 위해 그것을 일)
— 마티 Nalis

9

사용 .innerText이 작동합니다.

document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';


0

이 시도:

<label id="lbltipAddedComment"></label>
<script type="text/javascript"> 
      document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>

1
솔루션에 대한 링크는 환영하지만 답변이없는 경우에도 유용한 지 확인하십시오 . 링크 주변에 컨텍스트를 추가 하여 동료 사용자가 그것이 무엇인지, 왜 거기에 있는지 알 수 있도록 한 다음 페이지에서 가장 관련성이 높은 부분을 인용하십시오. 대상 페이지를 사용할 수없는 경우 다시 연결합니다. 링크에 불과한 답변은 삭제 될 수 있습니다.
— paper1111

0

스크립트가 먼저 실행되기 때문에 .. 스크립트가 실행될 때 컨트롤이로드되지 않습니다. 따라서 컨트롤을로드 한 후 스크립트를 작성합니다.

작동합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.