Hướng dẫn change text when clicked javascript - thay đổi văn bản khi nhấp vào javascript

Mục lục #

1. Thay đổi nút văn bản khi nhấp bằng JavaScript
2. Nút chuyển đổi văn bản trên nhấp vào bằng cách sử dụng JavaScript

Thay đổi nút văn bản khi nhấp bằng JavaScript #

Để thay đổi văn bản của một nút trên nhấp chuột:

1. Thêm trình nghe sự kiện click vào nút.
2. Sử dụng thuộc tính textContent để thay đổi văn bản của nút.
3. Ví dụ, btn.textContent = 'Button clicked'.

Đây là HTML cho các ví dụ trong bài viết này.

Copied!
DOCTYPE html>

  
    
  

  
    Click me

    
  

Và đây là mã JavaScript liên quan.

Copied!
const btn = document.getElementById['btn'];

// ✅ Change button text on click
btn.addEventListener['click', function handleClick[] {
  btn.textContent = 'Button clicked';
}];

/**
 * ✅ If you need to change the button's inner HTML use:
 *  - `innerHTML` instead of `textContent`
 */

Chúng tôi đã thêm một trình nghe sự kiện click vào nút.

Chúng tôi sử dụng thuộc tính TextContent để thay đổi văn bản của nút mỗi khi được nhấp.

Thuộc tính textContent đại diện cho nội dung văn bản của nút và con cháu của nó.

Nếu bạn cần thay đổi HTML bên trong của nút, hãy sử dụng thuộc tính

Copied!
const btn = document.getElementById['btn'];

// ✅ Change button text on click
btn.addEventListener['click', function handleClick[] {
  btn.textContent = 'Button clicked';
}];

/**
 * ✅ If you need to change the button's inner HTML use:
 *  - `innerHTML` instead of `textContent`
 */

Copied!
const btn = document.getElementById['btn'];

// ✅ Change button text on click
btn.addEventListener['click', function handleClick[] {
  const initialText = 'Click me';

  btn.innerHTML = `Button clicked`;
}];

Cách tiếp cận này có thể được sử dụng để thêm một spinner tải khi người dùng nhấp vào nút.

Lưu ý rằng bạn không nên đặt nút

Copied!
const btn = document.getElementById['btn'];

// ✅ Change button text on click
btn.addEventListener['click', function handleClick[] {
  btn.textContent = 'Button clicked';
}];

/**
 * ✅ If you need to change the button's inner HTML use:
 *  - `innerHTML` instead of `textContent`
 */

Chuyển đổi văn bản nút khi nhấp bằng JavaScript #

Để chuyển đổi văn bản của một nút khi nhấp vào:

1. Thêm trình nghe sự kiện click vào nút.
2. Sử dụng thuộc tính textContent để thay đổi văn bản của nút.
3. Ví dụ, btn.textContent = 'Button clicked'.
4. Đây là HTML cho các ví dụ trong bài viết này.

Copied!
const btn = document.getElementById['btn'];

// ✅ Toggle button text on click
btn.addEventListener['click', function handleClick[] {
  const initialText = 'Click me';

  if [btn.textContent.toLowerCase[].includes[initialText.toLowerCase[]]] {
    btn.textContent = 'Button clicked';
  } else {
    btn.textContent = initialText;
  }
}];

/**
 * ✅ If you need to change the button's inner HTML use:
 *  - `innerHTML` instead of `textContent`
 */

Và đây là mã JavaScript liên quan.

Chúng tôi đã thêm một trình nghe sự kiện click vào nút.

Chúng tôi sử dụng thuộc tính TextContent để thay đổi văn bản của nút mỗi khi được nhấp.

Thuộc tính textContent đại diện cho nội dung văn bản của nút và con cháu của nó.

Nếu bạn cần thay đổi HTML bên trong của nút, hãy sử dụng thuộc tính

Copied!
const btn = document.getElementById['btn'];

// ✅ Change button text on click
btn.addEventListener['click', function handleClick[] {
  btn.textContent = 'Button clicked';
}];

/**
 * ✅ If you need to change the button's inner HTML use:
 *  - `innerHTML` instead of `textContent`
 */

Cách tiếp cận này có thể được sử dụng để thêm một spinner tải khi người dùng nhấp vào nút.

Copied!
const btn = document.getElementById['btn'];

// ✅ Toggle button text on click
btn.addEventListener['click', function handleClick[] {
  const initialText = 'Click me';

  if [btn.textContent.toLowerCase[].includes[initialText.toLowerCase[]]] {
    btn.innerHTML =
      'Button clicked';
  } else {
    btn.textContent = initialText;
  }
}];

Lưu ý rằng bạn không nên đặt nút

Copied!
const btn = document.getElementById['btn'];

// ✅ Change button text on click
btn.addEventListener['click', function handleClick[] {
  btn.textContent = 'Button clicked';
}];

/**
 * ✅ If you need to change the button's inner HTML use:
 *  - `innerHTML` instead of `textContent`
 */

Chuyển đổi văn bản nút khi nhấp bằng JavaScript #

Làm cách nào để thay đổi văn bản trên nút nhấp chuột?

Chúng ta có thể sử dụng title trong javascript không?

Làm cách nào để thay đổi văn bản trong HTML?

Làm cách nào để hiển thị văn bản sau khi nhấp vào HTML?