Cara mengatur nilai elemen di javascript

Question

Properti value_ dapat digunakan untuk mengatur atau memperbarui nilai elemen pilih. Untuk menghapus pilihan, setel nilai ke string kosong

Table of Contents Show

Menghapus pilihan
Mendapatkan larik nilai dari semua elemen opsi
Mengubah nilai elemen value_0
Mengatur nilai elemen textarea menggunakan JavaScript
Mengatur nilai elemen input teks melalui JavaScript
Bagaimana cara mengatur nilai elemen formulir dalam JavaScript?
Bagaimana cara mendapatkan nilai elemen dalam JavaScript?
Bagaimana cara mengubah nilai input dalam JavaScript?
Bagaimana cara mengatur nilai suatu elemen di jquery?

Berikut adalah HTML untuk contoh dalam artikel ini



  
    
    bobbyhadz.com
  

  
    
      
      
      
      
    

    Click

Dan inilah kode JavaScript terkait

Kami menggunakan properti value_ untuk menetapkan nilai elemen pilih

Konvensi ketika Anda tidak memiliki nilai default adalah membuat nilai elemen option pertama menjadi string kosong

Menghapus pilihan

Untuk menghapus pilihan, atur properti value_ dari elemen pilih ke string kosong

Mendapatkan larik nilai dari semua elemen opsi

Jika Anda memerlukan larik nilai dari semua elemen option, gunakan metode map() untuk mengulangi elemen dan mengembalikan nilai setiap option

Mengubah nilai elemen value_0

Nilai elemen value_0 dapat diubah dengan cara yang sama, cukup perbarui properti value

Jika Anda menyetel nilai elemen pilih ke nilai yang tidak ada di antara elemenoption, nilai elemen value0 akan disetel ulang

Anda dapat membuat objek yang menyimpan nilai dari elemen option untuk menghindari salah mengeja nilai

Ini adalah solusi yang jauh lebih baik daripada string pengkodean keras di semua tempat karena ini memanfaatkan pelengkapan otomatis IDE Anda

Ini juga membantu pembaca kode Anda mengetahui nilai alternatif dari elemen value0

Seperti yang telah kita lihat di artikel sebelumnya, untuk bekerja dengan form di JavaScript, sangat penting untuk mendapatkan referensi ke objek form dan elemen-elemennya. Pada artikel ini, kita akan menggunakan kumpulan formulir dari objek dokumen dan kumpulan elemen dari objek formulir untuk mengatur nilai elemen formulir. Sintaks untuk mengakses objek form adalah seperti di bawah ini

oFormObject = document.forms['myform_id'];

_

Untuk mengakses elemen individual, kami menggunakan kode berikut

oformElement = oFormObject.elements[index];

ATAU

oFormElement = oFormObject.elements["element_name"];

Dalam kode di atas, "indeks" mengacu pada posisi elemen dalam larik koleksi "elemen", dan "nama_elemen" adalah nama elemen. Kedua pendekatan memberi kita referensi ke elemen bentuk yang diinginkan

Mengatur nilai elemen textarea menggunakan JavaScript

Untuk mengatur nilai elemen bidang textarea dalam formulir, kita dapat menggunakan kode berikut

oFormObject.elements["element_name"].value = 'Some Value';

_

Jika kita mengakses objek form melalui salah satu elemen form itu sendiri, kita juga dapat menggunakan kode berikut

this.form.elements["element_name"].value = 'Some Value';

Mari kita lihat contoh formulir sederhana


<form id="register_complaint" action="#">

Full Name: <input type="text" size="30" maxlength="155" name="name" />

Email Id: <input type="text" size="30" maxlength="155" name="email" />

Service Complaint: <textarea name="service_complaint" rows="7" cols="50"></textarea>

<input type="button" name="submit" value="Submit Complaint" onclick="showElements(this.form);" />

</form>

_

Lihat demonya

Saat halaman dimuat, kolom textarea "service_complaint" memiliki catatan yang ditulis untuk pengguna. “Silakan masukkan keluhan Anda sebentar”, tetapi ketika fokus disetel ke bidang itu, pesan ini menghilang sebagaimana mestinya. Untuk mengimplementasikan fitur ini, kita perlu menulis event handler onLoad untuk tag

oformElement = oFormObject.elements[index];

