Zmień tekst etykiety za pomocą JavaScript

90

Dlaczego poniższe nie działają dla mnie?

<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>
Phil Crowe
źródło
1
ups! przepraszam, że powinno być
``
4
Ponieważ podczas wykonywania skryptu próbujesz zmienić etykietę innerHtml, lbltipAddedComment w rzeczywistości nie występuje na stronie. Wstaw skrypt po etykiecie lub użyj jquery $ (document) .ready ()
Andrew Orsich,
przepraszam, nie widziałem przycisku edycji!
phil crowe,
próbowałem wszystkiego, co tu sugerowano, ale nic nie działało.
Rajan Mishra,

Odpowiedzi:

137

Ponieważ twój skrypt jest uruchamiany ZANIM etykieta istnieje na stronie (w DOM). Albo umieść skrypt za etykietą, albo poczekaj, aż dokument zostanie w pełni załadowany (użyj funkcji OnLoad, takiej jak jQuery ready()lub http://www.webreference.com/programming/javascript/onloads/ )

To nie zadziała:

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

To zadziała:

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

Ten przykład (łącze jsfiddle) utrzymuje kolejność (najpierw skrypt, a następnie etykieta) i używa 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
źródło
Myślę, że odpowiedź .textContent jest w rzeczywistości poprawna
Paul Taylor
1
Cóż, @PaulTaylor, ta odpowiedź jest dostępna od 2010 roku i ma 92 głosy za (a teraz, twój głos przeciw). Pytanie wykorzystywało innerHTML, więc zmieniłem tylko to, co było konieczne, aby uruchomić jego kod. Chociaż uważam, że zawsze dobrze jest zasugerować dodatkowe pomysły („hej, przy okazji, użyj textcontent zamiast innerhtml / innertext), to nie był problem OP ... Nie ma potrzeby, aby głosować przeciw.
Konerak
Okay, ale czy kiedykolwiek to działało jego ostatni komentarz był taki, że nic nie działało, więc zrozumiałem, że twoje rozwiązanie nie działa, z pewnością nie działa dla mnie, wygląda na to, że jsfiddle.net/cfxrLpe9/4 działa z textContent, ale nie innerHtml, dlaczego że?
Paul Taylor
@PaulTaylor Odpowiedź prawdopodobnie zadziałała w przypadku PO, ponieważ oznaczył tę odpowiedź jako zaakceptowaną. Masz literówkę w kodzie. Używasz innerHtml zamiast innerHTML, jak pokazuje odpowiedź. jsfiddle.net/cfxrLpe9/6
Randall Flagg
22

Próbowałeś .innerTextczy .valuezamiast tego .innerHTML?

Gordon M.
źródło
.innerText działa dla etykiety. Mam tag Script w <Head> i projekt w <body>. Chociaż to działa dobrze dla mnie.
Jai
@AshwinG Twój komentarz właśnie mnie uratował. .valuelabel
Biłem
Spróbuj użyć.text('Your Text')
podstępne
15

Ponieważ element etykiety nie jest ładowany podczas wykonywania skryptu. Zamień etykiety i elementy skryptu, a zadziała:

<label id="lbltipAddedComment"></label>
<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
mvladic
źródło
1
Och, nie zauważyłem tego! Tak, jeśli wysłany kod odzwierciedla rzeczywisty kod (nie używa jquery do uruchomienia na document.ready lub podobnym), to jest to powód, dla którego nie działałby tak dobrze.
GordonM,
9

Używanie .innerTextpowinno działać.

document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';
Shilpa
źródło
9

Użyj .textContentzamiast tego.

Zmagałem się również ze zmianą wartości etykiety, dopóki tego nie wypróbowałem.

Jeśli to nie rozwiąże problemu, spróbuj zbadać obiekt, aby zobaczyć, jakie właściwości możesz ustawić, logując się do konsoli, console.dirjak pokazano w poniższym pytaniu: Jak mogę zarejestrować element HTML jako obiekt JavaScript?

Pochi
źródło
Dziękuję Ci. Podejrzewam (ale nie potwierdziłem rygorystycznie), że mój przypadek użycia jest podobny do tego w pytaniu: próbowałem pobrać i / lub zmienić tekst etykiety, która ma zagnieżdżony element wejściowy, np. Chciałem pobrać i / lub zmienić "enter info here:"należy: <label id='myLabel'>enter info here:<input type='text' id='inp'/></label>. Tylko .textContentpracował, a żaden z .innerHTML, .innerTextlub .valuepracował. (Zastrzeżenie: sprawdzałem tylko w przeglądarce Chrome).
Andrew Willems
Dziękuję, napotkałem ten sam problem
Paul Taylor
2
@AndrewWillems niestety .textContenti .innerText(chociaż dobrze nadaje się do czytania), nie działał na moim firefox60 do pisania (również usuwał osadzone pole wejściowe, podobnie jak .innerHTML). Musiałem więc uciec się do document.getElementById('myLabel').childNodes[0].nodeValue="new label text"(oczywiście indeks może być czymś innym niż 0, co sprawia, że ​​jest trochę niezdarny, ale zadziałało)
Matija Nalis
7

Oto inny sposób zmiany tekstu etykiety za pomocą jQuery:

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

Sprawdź przykład JsFiddle

mustapha mekhatria
źródło
0

Spróbuj tego:

<label id="lbltipAddedComment"></label>
<script type="text/javascript"> 
      document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>
user1611219
źródło
1
Link do rozwiązania jest mile widziany, ale upewnij się, że Twoja odpowiedź jest przydatna bez niego: dodaj kontekst wokół linku, aby inni użytkownicy mieli pojęcie, co to jest i dlaczego się tam znajduje, a następnie zacytuj najbardziej odpowiednią część strony, którą podałeś. ponowne łącze w przypadku, gdy strona docelowa jest niedostępna. Odpowiedzi, które są niewiele więcej niż linkiem, mogą zostać usunięte.
paper1111,
0

Ponieważ skrypt zostanie wykonany jako pierwszy. Kiedy skrypt zostanie wykonany, w tym czasie kontrolki nie są ładowane. Więc po załadowaniu kontrolek piszesz skrypt.

To będzie działać.

Rachana
źródło