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.