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.