Alterar o texto do rótulo usando JavaScript


93

Por que o seguinte não funciona para mim?

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

1
oops! desculpe, deveria ser 'doesnt'; 0
phil crowe

4
Porque quando você tenta alterar o rótulo innerHtml, lbltipAddedComment, na verdade, não está presente na página. Insira o script após o rótulo ou use jquery $ (document) .ready ()
Andrew Orsich

desculpe, não vi o botão de edição!
phil crowe

Tentei tudo sugerido aqui, mas nada funcionou para mim.
Rajan Mishra

Respostas:


140

Porque seu script é executado ANTES do rótulo existir na página (no DOM). Coloque o script após o rótulo ou espere até que o documento esteja totalmente carregado (use uma função OnLoad, como o jQuery ready()ou http://www.webreference.com/programming/javascript/onloads/ )

Isso não vai funcionar:

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

Isso vai funcionar:

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

Este exemplo (link jsfiddle) mantém a ordem (primeiro o script, depois o rótulo) e usa um 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>

Acho que a resposta .textContent é realmente a correta
Paul Taylor

1
Bem, @PaulTaylor, esta resposta está aqui desde 2010 e tem 92 votos positivos (e agora, seu voto negativo). A questão usava innerHTML, então eu só alterei o que era necessário para fazer seu código funcionar. Embora eu ache que é sempre bom sugerir ideias extras ("ei, a propósito, use textcontent em vez de innerhtml / innertext), esse não foi o problema do OP ... Não há necessidade de downvote.
Konerak

Ok, mas ele conseguiu fazer funcionar, seu último comentário foi que nada funcionou, então entendi que sua solução não funcionou, certamente não funcionou para mim, olha que jsfiddle.net/cfxrLpe9/4 funciona com textContent, mas não com innerHtml, por que está este ?
Paul Taylor

@PaulTaylor A resposta provavelmente funcionou para o OP, pois ele marcou essa resposta como aceita. Você tem um erro de digitação em seu código. Você está usando innerHtml em vez de innerHTML, como mostra a resposta. jsfiddle.net/cfxrLpe9/6
Randall Flagg

22

Você já tentou .innerTextou em .valuevez de .innerHTML?


.innerText funciona para rótulo. Eu tenho a tag Script em <Head> e o design em <body>. Embora funcione bem para mim.
Jai,

@AshwinG Seu comentário acabou de me salvar. Eu estava batendo na minha cabeça com .valueporlabel
Prabs,

Tente usar.text('Your Text')
sorrateiro

15

Porque um elemento de rótulo não é carregado quando um script é executado. Troque o rótulo e os elementos do script e funcionará:

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

1
Oh, não percebi isso! Sim, se o código postado reflete o código real (não está usando jquery para disparar em document.ready ou semelhante), esse é um motivo pelo qual ele não funcionaria tão bem.
GordonM de

10

Use em seu .textContentlugar.

Eu estava lutando para mudar o valor de um rótulo também, até tentar fazer isso.

Se isso não resolver, tente inspecionar o objeto para ver quais propriedades você pode definir registrando-o no console, console.dirconforme mostrado nesta pergunta: Como posso registrar um elemento HTML como um objeto JavaScript?


Obrigado. Suspeito (mas não confirmei rigorosamente) que meu caso de uso é semelhante ao da pergunta: Eu estava tentando recuperar e / ou alterar o texto de um rótulo que tem um elemento de entrada aninhado, por exemplo, eu queria recuperar e / ou alterar a "enter info here:"parte do seguinte: <label id='myLabel'>enter info here:<input type='text' id='inp'/></label>. Só .textContentfuncionou, e nenhum de .innerHTML, .innerTextou .valuefuncionou. (Isenção de responsabilidade: eu só verifiquei no Chrome.)
Andrew Willems

Obrigado, tive o mesmo problema
Paul Taylor

2
@AndrewWillems infelizmente .textContente .innerText(embora seja bom para leitura), não funcionou para meu firefox60 para escrita (também apagou o campo de entrada incorporado, assim como .innerHTML). Então, tive que recorrer a document.getElementById('myLabel').childNodes[0].nodeValue="new label text"(claro, o índice pode ser algo diferente de 0, o que torna um pouco confuso, mas funcionou para mim)
Matija Nalis

9

Usar .innerTextdeve funcionar.

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

7

Esta é outra maneira de alterar o texto de um rótulo usando jQuery:

<script>
  $("#lbltipAddedComment").text("your tip has been submitted!");
</script>

Verifique o exemplo JsFiddle


0

Experimente isto:

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

1
Um link para uma solução é bem-vindo, mas certifique-se de que sua resposta seja útil sem ele: adicione contexto ao link para que seus outros usuários tenham uma ideia do que ele é e por que está lá, depois cite a parte mais relevante da página que você ' novo link para caso a página de destino não esteja disponível. Respostas que são pouco mais do que um link podem ser excluídas.
paper1111 de

0

Porque o script será executado primeiro. Quando o script for executado, os controles não serão carregados. Então, após carregar os controles, você escreve um script.

Vai funcionar.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.