Thêm nút khác trong JavaScript

Question

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

Nội dung chính Show

Kết quả của người học
Các hoạt động
Tất cả đã được làm xong?
Làm cách nào để thêm nút trong mã JavaScript?
Cách thêm nút đọc thêm trong jQuery?
Có bao nhiêu loại nút trong JavaScript?

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

Các phần tử

<input type="button" />

4 thuộc loại

<input type="button" />

5 được hiển thị dưới dạng các nút ấn đơn giản, có thể được lập trình để điều khiển chức năng tùy chỉnh ở bất kỳ đâu trên trang web theo yêu cầu khi được gán chức năng xử lý sự kiện (thường dành cho sự kiện

<input type="button" />

6)

Ghi chú. Trong khi các phần tử

<input type="button" />

4 thuộc loại

<input type="button" />

5 vẫn là HTML hoàn toàn hợp lệ, thì phần tử

<input type="button" />

9 mới hơn hiện là cách ưa thích để tạo các nút. Cho rằng văn bản nhãn của

<input type="button" />

9 được chèn vào giữa thẻ mở và thẻ đóng, bạn có thể đưa HTML vào nhãn, thậm chí cả hình ảnh

Thuộc tính của phần tử

<form>
  <input type="button" value="Start machine" />
form>
<p>The machine is stopped.p>

1 chứa chuỗi được sử dụng làm nhãn của nút

<input type="button" value="Click Me" />

Nếu bạn không chỉ định một

<form>
  <input type="button" value="Start machine" />
form>
<p>The machine is stopped.p>

2, bạn sẽ nhận được một nút trống

<input type="button" />

Các phần tử

<form>
  <input type="button" value="Start machine" />
form>
<p>The machine is stopped.p>

1 không có hành vi mặc định (anh em họ của chúng,

<form>
  <input type="button" value="Start machine" />
form>
<p>The machine is stopped.p>

5 và

<form>
  <input type="button" value="Start machine" />
form>
<p>The machine is stopped.p>

6 được sử dụng để gửi và đặt lại biểu mẫu, tương ứng). Để làm cho các nút làm bất cứ điều gì, bạn phải viết mã JavaScript để thực hiện công việc

Chúng tôi sẽ bắt đầu bằng cách tạo một nút đơn giản với trình xử lý sự kiện

<input type="button" />

6 để khởi động máy của chúng tôi (tốt, nó bật tắt

<form>
  <input type="button" value="Start machine" />
form>
<p>The machine is stopped.p>

2 của nút và nội dung văn bản của đoạn sau)

________số 8_______

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

Tập lệnh lấy tham chiếu đến đối tượng

<form>
  <input type="button" value="Start machine" />
form>
<p>The machine is stopped.p>

9 đại diện cho

<input type="button" />

4 trong DOM, lưu tham chiếu này vào biến

<input type="button" />

5. Sau đó,

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

2 được sử dụng để thiết lập chức năng sẽ chạy khi sự kiện

<input type="button" />

6 xảy ra trên nút

Phím tắt, còn được gọi là phím truy cập và tương đương với bàn phím, cho phép người dùng kích hoạt một nút bằng một phím hoặc tổ hợp phím trên bàn phím. Để thêm lối tắt bàn phím vào một nút — giống như bạn làm với bất kỳ

<input type="button" />

4 nào hợp lý — bạn sử dụng thuộc tính toàn cầu

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

5

Trong ví dụ này, s được chỉ định làm phím truy cập (bạn sẽ cần nhấn s cùng với các phím bổ trợ cụ thể cho tổ hợp trình duyệt/hệ điều hành của mình; xem phím truy cập để biết danh sách hữu ích của các phím đó)

<form>
  <input type="button" value="Start machine" accesskey="s" />
form>
<p>The machine is stopped.p>

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

Ghi chú. Tất nhiên, vấn đề với ví dụ trên là người dùng sẽ không biết khóa truy cập là gì. Trong một trang web thực, bạn phải cung cấp thông tin này theo cách không can thiệp vào thiết kế trang web (ví dụ: bằng cách cung cấp một liên kết dễ truy cập trỏ đến thông tin về khóa truy cập trang web là gì)

Để tắt một nút, hãy chỉ định thuộc tính toàn cầu

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

