Ubah teks label menggunakan JavaScript

90

Mengapa berikut ini tidak berhasil untuk saya?

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

— 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

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

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

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

9

Menggunakan .innerTextharus bekerja.

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

— Shilpa
sumber

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

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

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

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