3 yang akan menetapkan nilai awal elemen textarea


<body onload="initForm(document.forms[0], 'service_complaint', 'Please enter your complaint in brief');">

_

Fungsi initForm dapat diimplementasikan dengan cara ini


function initForm(oForm, element_name, init_txt)
{
     frmElement = oForm.elements[element_name];
      frmElement.value = init_txt;
}

_

Anda juga harus memperhatikan bahwa pesan awal ini tidak muncul kembali bahkan setelah fokus dihapus dan diberikan lagi ke bidang ini. Kami melakukan ini dengan menulis event handler onFocus untuk elemen textarea. Kode di bawah ini bersifat umum, yang dapat digunakan untuk bidang lain seperti bidang input teks juga


function clearFieldFirstTime(element)
{
   if(element.counter==undefined)
   {
      element.counter = 1;
   }
   else
   {
      element.counter++;
   }

   if (element.counter == 1)
   {
      element.value = '';
   }
}

Pertama kali elemen textarea diberi fokus, properti “counter” untuk elemen textarea tidak ditentukan, sehingga kita dapat mengatur counter, dengan memberikan nilai awal 1. Setelah itu, pada fokus berikutnya, penghitung ini bertambah. Nilai textarea direset hanya saat pertama kali bidang textarea mendapat fokus, dengan menyetel atribut nilainya ke string kosong

Unduh kodenya

Mengatur nilai elemen input teks melalui JavaScript

Untuk mengatur nilai elemen bidang input teks dalam formulir, kita dapat menggunakan kode berikut

oFormObject.elements["element_name"].value = 'Some Value';

_

Mari kita lihat contoh untuk mengilustrasikan cara mengatur nilai elemen input teks melalui javascript

Formulir dalam demo ini memiliki kolom input teks “membership_period” yang diperbarui melalui penggunaan dua elemen tombol JavaScript. Lihat cara HTML dikodekan

oformElement = oFormObject.elements[index];

0

Seperti yang pasti Anda lihat di demo, bidang teks bernama "keanggotaan_periode" memiliki nilai default 6 saat formulir dimuat, yang dapat diubah baik dengan langsung memasukkan nilai di bidang input teks, atau dengan menyesuaikan nilai melalui . Kita sekarang perlu menulis fungsi javascript yang dapat berfungsi sebagai event handler onClick dari dua tombol

Dalam fungsinya, pertama-tama kita perlu mengidentifikasi mana dari dua tombol yang diklik

oformElement = oFormObject.elements[index];

1

Untuk kasus 'naikkan', kita perlu memeriksa apakah nilai yang ingin kita tambahkan adalah bilangan bulat, dan jika ya, maka kita menaikkannya

oformElement = oFormObject.elements[index];

2

Fungsi isEmpty() memeriksa apakah nilai kolom input teks kosong atau tidak, dan fungsi isInteger() memeriksa apakah nilainya bilangan bulat. Jika semua tes ini mengembalikan nilai true, kami menaikkan nilainya menggunakan konstruk. txtElement. nilai ++. Lihat contoh kode untuk penerapan fungsi-fungsi ini

Bagaimana cara mengatur nilai elemen formulir dalam JavaScript?

Mengatur nilai elemen input teks melalui JavaScript. Untuk mengatur nilai elemen bidang input teks dalam formulir, kita dapat menggunakan kode berikut. oFormObject. elemen["nama_elemen"].

Bagaimana cara mendapatkan nilai elemen dalam JavaScript?

Untuk mendapatkan nilai elemen, gunakan properti “value” dengan metode “getelementById()” untuk mendapatkan referensi dari .

Bagaimana cara mengubah nilai input dalam JavaScript?

Ada dua pendekatan untuk mengubah nilai kolom input menggunakan JavaScript. Ini adalah. Menetapkan atribut nilai suatu elemen beberapa nilai menggunakan operator penugasan “=” Dengan menggunakan fungsi SetAttribute() .

Bagaimana cara mengatur nilai suatu elemen di jquery?

Metode val() mengembalikan atau menyetel atribut nilai dari elemen yang dipilih. Ketika digunakan untuk mengembalikan nilai. Metode ini mengembalikan nilai atribut value dari elemen yang cocok dengan PERTAMA.

kode javascript