Cambiar el texto de la etiqueta usando JavaScript

90

¿Por qué no me funciona lo siguiente?

<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>
Phil Crowe
fuente
1
¡Ups! lo siento, debería ser 'no'; 0
phil crowe
4
Porque cuando su script intenta cambiar la etiqueta innerHtml, lbltipAddedComment en realidad no está presente en la página. Inserte el script después de la etiqueta o use jquery $ (document) .ready ()
Andrew Orsich
lo siento, no vi el botón de edición!
phil crowe
Intenté todo lo sugerido aquí, pero nada funcionó para mí.
Rajan Mishra

Respuestas:

137

Porque su secuencia de comandos se ejecuta ANTES de que la etiqueta exista en la página (en el DOM). Coloque el script después de la etiqueta o espere hasta que el documento se haya cargado por completo (use una función OnLoad, como jQuery ready()o http://www.webreference.com/programming/javascript/onloads/ )

Esto no funcionará:

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

Esto funcionará:

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

Este ejemplo (enlace jsfiddle) mantiene el orden (primero el script, luego la etiqueta) y usa un 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
fuente
Creo que la respuesta de .textContent es en realidad la correcta
Paul Taylor
1
Bueno, @PaulTaylor, esta respuesta está aquí desde 2010 y tiene 92 votos a favor (y ahora, su voto en contra). La pregunta usó innerHTML, así que solo cambié lo que era necesario para que su código se moviera. Si bien creo que siempre está bien sugerir ideas adicionales ("hey, por cierto, use textcontent en lugar de innerhtml / innertext), ese no fue el problema de OP ... No hay necesidad de votar en contra.
Konerak
De acuerdo, pero ¿alguna vez logró que funcionara? Su último comentario fue que nada funcionó, así que entendí que su solución no funcionó, ciertamente no funcionó para mí, parece que jsfiddle.net/cfxrLpe9/4 funciona con textContent pero no innerHtml, ¿por qué es ese ?
Paul Taylor
@PaulTaylor La respuesta probablemente funcionó para el OP, ya que marcó esta respuesta como aceptada. Tiene un error tipográfico en su código. Está utilizando innerHtml en lugar de innerHTML como muestra la respuesta. jsfiddle.net/cfxrLpe9/6
Randall Flagg
22

¿Has probado .innerTexto en .valuelugar de .innerHTML?

GordonM
fuente
.innerText funciona para label. Tengo la etiqueta Script dentro de <Head> y el diseño en <body>. Aunque funciona bien para mí.
Jai
@AshwinG Tu comentario me acaba de salvar. Yo estaba golpeando mi cabeza con .valueparalabel
Prabs
Intenta usar.text('Your Text')
furtivo
15

Porque un elemento de etiqueta no se carga cuando se ejecuta un script. Cambie la etiqueta y los elementos del script y funcionará:

<label id="lbltipAddedComment"></label>
<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
mvladic
fuente
1
¡Oh, no me di cuenta de eso! Sí, si el código publicado refleja el código real (no está usando jquery para disparar en document.ready o similar), entonces esa es una razón por la que no funcionaría tan bien.
GordonM
9

Úselo en su .textContentlugar.

También estaba luchando con cambiar el valor de una etiqueta, hasta que probé esto.

Si esto no se resuelve, intente inspeccionar el objeto para ver qué propiedades puede establecer registrándolo en la consola console.dircomo se muestra en esta pregunta: ¿Cómo puedo registrar un elemento HTML como un objeto JavaScript?

Pochi
fuente
Gracias. Sospecho (pero no he confirmado rigurosamente) que mi caso de uso es similar al de la pregunta: estaba tratando de recuperar y / o cambiar el texto de una etiqueta que tiene un elemento de entrada anidado, por ejemplo, quería recuperar y / o cambiar la "enter info here:"parte del siguiente: <label id='myLabel'>enter info here:<input type='text' id='inp'/></label>. Solo .textContenttrabajó, y ninguno de .innerHTML, .innerTextni .valuefuncionó. (Descargo de responsabilidad: solo he verificado en Chrome)
Andrew Willems
Gracias, tuve el mismo problema
Paul Taylor
2
@AndrewWillems desafortunadamente .textContenty .innerText(aunque está bien para leer), no funcionó para mi firefox60 para escribir (también borró el campo de entrada incrustado, al igual que .innerHTML). Así que tuve que recurrir a document.getElementById('myLabel').childNodes[0].nodeValue="new label text"(por supuesto, el índice podría ser algo diferente a 0, lo que hace que sea un poco torpe, pero me funcionó)
Matija Nalis
8

El uso .innerTextdebería funcionar.

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

Aquí hay otra forma de cambiar el texto de una etiqueta usando jQuery:

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

Verifique el ejemplo de JsFiddle

mustapha mekhatria
fuente
0

Prueba esto:

<label id="lbltipAddedComment"></label>
<script type="text/javascript"> 
      document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>
user1611219
fuente
1
Un enlace a una solución es bienvenido, pero asegúrese de que su respuesta sea útil sin él: agregue contexto alrededor del enlace para que sus compañeros usuarios tengan una idea de qué es y por qué está allí, luego cite la parte más relevante de la página. está enlazando a en caso de que la página de destino no esté disponible. Las respuestas que son poco más que un enlace pueden eliminarse.
paper1111
0

Porque la secuencia de comandos se ejecutará primero. Cuando la secuencia de comandos se ejecutará, en ese momento los controles no se cargan. Entonces, después de cargar los controles, escribe un script.

Funcionará.

Rachana
fuente