Bagaimana Anda menetapkan nilai ke variabel dalam html?

Question

Tutorial ini akan menunjukkan kepada Anda bagaimana menggunakan ketiga cara untuk menampilkan variabel JavaScript di halaman HTML. Mari kita mulai dengan menggunakan metode

<body>
  Hello
</body>

0

Table of Contents Show

Tampilkan variabel JavaScript menggunakan metode <body> Hello </body> 0
Tampilkan variabel JavaScript menggunakan properti innerHTML
Tampilkan variabel JavaScript menggunakan jendela. waspada() metode
Bagaimana Anda menetapkan nilai variabel dalam HTML?
Bagaimana Anda menetapkan nilai ke variabel?
Bisakah Anda mendefinisikan variabel dalam HTML?

Tampilkan variabel JavaScript menggunakan metode <body> Hello </body> 0

Metode

<body>
  Hello
</body>

0 memungkinkan Anda mengganti seluruh konten tag HTML

<body>
  Hello
</body>

6 dengan ekspresi HTML dan JavaScript yang ingin ditampilkan di dalam tag

<body>
  Hello
</body>

6. Misalkan Anda memiliki elemen HTML berikut

<body>
  <h1>Hello World</h1>
  <p>Greetings</p>
</body>

Saat Anda menjalankan metode

<body>
  Hello
</body>

_8 pada bagian HTML di atas, konten

<body>
  Hello
</body>

6 akan diganti sebagai berikut

<body>
  Hello
</body>

Mengetahui hal ini, Anda dapat menampilkan nilai variabel JavaScript apa pun hanya dengan meneruskan nama variabel sebagai parameter ke metode

<body>
  Hello
</body>

0

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

Metode

<body>
  Hello
</body>

0 umumnya digunakan hanya untuk tujuan pengujian karena akan menghapus semua elemen HTML yang ada di dalam tag

<body>
  Hello
</body>

6 Anda. Sebagian besar, Anda ingin menampilkan variabel JavaScript di samping elemen HTML Anda. Untuk melakukan itu, Anda perlu menggunakan metode selanjutnya

Tampilkan variabel JavaScript menggunakan properti innerHTML

Setiap elemen HTML memiliki properti

<body>
  Hello
</body>

_1 yang menyimpan konten elemen tersebut. Browser memungkinkan Anda untuk memanipulasi properti

<body>
  Hello
</body>

_1 dengan menggunakan JavaScript hanya dengan menetapkan properti ke nilai yang berbeda

Misalnya, bayangkan Anda memiliki tag HTML

<body>
  Hello
</body>

6 berikut

<body>
  <h1 id="header">Hello World</h1>
  <p id="greeting">Greetings</p>
</body>

Anda dapat mengganti konten tag

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

_6 dengan terlebih dahulu mengambil elemen menggunakan pengenalnya. Karena elemen

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

_6 memiliki atribut

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

8 dengan nilai

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

9, Anda dapat menggunakan metode

<body>
  <h1 id="header">Hello World</h1>
  <p id="greeting">Greetings</p>
</body>

0 untuk mengambilnya dan mengubah properti

<body>
  Hello
</body>

1 miliknya

Inilah cara Anda melakukannya

document.getElementById("greeting").innerHTML = "Bonjour";

Konten tag

let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag

_6 akan diubah sebagai berikut

<body>
  <h1 id="header">Hello World</h1>
  <p id="greeting">Bonjour</p>
</body>

Mengetahui hal ini, Anda cukup membungkus ruang di mana Anda ingin variabel JavaScript Anda ditampilkan dengan elemen

<body>
  <h1 id="header">Hello World</h1>
  <p id="greeting">Greetings</p>
</body>

3 sebagai berikut

<body>
  <h1>Hello, my name is <span id="name"></span></h1>
  <script>
    let name = "Nathan";
    document.getElementById("name").innerHTML = name;
  </script>
</body>

Kode di atas akan menampilkan HTML berikut

<h1>Hello, my name is <span id="name">Nathan</span></h1>

Dan begitulah cara Anda menampilkan nilai variabel JavaScript menggunakan properti

<body>
  Hello
</body>

1

Tampilkan variabel JavaScript menggunakan jendela. waspada() metode

Metode

<body>
  Hello
</body>

2 memungkinkan Anda meluncurkan kotak dialog di bagian depan halaman HTML Anda. Misalnya, saat Anda mencoba menjalankan halaman HTML berikut

<body>
  <h1>Hello World</h1>
  <script>
    window.alert("Greetings");
  </script>
</body>

Kotak dialog berikut akan muncul di browser Anda

The JavaScript alert box example Contoh kotak peringatan JavaScript

Implementasi untuk setiap browser akan sedikit berbeda, tetapi semuanya berfungsi sama. Mengetahui hal ini, Anda dapat dengan mudah menggunakan kotak dialog untuk menampilkan nilai variabel JavaScript. Cukup berikan nama variabel ke metode

<body>
  <h1 id="header">Hello World</h1>
  <p id="greeting">Greetings</p>
</body>

6 sebagai berikut

<body>
  <h1>Hello World</h1>
  <script>
    let name = "Nathan JS"
    window.alert(name);
  </script>
</body>

Kode di atas akan meluncurkan kotak dialog yang menampilkan nilai variabel

<body>
  <h1 id="header">Hello World</h1>
  <p id="greeting">Greetings</p>
</body>

7

Kesimpulan

Menampilkan variabel JavaScript di halaman HTML adalah tugas umum untuk pengembang web. Peramban modern memungkinkan Anda untuk memanipulasi konten HTML dengan memanggil metode JavaScript API yang terbuka

Cara paling umum untuk menampilkan nilai variabel JavaScript adalah dengan memanipulasi nilai properti

<body>
  Hello
</body>

1, tetapi saat menguji variabel Anda, Anda juga dapat menggunakan metode

<body>
  Hello
</body>

0 atau

<body>
  Hello
</body>

2. Anda bebas menggunakan metode yang paling cocok untuk Anda

Bagaimana Anda menetapkan nilai variabel dalam HTML?

Gunakan tag . Tag HTML

Bagaimana Anda menetapkan nilai ke variabel?

Anda dapat menetapkan nilai ke variabel rutin dengan salah satu cara berikut. .

Gunakan pernyataan LET

Gunakan pernyataan SELECT INTO

Gunakan pernyataan CALL dengan prosedur yang memiliki klausa RETURNING

Gunakan pernyataan EXECUTE PROCEDURE INTO atau EXECUTE FUNCTION INTO

Bisakah Anda mendefinisikan variabel dalam HTML?

Dalam artikel ini, kita mendefinisikan variabel dalam HTML dengan menggunakan tag . Ini adalah tag frase dan digunakan untuk menentukan variabel dalam persamaan matematika atau dalam program komputer. Konten tag ini ditampilkan dalam format miring di sebagian besar browser.

kode html