Hướng dẫn html display javascript return value - html hiển thị giá trị trả về javascript

Question

Công việc tốt làm việc tập thể dục RPS. Hãy xem JSFiddle này để triển khai hiển thị các lựa chọn người dùng/máy tính và kết quả.

Nội dung chính Show

Hiển thị biến JavaScript bằng phương pháp let name = "Nathan"; document.write(name); // Writes Nathan to the <body> tag let num = 999; document.write(num); // Writes 999 to the <body> tag 1
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
Hàm JavaScript có thể trả về giá trị không?
Làm thế nào đặt giá trị biến JavaScript trong HTML?

Bạn sẽ nhận thấy một vài thay đổi chính. Đầu tiên, bạn không nên liên kết với chức năng JavaScript trong HREF:

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

0

Hãy xem câu trả lời tuyệt vời này cho nhiều cách bạn có thể cải thiện thực hành đó. Trong triển khai ví dụ của tôi, tôi đang sử dụng thư viện jQuery để tạo trình xử lý sự kiện nhấp vào dấu nhắc

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

1, như vậy:

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

2

Thứ hai, bạn sẽ nhận thấy chức năng

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

3 mới. Điều này cho phép người dùng quyết định khi nào chơi trò chơi của bạn và chơi nó nhiều lần.

Với mã gốc được liệt kê ở trên, khi mã JavaScript được tải, trình duyệt thực hiện một vài điều ngay lập tức và sau đó không bao giờ nữa:

Nó khởi chạy lời nhắc để người dùng nhập giá trị. Ngay khi người dùng nhập lựa chọn của họ:
- Nó chọn một giá trị ngẫu nhiên cho máy tính và chuyển đổi nó thành giá trị chuỗi đá/giấy/kéo thích hợp.
- Nó thực thi hàm so sánh ().

Nó thậm chí không chờ người dùng nhấp vào liên kết

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

1 của bạn! Thay vào đó hãy xem một chức năng như sau:

var playRPS = function() {
    var userChoice = prompt("Do you choose rock, paper or scissors?");
    var compChoice = computerChoice();
    var result = compare(userChoice,compChoice);
    $('body').append('<p>You chose ' + userChoice + '</p>')
               .append('<p>The computer chose ' + compChoice + '</p>')
               .append('<p>' + result + '</p>');
};

Nó ngắn và ngọt ngào. Khi được gọi (hãy nhớ, nó được gọi là bất cứ lúc nào liên kết

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

5 được nhấp, như được thiết lập với jQuery), nó làm mọi thứ bạn cần làm cho một vòng RPS:

Nó hỏi người dùng những gì họ muốn chọn.
Nó chạy chức năng
```
<body>
  <h2>Hello World</h2>
  <p>Greetings</p>
</body>
```
6, tạo một số ngẫu nhiên mới và chuyển đổi số đó thành một chuỗi.

Nó chạy chức năng

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

7 của bạn

Nó bổ sung sự lựa chọn của người dùng, lựa chọn của máy tính và kết quả được trả về bởi hàm

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

7 trong các thẻ

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

9 ngay trước khi kết thúc 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

0.

Bây giờ có bất kỳ số cách nào điều này có thể được cải thiện hơn nữa-kết quả có thể được hiển thị theo cách đẹp hơn. Đầu vào của người dùng có lẽ nên được kiểm tra để xem đó có phải là câu trả lời hợp lệ không (ví dụ: điều gì xảy ra nếu tôi nhập "Fire" vào hộp? Hay "Giấy"?), Nhưng đây là một khởi đầu tuyệt vời!

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

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

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

1

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

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

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

2

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

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

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

3

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

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

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

1.

Hiển thị biến JavaScript bằng phương pháp let name = "Nathan"; document.write(name); // Writes Nathan to the <body> tag let num = 999; document.write(num); // Writes 999 to the <body> tag 1

Phương thức

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

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

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

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

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

0 bằng các biểu thức HTML và JavaScript mà bạn muốn được hiển thị bên trong 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

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

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

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

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 trên phần HTML ở trên, nội dung của

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

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

0 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

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

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

1:

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

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

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

1 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ẻ

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

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

0 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

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

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

2 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

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

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

2 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

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

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

0 sau:

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

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

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

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ử

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

9 có thuộc tính

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

9 với giá trị

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

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

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

1 để truy xuất nó và thay đổi 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

2 của nó.

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

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

Nội dung của thẻ

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

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

<body>
  <h2 id="header">Hello World</h2>
  <p id="greeting">Bonjour</p>
</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ử

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

4 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:

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

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

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

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

2.

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

Phương thức

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

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

3 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:

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

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

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

7 như sau:

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

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

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

8.

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

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

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

2, 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

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

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

1 hoặc

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

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

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

Hàm JavaScript có thể trả về giá trị không?

Định nghĩa và cách sử dụng.Câu lệnh trả về dừng việc thực thi hàm và trả về một giá trị.Đọc hướng dẫn JavaScript của chúng tôi để tìm hiểu tất cả những gì bạn cần biết về các chức năng.The return statement stops the execution of a function and returns a value. Read our JavaScript Tutorial to learn all you need to know about functions.

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.

programming javascript HTML display value jQuery return value