Gán giá trị cho biến trong html

Question

Hướng dẫn này sẽ chỉ cho bạn cách sử dụng cả ba cách để hiển thị các biến JavaScript trong trang HTML. Hãy bắt đầu với việc sử dụng phương pháp

<body>
  Hello
</body>

0

Nội dung chính Show

Hiển thị biến JavaScript bằng phương pháp <body> Hello </body> 0
Hiển thị biến JavaScript bằng thuộc tính InternalHTML
Hiển thị biến JavaScript bằng cửa sổ. phương thức cảnh báo ()
Phần kết luận
Làm cách nào để lưu trữ giá trị trong biến trong HTML?
Chúng ta có thể gán biến trong HTML không?
Làm cách nào để đặt giá trị biến JavaScript trong HTML?
Làm cách nào để gán giá trị cho biến trong HTML góc cạnh?

Hiển thị biến JavaScript bằng phương pháp <body> Hello </body> 0

Phương thức

<body>
  Hello
</body>

0 cho phép bạn thay thế toàn bộ nội dung của thẻ HTML

<body>
  Hello
</body>

6 bằng các biểu thức HTML và JavaScript mà bạn muốn hiển thị bên trong thẻ

<body>
  Hello
</body>

6. Giả sử bạn có phần tử HTML sau

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

Khi bạn chạy phương thức

<body>
  Hello
</body>

8 trên đoạn HTML ở trên, nội dung của

<body>
  Hello
</body>

6 sẽ được thay thế như sau

<body>
  Hello
</body>

Biết điều này, bạn có thể hiển thị bất kỳ giá trị biến JavaScript nào bằng cách chuyển tên biến làm tham số cho phương thức

<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

Phương pháp

<body>
  Hello
</body>

0 thường chỉ được sử dụng cho mục đích thử nghiệm vì nó sẽ xóa mọi phần tử HTML hiện có bên trong thẻ

<body>
  Hello
</body>

6 của bạn. Hầu hết, bạn sẽ muốn hiển thị một biến JavaScript bên cạnh các phần tử HTML của mình. Để làm được điều đó, bạn cần sử dụng phương pháp tiếp theo

Hiển thị biến JavaScript bằng thuộc tính InternalHTML

Mỗi phần tử HTML đơn lẻ có thuộc tính

<body>
  Hello
</body>

1 chứa nội dung của phần tử đó. Trình duyệt cho phép bạn thao tác thuộc tính

<body>
  Hello
</body>

1 bằng cách sử dụng JavaScript bằng cách chỉ cần gán thuộc tính cho một giá trị khác

Ví dụ: hãy tưởng tượng bạn có thẻ HTML sau

<body>
  Hello
</body>

6

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

Bạn có thể thay thế nội dung của thẻ

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 bằng cách truy xuất phần tử đầu tiên bằng mã định danh của nó. Vì phần tử

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 có thuộc tính

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 với giá trị là

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 nên bạn có thể sử dụng phương thức

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

0 để truy xuất và thay đổi thuộc tính ________0____1 của nó

Đây là cách bạn làm điều đó

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

Nội dung 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 sẽ được thay đổi như sau

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

Biết được điều này, bạn có thể chỉ cần bọc khoảng trống nơi bạn muốn biến JavaScript của mình được hiển thị bằng phần tử

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

3 như sau

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

Đoạn mã trên sẽ xuất ra HTML sau

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

Và đó là cách bạn có thể hiển thị các giá trị biến JavaScript bằng thuộc tính

<body>
  Hello
</body>

1

Hiển thị biến JavaScript bằng cửa sổ. phương thức cảnh báo ()

Phương pháp

<body>
  Hello
</body>

2 cho phép bạn khởi chạy một hộp thoại ở phía trước trang HTML của bạn. Ví dụ: khi bạn thử chạy trang HTML sau

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

Hộp thoại sau sẽ xuất hiện trong trình duyệt của bạn

The JavaScript alert box example Ví dụ về hộp cảnh báo JavaScript

Việc triển khai cho từng trình duyệt sẽ khác nhau một chút, nhưng tất cả đều hoạt động giống nhau. Biết được điều này, bạn có thể dễ dàng sử dụng hộp thoại để hiển thị giá trị của một biến JavaScript. Chỉ cần chuyển tên biến cho phương thức

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

6 như sau

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

Đoạn mã trên sẽ khởi chạy một hộp thoại hiển thị giá trị của biến

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

7

Phần kết luận

Hiển thị các biến JavaScript trong các trang HTML là một nhiệm vụ phổ biến đối với các nhà phát triển web. Các trình duyệt hiện đại cho phép bạn thao tác nội dung HTML bằng cách gọi các phương thức API JavaScript được hiển thị

Cách phổ biến nhất để hiển thị giá trị của một biến JavaScript là thao tác với giá trị thuộc tính

<body>
  Hello
</body>

1, nhưng khi kiểm tra các biến của mình, bạn cũng có thể sử dụng các phương thức

<body>
  Hello
</body>

0 hoặc ________0____2. Bạn được tự do sử dụng phương pháp phù hợp với mình nhất

Làm cách nào để lưu trữ giá trị trong biến trong HTML?

Trả lời. Sử dụng toán tử nối (+) . Bạn nên sử dụng dấu nháy đơn trong khi cố định khối mã HTML, điều này sẽ giúp dễ dàng giữ nguyên dấu nháy kép trong mã HTML thực tế hơn.

Chúng ta có thể gán biến trong HTML không?

Thẻ . Nội dung bên trong thường được in nghiêng. Mẹo. Thẻ này không được dùng nữa.

Làm cách nào để đặt giá trị biến JavaScript trong HTML?

Bạn không thể sử dụng biến js bên trong html. Để thêm nội dung của biến javascript vào html hãy sử dụng innerHTML() hoặc tạo bất kỳ thẻ html nào, hãy thêm nội dung của biến đó vào thẻ đã tạo đó và nối thẻ đó vào nội dung hoặc bất kỳ thẻ nào khác . Lưu câu trả lời này. . Save this answer.