Bagaimana Anda menambahkan variabel dalam html?

Question

Saat ini saya menggunakan aktivitas "Buat Konten HTML". Bagaimana saya bisa memasukkan variabel?

Nội dung chính Show

Tampilkan variabel JavaScript menggunakan metode Hello 0
Tampilkan variabel JavaScript menggunakan properti innerHTML
Tampilkan variabel JavaScript menggunakan jendela. waspada() metode
Apakah HTML memiliki variabel?
Bagaimana Anda menampilkan nilai variabel dalam HTML?
Bagaimana Anda menata variabel dalam HTML?
Bagaimana Anda menambahkan variabel ke a href?

Saya merasa ini adalah solusi yang mudah, tetapi tidak ada yang saya temukan yang berhasil

Ini tangkapan layar Konten HTML saya dan tampilan kodenya

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

Tampilkan variabel JavaScript menggunakan metode Hello 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 Worldh1>
  <p>Greetingsp>
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  tag

let num = 999;
document.write(num); // Writes 999 to the  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 Worldh1>
  <p id="greeting">Greetingsp>
body>

Anda dapat mengganti konten tag

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

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

_6 dengan terlebih dahulu mengambil elemen menggunakan pengenalnya. Karena elemen

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

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

_6 memiliki atribut

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

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

8 dengan nilai

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

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

9, Anda dapat menggunakan metode

<body>
  <h1 id="header">Hello Worldh1>
  <p id="greeting">Greetingsp>
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  tag

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

_6 akan diubah sebagai berikut

<body>
  <h1 id="header">Hello Worldh1>
  <p id="greeting">Bonjourp>
body>

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

<body>
  <h1 id="header">Hello Worldh1>
  <p id="greeting">Greetingsp>
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">Nathanspan>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 Worldh1>
  <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 Worldh1>
  <p id="greeting">Greetingsp>
body>

6 sebagai berikut

<body>
  <h1>Hello Worldh1>
  <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 Worldh1>
  <p id="greeting">Greetingsp>
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

Apakah HTML memiliki variabel?

: The Variable element. Elemen HTML .

Bagaimana Anda menampilkan nilai variabel dalam HTML?

Ada tiga cara untuk menampilkan nilai variabel JavaScript di halaman HTML. .

Tampilkan variabel menggunakan dokumen. menulis() metode

Tampilkan variabel ke konten elemen HTML menggunakan properti innerHTML

Tampilkan variabel menggunakan jendela. waspada() metode

Bagaimana Anda menata variabel dalam HTML?

Untuk mendeklarasikan variabel di CSS, munculkan nama variabel, lalu tambahkan dua tanda hubung (–) sebagai awalan . Elemen di sini mengacu pada elemen HTML apa pun yang valid yang memiliki akses ke file CSS ini. Nama variabelnya adalah bg-color , dan dua tanda hubung ditambahkan.

Bagaimana Anda menambahkan variabel ke a href?

href”, tambahkan variabel ke dalamnya (Di sini kita telah menggunakan variabel bernama “XYZ”). Kemudian kita perlu menambahkan nilai ke URL. .

“lokasi. href” -> Ini adalah seluruh URL dari halaman saat ini

“ini” -> Merujuk pada tag 'a' yang telah diklik

"ini. href” -> mengambil nilai href dari tag 'a'

kode html

Bagaimana Anda menambahkan variabel dalam html?

Tampilkan variabel JavaScript menggunakan metode Hello 0

Tampilkan variabel JavaScript menggunakan properti innerHTML

Tampilkan variabel JavaScript menggunakan jendela. waspada() metode

Kesimpulan

Apakah HTML memiliki variabel?

Bagaimana Anda menampilkan nilai variabel dalam HTML?

Bagaimana Anda menata variabel dalam HTML?

Bagaimana Anda menambahkan variabel ke a href?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội