Ubah teks label menggunakan JavaScript

Question 1

Mengapa berikut ini tidak berhasil untuk saya?

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

Question 2

Karena skrip Anda berjalan SEBELUM label ada di halaman (di DOM). Letakkan skrip setelah label, atau tunggu hingga dokumen dimuat sepenuhnya (gunakan fungsi OnLoad, seperti jQuery ready()atau http://www.webreference.com/programming/javascript/onloads/ )

Ini tidak akan berhasil:

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

Ini akan berhasil:

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

Contoh ini (jsfiddle link) mempertahankan urutan (skrip dulu, lalu label) dan menggunakan 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>

Question 3

Sudahkah Anda mencoba .innerTextatau .valuebukannya .innerHTML?

Question 4

Karena elemen label tidak dimuat saat skrip dijalankan. Tukar label dan elemen skrip, dan itu akan berfungsi:

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

Question 5

Menggunakan .innerTextharus bekerja.

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

Question 6

Gunakan .textContentsebagai gantinya.

Saya juga berjuang untuk mengubah nilai label, sampai saya mencobanya.

Jika ini tidak menyelesaikan, coba periksa objek untuk melihat properti apa yang dapat Anda setel dengan memasukkannya ke konsol console.dirseperti yang ditunjukkan pada pertanyaan ini: Bagaimana cara membuat log elemen HTML sebagai objek JavaScript?

Question 7

Berikut cara lain untuk mengubah teks label menggunakan jQuery:

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

Periksa contoh JsFiddle

Question 8

Coba ini:

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

Question 9

Karena skrip akan dieksekusi lebih dulu .. Saat skrip akan dijalankan, pada saat itu kontrol tidak dimuat. Jadi setelah memuat kontrol Anda menulis skrip.

Ini akan berhasil.

Answer 1

90

Mengapa berikut ini tidak berhasil untuk saya?

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

javascript html label innerhtml phil crowe
sumber

1

Ups! maaf yang seharusnya 'tidak'; 0

phil crowe

4

Karena ketika skrip Anda mencoba mengubah label innerHtml, lbltipAddedComment sebenarnya tidak ada di halaman. Sisipkan skrip setelah label atau gunakan jquery $ (document) .ready ()

Andrew Orsich

maaf tidak melihat tombol edit!

phil crowe

saya mencoba semua yang disarankan di sini tetapi tidak ada yang berhasil untuk saya.

Rajan Mishra

Answer 2

1

Ups! maaf yang seharusnya 'tidak'; 0

phil crowe

Answer 3

4

Karena ketika skrip Anda mencoba mengubah label innerHtml, lbltipAddedComment sebenarnya tidak ada di halaman. Sisipkan skrip setelah label atau gunakan jquery $ (document) .ready ()

Andrew Orsich

Answer 4

maaf tidak melihat tombol edit!

phil crowe

Answer 5

saya mencoba semua yang disarankan di sini tetapi tidak ada yang berhasil untuk saya.

Rajan Mishra

Answer 6

137

Karena skrip Anda berjalan SEBELUM label ada di halaman (di DOM). Letakkan skrip setelah label, atau tunggu hingga dokumen dimuat sepenuhnya (gunakan fungsi OnLoad, seperti jQuery ready()atau http://www.webreference.com/programming/javascript/onloads/ )

Ini tidak akan berhasil:

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

Ini akan berhasil:

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

Contoh ini (jsfiddle link) mempertahankan urutan (skrip dulu, lalu label) dan menggunakan 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
sumber

Saya pikir jawaban .textContent sebenarnya adalah yang benar

Paul Taylor

1

Ya @PaulTaylor, jawaban ini ada di sini sejak 2010 dan memiliki 92 suara positif (dan sekarang, suara negatif Anda). Pertanyaannya menggunakan innerHTML jadi saya hanya mengubah apa yang diperlukan agar kodenya bergerak. Meskipun saya merasa tidak masalah untuk menyarankan ide tambahan ("hey, btw, gunakan textcontent daripada innerhtml / innertext), itu bukan masalah OP ... Tidak perlu downvote.

Konerak

Oke tetapi apakah dia pernah membuatnya berfungsi, komentar terakhirnya adalah tidak ada yang berhasil jadi menurut pemahaman saya bahwa solusi Anda tidak berfungsi, certianly tidak berhasil untuk saya, terlihat jsfiddle.net/cfxrLpe9/4 ini berfungsi dengan textContent tetapi tidak innerHtml, mengapa itu?

Paul Taylor

@PaulTaylor Jawabannya mungkin berhasil untuk OP karena dia menandai jawaban ini sebagai diterima. Ada kesalahan ketik pada kode Anda. Anda menggunakan innerHtml daripada innerHTML seperti yang ditunjukkan jawabannya. jsfiddle.net/cfxrLpe9/6

Randall Flagg

Answer 7

Saya pikir jawaban .textContent sebenarnya adalah yang benar

Paul Taylor

Answer 8

1

Ya @PaulTaylor, jawaban ini ada di sini sejak 2010 dan memiliki 92 suara positif (dan sekarang, suara negatif Anda). Pertanyaannya menggunakan innerHTML jadi saya hanya mengubah apa yang diperlukan agar kodenya bergerak. Meskipun saya merasa tidak masalah untuk menyarankan ide tambahan ("hey, btw, gunakan textcontent daripada innerhtml / innertext), itu bukan masalah OP ... Tidak perlu downvote.

Konerak

Answer 9

Oke tetapi apakah dia pernah membuatnya berfungsi, komentar terakhirnya adalah tidak ada yang berhasil jadi menurut pemahaman saya bahwa solusi Anda tidak berfungsi, certianly tidak berhasil untuk saya, terlihat jsfiddle.net/cfxrLpe9/4 ini berfungsi dengan textContent tetapi tidak innerHtml, mengapa itu?

Paul Taylor

Answer 10

@PaulTaylor Jawabannya mungkin berhasil untuk OP karena dia menandai jawaban ini sebagai diterima. Ada kesalahan ketik pada kode Anda. Anda menggunakan innerHtml daripada innerHTML seperti yang ditunjukkan jawabannya. jsfiddle.net/cfxrLpe9/6

Randall Flagg

Answer 11

22

Sudahkah Anda mencoba .innerTextatau .valuebukannya .innerHTML?

GordonM
sumber

.innerText berfungsi untuk label. Saya memiliki tag Script di dalam <Head> dan desain di <body>. Meskipun itu bekerja dengan baik untuk saya.

Jai

@AshwinG Komentar Anda baru saja menyelamatkan saya. Saya memukuli kepala saya dengan .valueforlabel

Prabs

Coba gunakan.text('Your Text')

licik

Answer 12

.innerText berfungsi untuk label. Saya memiliki tag Script di dalam <Head> dan desain di <body>. Meskipun itu bekerja dengan baik untuk saya.

Jai

Answer 13

@AshwinG Komentar Anda baru saja menyelamatkan saya. Saya memukuli kepala saya dengan .valueforlabel

Prabs

Answer 14

Coba gunakan.text('Your Text')

licik

Answer 15

15

Karena elemen label tidak dimuat saat skrip dijalankan. Tukar label dan elemen skrip, dan itu akan berfungsi:

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

mvladic.dll
sumber

1

Oh, tidak menyadarinya! Ya, jika kode yang diposting mencerminkan kode sebenarnya (tidak menggunakan jquery untuk mengaktifkan document.ready atau serupa) maka itulah alasan mengapa itu tidak akan berfungsi juga.

GordonM

Answer 16

1

Oh, tidak menyadarinya! Ya, jika kode yang diposting mencerminkan kode sebenarnya (tidak menggunakan jquery untuk mengaktifkan document.ready atau serupa) maka itulah alasan mengapa itu tidak akan berfungsi juga.

GordonM

Answer 17

9

Menggunakan .innerTextharus bekerja.

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

Shilpa
sumber

Answer 18

9

Gunakan .textContentsebagai gantinya.

Saya juga berjuang untuk mengubah nilai label, sampai saya mencobanya.

Jika ini tidak menyelesaikan, coba periksa objek untuk melihat properti apa yang dapat Anda setel dengan memasukkannya ke konsol console.dirseperti yang ditunjukkan pada pertanyaan ini: Bagaimana cara membuat log elemen HTML sebagai objek JavaScript?

Pochi
sumber

Terima kasih. Saya menduga (tetapi belum benar-benar mengonfirmasi) bahwa kasus penggunaan saya mirip dengan yang ada di pertanyaan: Saya mencoba mengambil dan / atau mengubah teks label yang memiliki elemen masukan bersarang, misalnya saya ingin mengambil dan / atau mengubah "enter info here:"bagian dari berikut: <label id='myLabel'>enter info here:<input type='text' id='inp'/></label>. Hanya .textContentbekerja, dan tidak ada .innerHTML, .innerTextatau .valueberhasil. (Penafian: Saya hanya memeriksa di Chrome.)

Andrew Willems

Terima kasih, saya mengalami masalah yang sama

Paul Taylor

2

@AndrewWillems sayangnya .textContentdan .innerText(meskipun baik-baik saja untuk membaca), tidak berfungsi untuk firefox60 saya untuk menulis (itu juga menghapus bidang input yang disematkan, sama seperti .innerHTML). Jadi saya harus menggunakan document.getElementById('myLabel').childNodes[0].nodeValue="new label text"(tentu saja, indeks mungkin sesuatu yang lain dari 0, yang membuat sedikit kludgy tapi berhasil untuk saya)

Matija Nalis

Answer 19

Terima kasih. Saya menduga (tetapi belum benar-benar mengonfirmasi) bahwa kasus penggunaan saya mirip dengan yang ada di pertanyaan: Saya mencoba mengambil dan / atau mengubah teks label yang memiliki elemen masukan bersarang, misalnya saya ingin mengambil dan / atau mengubah "enter info here:"bagian dari berikut: <label id='myLabel'>enter info here:<input type='text' id='inp'/></label>. Hanya .textContentbekerja, dan tidak ada .innerHTML, .innerTextatau .valueberhasil. (Penafian: Saya hanya memeriksa di Chrome.)

Andrew Willems

Answer 20

Terima kasih, saya mengalami masalah yang sama

Paul Taylor

Answer 21

2

@AndrewWillems sayangnya .textContentdan .innerText(meskipun baik-baik saja untuk membaca), tidak berfungsi untuk firefox60 saya untuk menulis (itu juga menghapus bidang input yang disematkan, sama seperti .innerHTML). Jadi saya harus menggunakan document.getElementById('myLabel').childNodes[0].nodeValue="new label text"(tentu saja, indeks mungkin sesuatu yang lain dari 0, yang membuat sedikit kludgy tapi berhasil untuk saya)

Matija Nalis

Answer 22

7

Berikut cara lain untuk mengubah teks label menggunakan jQuery:

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

Periksa contoh JsFiddle

mustapha mekhatria
sumber

Answer 23

0

Coba ini:

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

pengguna1611219
sumber

1

Tautan ke solusi diperbolehkan, tetapi harap pastikan jawaban Anda berguna tanpanya: tambahkan konteks di sekitar tautan sehingga sesama pengguna Anda akan tahu apa itu dan mengapa itu ada, lalu kutip bagian paling relevan dari halaman Anda ' menautkan ulang jika halaman target tidak tersedia. Jawaban yang tidak lebih dari sebuah tautan dapat dihapus.

kertas1111

Answer 24

1

Tautan ke solusi diperbolehkan, tetapi harap pastikan jawaban Anda berguna tanpanya: tambahkan konteks di sekitar tautan sehingga sesama pengguna Anda akan tahu apa itu dan mengapa itu ada, lalu kutip bagian paling relevan dari halaman Anda ' menautkan ulang jika halaman target tidak tersedia. Jawaban yang tidak lebih dari sebuah tautan dapat dihapus.

kertas1111

Answer 25

0

Karena skrip akan dieksekusi lebih dulu .. Saat skrip akan dijalankan, pada saat itu kontrol tidak dimuat. Jadi setelah memuat kontrol Anda menulis skrip.

Ini akan berhasil.

Rachana
sumber

Ubah teks label menggunakan JavaScript

Jawaban: