Hướng dẫn how pass value from script to html? - cách chuyển giá trị từ tập lệnh sang html?

Question

Tôi muốn các giải pháp với càng nhiều hỗ trợ của các trình duyệt cũ càng tốt. Nếu không, tôi muốn nói rằng CurrentScript hoặc phương thức thuộc tính dữ liệu sẽ là phong cách nhất.

Nội dung chính Show

Hiển thị biến JavaScript bằng phương pháp /* HTML: */ /* JS: */ var data1 = document.getElementsByName('yourData')[0].content; 3
Hiển thị biến JavaScript bằng thuộc tính bên trong.
Hiển thị biến JavaScript bằng phương thức Window.Alert ()
Sự kết luận
Làm thế nào gửi dữ liệu từ JavaScript đến HTML?
Làm thế nào đặt giá trị biến JavaScript trong HTML?
Đó là cách chính xác để bao gồm một tập lệnh trong HTML?

Đây là phương pháp duy nhất chưa được đưa lên ở đây. Đặc biệt, nếu vì một lý do nào đó bạn có lượng dữ liệu lớn, thì tùy chọn tốt nhất có thể là:

lưu trữ cục bộ

/* On the original page, you add an inline JS Script.
 * If you only have one datum you don't need JSON:
 * localStorage.setItem('datum', 'Information here.');
 * But for many parameters, JSON makes things easier: */
var data = {'data1': 'I got a lot of data.',
            'data2': 'More of my data.',
            'data3': 'Even more data.'};
localStorage.setItem('data', JSON.stringify(data));

/* External target JS Script, where your data is needed: */
var data = JSON.parse(localStorage.getItem('data'));
console.log(data['data1']);

LocalStorage có hỗ trợ trình duyệt hiện đại đầy đủ, và hỗ trợ tốt đáng ngạc nhiên của các trình duyệt cũ, trở lại IE 8, Firefox 3,5 và Safari 4 [mười một năm trước] trong số những người khác.

Nếu bạn không có nhiều dữ liệu, nhưng vẫn muốn hỗ trợ trình duyệt rộng rãi, có thể là lựa chọn tốt nhất là:

Thẻ meta [của Robidu]

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

Lỗ hổng của điều này, là nơi chính xác để đặt các thẻ meta [cho đến khi HTML 4] nằm trong thẻ đầu và bạn có thể không muốn dữ liệu này lên đó. Để tránh điều đó, hoặc đặt các thẻ meta vào cơ thể, bạn có thể sử dụng A:

Đoạn ẩn

/* HTML: */
Your data is here

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

Để hỗ trợ trình duyệt nhiều hơn, bạn có thể sử dụng lớp CSS thay vì thuộc tính ẩn:

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
Your data is here

Tìm hiểu cách sử dụng giá trị biến JavaScript trong trang HTML.

Có ba cách để hiển thị các giá trị biến JavaScript trong các trang HTML:

Hiển thị biến bằng phương pháp

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

3

Hiển thị biến thành nội dung phần tử HTML bằng cách sử dụng thuộc tính
```
/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;
```
4

Hiển thị biến bằng phương pháp

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

5

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 các trang HTML. Hãy bắt đầu với việc sử dụng phương pháp

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

3.

Hiển thị biến JavaScript bằng phương pháp /* HTML: / / JS: */ var data1 = document.getElementsByName('yourData')[0].content; 3

Phương thức

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

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

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

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

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

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

<body>
  <h2>Hello Worldh2>
  <p>Greetingsp>
body>

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

/* HTML: */
Your data is here

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

1 trên phần HTML ở trên, nội dung của

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

9 sẽ được thay thế như sau:

Biết được đ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

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

3:

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

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

Phương pháp

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

3 thường chỉ được sử dụng cho mục đích thử nghiệm vì nó sẽ xóa bất kỳ phần tử HTML hiện có nào trong thẻ

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

9 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 bạn. Để làm đ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 bên trong.

Mỗi phần tử HTML có thuộc tính

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

4 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

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

4 bằng cách sử dụng JavaScript bằng cách chỉ định thuộc tính cho một giá trị khác.

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

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

9 sau:

<body>
  <h2 id="header">Hello Worldh2>
  <p id="greeting">Greetingsp>
body>

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

/* HTML: */
Your data is here

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

9 bằng cách lần đầu tiên truy xuất phần tử bằng định danh của nó. Vì phần tử

/* HTML: */
Your data is here

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

9 có thuộc tính

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
Your data is here

1 với giá trị

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
Your data is here

2, bạn có thể sử dụng phương thức

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
Your data is here

3 để truy xuất nó và thay đổi thuộc tính

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

4 của nó.

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

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

Nội dung của thẻ

/* HTML: */
Your data is here

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

9 sẽ được thay đổi như sau:

<body>
  <h2 id="header">Hello Worldh2>
  <p id="greeting">Bonjourp>
body>

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

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
Your data is here

6 như sau:

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

Mã trên sẽ xuất ra HTML sau:

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

0

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

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

4.

Hiển thị biến JavaScript bằng phương thức Window.Alert ()

Phương thức

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

5 cho phép bạn khởi chạy 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:

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

1

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

Việc triển khai cho mỗi trình duyệt sẽ hơi khác nhau, 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 biến JavaScript. Chỉ cần chuyển tên biến cho phương thức

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
Your data is here

9 như sau:

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

2

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

<body>
  <h2>Hello Worldh2>
  <p>Greetingsp>
body>

0.

Sự 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 cho 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 lộ ra.

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

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

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

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

3 hoặc

/* HTML: */


/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

5. Bạn có thể tự do sử dụng phương pháp phù hợp với bạn nhất.

Làm thế nào gửi dữ liệu từ JavaScript đến HTML?

Làm thế nào gửi dữ liệu từ JavaScript đến HTML ?..

Viết vào một phần tử HTML, sử dụng InternalHTML ..

Viết vào đầu ra HTML bằng tài liệu.viết() ..

Viết vào một hộp cảnh báo, sử dụng cửa sổ.báo động() ..

Viết vào bảng điều khiển trình duyệt, sử dụng bảng điều khiển.log () ..

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

Bạn không thể sử dụng các biến JS bên trong HTML.Để thêm nội dung của biến JavaScript vào HTML sử dụng bên trong () 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 phần thân hoặc bất kỳ thẻ hiện có nào khác trong HTML.Lưu câu trả lời này.use innerHTML() or create any html tag, add the content of that variable to that created tag and append that tag to the body or any other existing tags in the html. Save this answer.

Đó là cách chính xác để bao gồm một tập lệnh trong HTML?

Trong HTML, mã JavaScript được chèn giữa và thẻ. tags.

programming html JavaScript echo variable

Hướng dẫn how pass value from script to html? - cách chuyển giá trị từ tập lệnh sang html?

Hiển thị biến JavaScript bằng phương pháp /* HTML: */ /* JS: */ var data1 = document.getElementsByName('yourData')[0].content; 3

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

Hiển thị biến JavaScript bằng phương thức Window.Alert ()

Sự kết luận

Làm thế nào gửi dữ liệu từ JavaScript đến HTML?

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

Đó là cách chính xác để bao gồm một tập lệnh trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Hiển thị biến JavaScript bằng phương pháp /* HTML: / / JS: */ var data1 = document.getElementsByName('yourData')[0].content; 3