web-dev-qa-db-fra.com

Changer le texte de l'étiquette en utilisant JavaScript

Pourquoi les suivants ne fonctionnent-ils pas pour moi?

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

Parce que votre script s'exécute AVANT que l'étiquette existe sur la page (dans le DOM). Placez le script après le libellé ou attendez que le document soit complètement chargé (utilisez une fonction OnLoad, telle que jQuery ready() ou http://www.webreference.com/programming/ javascript/onloads / )

Cela ne fonctionnera pas:

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

Cela fonctionnera:

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

Cet exemple (lien jsfiddle) maintient l'ordre (le script en premier, puis le libellé) et utilise 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>
117
Konerak

Avez-vous essayé .innerText ou .value au lieu de .innerHTML?

19
GordonM

Parce qu'un élément label n'est pas chargé lorsqu'un script est exécuté. Echangez les éléments label et script, et cela fonctionnera:

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

Utilisez .textContent à la place.

J'avais également du mal à changer la valeur d'une étiquette jusqu'à ce que j'essaye de le faire.

Si cela ne résout pas le problème, essayez d'inspecter l'objet pour voir quelles propriétés vous pouvez définir en le connectant à la console avec console.dir, comme indiqué sur cette question: Comment enregistrer un élément HTML en tant qu'objet JavaScript ?

9
Pochi

Utiliser .innerText devrait fonctionner.

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

Voici un autre moyen de changer le texte d'une étiquette à l'aide de jQuery:

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

Vérifiez le exemple de JsFiddle

4
mustapha mekhatria

Parce que le script sera exécuté en premier. Lorsque le script sera exécuté, les contrôles ne sont pas chargés. Donc, après le chargement des contrôles, vous écrivez un script.

Ça va marcher.

0
Rachana

Essaye ça:

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