Css thay đổi văn bản khi nhấp

Một cách mà JavaScript thường được sử dụng là ẩn hoặc hiển thị nội dung dựa trên hành vi của người dùng. Ví dụ: người dùng có thể chọn một tùy chọn khi điền vào biểu mẫu trực tuyến và lựa chọn của họ có thể khiến các trường biểu mẫu liên quan khác xuất hiện. Trong bài học này, bạn sẽ sử dụng CSS và Javascript để hiển thị và ẩn đồng hồ mà bạn đã tạo

Kết quả của người học

Khi hoàn thành bài tập này

• bạn sẽ có thể sử dụng CSS để ẩn và hiển thị nội dung
• bạn sẽ có thể sử dụng JavaScript để thay đổi và các thuộc tính CSS của phần tử HTML

Các hoạt động

Thông lệ phổ biến trên web ngày nay là ẩn nội dung khỏi người dùng cho đến khi cần thiết. Trong bài này các bạn sẽ ẩn đồng hồ đi, sau đó thêm link mà nếu click vào sẽ hiện đồng hồ

mở javascript. html trong cả trình soạn thảo văn bản và trình duyệt web của bạn. Chuyển đến biểu định kiểu mà bạn đã tạo cho div#clock trong bài học trước. Thêm thuộc tính sau vào biểu định kiểu

Bây giờ làm mới trang của bạn trong trình duyệt của bạn. Chuyện gì đã xảy ra thế? . Đây là một trong một số cách để ẩn nội dung bằng CSS. Để hiển thị lại phần tử, bạn sẽ thay đổi thuộc tính này thành

Tuy nhiên, trong trường hợp này, chúng tôi chỉ muốn hiển thị phần tử nếu người dùng yêu cầu cụ thể. Vì vậy, chúng tôi sẽ phải thay đổi kiểu động, sử dụng JavaScript, được kích hoạt bởi sự kiện onclick

Đầu tiên, thêm phần tử mà bạn muốn người dùng nhấp vào

Hiển thị đồng hồ

Lưu ý rằng nút này về cơ bản giống như nút bạn đã tạo trong Bài 1 để hiển thị cảnh báo. Có một sự khác biệt quan trọng mặc dù. Nút này có thuộc tính id. Đó là để bạn có thể truy cập nó dễ dàng bằng JavaScript (bạn sẽ hiểu tại sao trong giây lát)

Bây giờ bạn đã có một nút mà khi được nhấp vào sẽ gọi hàm toggleClock(), bạn cần tạo một hàm toggleClock(). Đây là chức năng đó - chỉ cần thêm nó vào phần tập lệnh hiện có ở đầu trang web của bạn

  function toggleClock() {
    // get the clock
    var myClock = document.getElementById('clock');

    // get the current value of the clock's display property
    var displaySetting = myClock.style.display;

    // also get the clock button, so we can change what it says
    var clockButton = document.getElementById('clockButton');

    // now toggle the clock and the button text, depending on current state
    if (displaySetting == 'block') {
      // clock is visible. hide it
      myClock.style.display = 'none';
      // change button text
      clockButton.innerHTML = 'Show clock';
    }
    else {
      // clock is hidden. show it
      myClock.style.display = 'block';
      // change button text
      clockButton.innerHTML = 'Hide clock';
    }
  }

Trong hàm toggleClock() mới này, bạn đang sử dụng JavaScript để truy xuất phần tử đồng hồ, lấy giá trị hiện tại của kiểu hiển thị của nó, sau đó kiểm tra nó. Nếu màn hình hiện đang được đặt thành "khối", đồng hồ sẽ hiển thị, vì vậy bạn thay đổi màn hình thành "không" để ẩn đồng hồ. Nếu đồng hồ đã bị ẩn, bạn thay đổi hiển thị thành "chặn" để hiển thị lại. Trong khi bạn đang chuyển đổi qua lại màn hình của đồng hồ từ "khối" thành "không", bạn cũng đang thay đổi văn bản (HTML bên trong) trên nút đồng hồ, sao cho luân phiên giữa "Hiển thị đồng hồ" và "Ẩn đồng hồ", tùy thuộc vào

