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>

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>

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?


.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>

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?


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!';


0

Prueba esto:

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

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á.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.