6 trên nút đó, như vậy

<input type="button" value="Disable me" disabled />

Đặt thuộc tính bị vô hiệu hóa

Bạn có thể bật và tắt các nút trong thời gian chạy bằng cách đặt

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

6 thành

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

8 hoặc

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

9. Trong ví dụ này, nút của chúng tôi bắt đầu được bật, nhưng nếu bạn nhấn nó, nút này sẽ bị tắt bằng cách sử dụng

<form>
  <input type="button" value="Start machine" accesskey="s" />
form>
<p>The machine is stopped.p>

0. Sau đó, chức năng

<form>
  <input type="button" value="Start machine" accesskey="s" />
form>
<p>The machine is stopped.p>

1 được sử dụng để đặt lại nút về trạng thái đã bật sau hai giây

<input type="button" value="Enabled" />

const button = document.querySelector('input');

button.addEventListener('click', disableButton);

function disableButton() {
  button.disabled = true;
  button.value = 'Disabled';
  setTimeout(() => {
    button.disabled = false;
    button.value = 'Enabled';
  }, 2000);
}

Kế thừa trạng thái bị vô hiệu hóa

Nếu thuộc tính

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

6 không được chỉ định, nút sẽ kế thừa trạng thái

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

6 của nó từ phần tử cha của nó. Điều này giúp có thể bật và tắt tất cả các nhóm phần tử cùng một lúc bằng cách đặt chúng trong một vùng chứa, chẳng hạn như phần tử

<form>
  <input type="button" value="Start machine" accesskey="s" />
form>
<p>The machine is stopped.p>

4, sau đó đặt

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

6 trên vùng chứa

Ví dụ dưới đây cho thấy điều này trong hành động. Điều này rất giống với ví dụ trước, ngoại trừ thuộc tính

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

6 được đặt trên

<form>
  <input type="button" value="Start machine" accesskey="s" />
form>
<p>The machine is stopped.p>

4 khi nhấn nút đầu tiên — điều này khiến cả ba nút bị vô hiệu hóa cho đến khi hết thời gian chờ hai giây

<fieldset>
  <legend>Button grouplegend>
  <input type="button" value="Button 1" />
  <input type="button" value="Button 2" />
  <input type="button" value="Button 3" />
fieldset>

<input type="button" />

0

Ghi chú. Theo mặc định, không giống như các trình duyệt khác, Firefox sẽ duy trì trạng thái tắt động của một

<input type="button" />

9 trong các lần tải trang. Sử dụng thuộc tính để kiểm soát tính năng này

Các nút không tham gia xác thực ràng buộc;

Ví dụ dưới đây cho thấy một ứng dụng vẽ rất đơn giản được tạo bằng phần tử

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'Start machine') {
    button.value = 'Stop machine';
    paragraph.textContent = 'The machine has started!';
  } else {
    button.value = 'Start machine';
    paragraph.textContent = 'The machine is stopped.';
  }
}

0 và một số CSS và JavaScript đơn giản (chúng tôi sẽ ẩn CSS cho ngắn gọn). Hai điều khiển trên cùng cho phép bạn chọn màu sắc và kích thước của bút vẽ. Nút, khi được nhấp, sẽ gọi một chức năng xóa canvas

Làm cách nào để thêm nút trong mã JavaScript?

Tạo đối tượng nút. Đối tượng nút có thể được tạo bằng JavaScript. Tài liệu. Phương thức createElement() được sử dụng để tạo phần tử . Sau khi tạo một đối tượng nút, hãy sử dụng phương thức appendChild() để nối thêm phần tử cụ thể (chẳng hạn như div) để hiển thị nó.

Cách thêm nút đọc thêm trong jQuery?

Trả lời. Sử dụng phương thức chuỗi con() của JavaScript .

Có bao nhiêu loại nút trong JavaScript?

The hai loại kích thước Nút là mặc định và nhỏ.

programming javascript

Thêm nút khác trong JavaScript

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

Các hoạt động

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

Đặt thuộc tính bị vô hiệu hóa

Kế thừa trạng thái bị vô hiệu hóa

Làm cách nào để thêm nút trong mã JavaScript?

Cách thêm nút đọc thêm trong jQuery?

Có bao nhiêu loại nút trong JavaScript?

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