Tất cả đã được làm xong?

Kiểm tra trang web của bạn và đảm bảo rằng bạn có thể hiển thị và ẩn đồng hồ bằng nút mới. Ngoài ra, hãy đảm bảo văn bản của nút thay đổi từ "Hiển thị đồng hồ" thành "Ẩn đồng hồ" khi thích hợp. Chia sẻ trang web của bạn với người hướng dẫn của bạn. Nếu tất cả đều ổn, hãy chuyển sang bài học tiếp theo

JavaScript là xương sống của mọi trang web. Nó giúp quản lý các sự kiện của người dùng và cũng xử lý các hoạt động của trình duyệt

Đôi khi chúng ta cần tự động thay đổi văn bản của một phần tử thông qua sự kiện của người dùng như sự kiện OnClick hoặc OnHover. Lúc đó JavaScript và JQuery đóng vai trò xử lý sự kiện

Mục lục

JavaScript Thay đổi văn bản khi nhấp chuột

Ở đây chúng ta sẽ xem cách chúng ta có thể thay đổi văn bản của một phần tử bằng hàm JavaScript với các ví dụ khác nhau

JavaScript sử dụng thuộc tính InternalHTML để thay đổi văn bản của một phần tử

cú pháp

document.getElementById(‘id_name’).innerHTML = “new_text”;

Giải trình

• Ở đây id_name là id của thẻ HTML mà bạn muốn chọn
• InternalHTML được sử dụng để thay đổi văn bản bên trong thẻ HTML đã chọn bằng cách sử dụng tài liệu. phương thức getElementById()
• new_text là văn bản mà chúng tôi muốn chèn

ví dụ 1

Giả sử chúng ta có một đoạn văn mẫu. Chúng ta muốn thay đổi văn bản của đoạn đó khi chúng ta nhấp vào nút.
Hãy xem nó có thể được thực hiện như thế nào.

<!DOCTYPE html>
<html>
<body>

<p>When you click a button it will change the text of sample paragraph.</p>

<p id="demo">I am sample paragraph.</p>

<button onclick="change_text()">Click me</button>

<script>
function change_text(){
    document.getElementById("demo").innerHTML = "You clicked the button, I am new paragraph.";
}
</script>

</body>
</html>

đầu ra

Trước khi nhấp vào nút

Sau khi nhấp vào nút

Giải trình

• Đầu tiên chúng ta tạo hàm change_text()
• Sau đó, chúng tôi thêm tài liệu. getElementById(“bản trình diễn”). innerHTML chức năng bên trong và thêm văn bản mà chúng tôi muốn hiển thị
• Then after we create

  tag and a button.

• Finally, when we click the button, it will change the text of the

  tag.

ví dụ 2

Suppose we want to create a form that takes the name as input field and it will show greeting message inside

tag. Let’s see how it can be performed.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display greeting.</p>

<p id="demo"></p>

Name:<br><br>
<input type="text" id="name" name="name">
<br><br>
<button onclick="change_text()">Submit</button>

<script>
function change_text(){
    var name = document.getElementById("name").value;
    document.getElementById("demo").innerHTML = "Hello " + name;
}
</script>

</body>
</html>

đầu ra

Trước khi nhấp vào nút

Sau khi nhấp vào nút

Giải trình

• Đầu tiên, chúng ta tạo hàm change_text()
• Sau đó ta lấy giá trị của document. getElementById(“tên”). innerHTML bên trong hàm và
  Gán nó cho tên biến.
• Then after we assign the value of name variable inside the

  tag using document.getElementById(“demo”).innerHTML.

• Finally, when we click the button, it will show the greeting text inside the

  tag.

đọc thêm. Cách lấy tham số URL bằng JavaScript

Phần kết luận

Đây là tất cả về cách thay đổi văn bản bằng JavaScript. Tôi chắc rằng bạn không nghi ngờ gì về việc thêm văn bản bằng JavaScript

Làm cách nào để thay đổi văn bản của nút bằng JavaScript?

Làm cách nào để thay đổi văn bản trong CSS bằng JavaScript?

Làm cách nào để tạo hiệu ứng hoạt hình thay đổi văn bản bằng CSS?