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>
Phil Crowe
fonte
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>
Konerak
fonte
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?

GordonM
fonte
.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>
mvladic
fonte
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?

Pochi
fonte
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!';
Shilpa
fonte
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

mustapha mekhatria
fonte
0

Experimente isto:

<label id="lbltipAddedComment"></label>
<script type="text/javascript"> 
      document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>
user1611219
fonte
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.

Rachana
fonte