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ọcKhi 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 độngThô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 phi tiêu chuẩn. Tính năng này không chuẩn và không nằm trong lộ trình tiêu chuẩn. Không sử dụng nó trên các trang web sản xuất đối mặt với Web. nó sẽ không hoạt động cho mọi người dùng. Cũng có thể có sự không tương thích lớn giữa các lần triển khai và hành vi có thể thay đổi trong tương lai Thuộc tính tùy chọn displayName của một thể hiện Function chỉ định tên hiển thị của hàm Thuộc tính displayName ban đầu không có trên bất kỳ chức năng nào - nó được thêm vào bởi các tác giả mã. Với mục đích hiển thị, nó phải là một chuỗi Thuộc tính displayName, nếu có, có thể được bảng điều khiển và trình lập hồ sơ ưa thích hơn thuộc tính name để được hiển thị dưới dạng tên của một chức năng Trong số các trình duyệt, chỉ có bảng điều khiển Firefox sử dụng thuộc tính này. React devtools cũng sử dụng thuộc tính khi hiển thị cây thành phần Firefox thực hiện một số nỗ lực cơ bản để giải mã displayName có thể được tạo bởi thuật toán quy ước đặt tên hàm JavaScript ẩn danh. Các mẫu sau được phát hiện - Nếu
displayName kết thúc bằng một chuỗi các ký tự chữ và số, const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
1 và const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
2, thì hậu tố dài nhất đó sẽ được hiển thị - Nếu
displayName kết thúc bằng một chuỗi gồm _______ 4 ký tự kèm theo, thì chuỗi đó được hiển thị mà không có dấu ngoặc vuông - Nếu
displayName kết thúc bằng một chuỗi các ký tự chữ và số và const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
1 theo sau bởi một số const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
7, const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
8 hoặc const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
9, thì chuỗi được trả về mà không có các ký tự sau const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
7, const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
8 hoặc const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
9 - Nếu
displayName kết thúc bằng một chuỗi các ký tự chữ và số và const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
1 theo sau bởi function foo() {}
function testName(name) {
foo.displayName = name;
console.log(foo);
}
testName("$foo$"); // function $foo$()
testName("foo bar"); // function bar()
testName("Foo.prototype.add"); // function add()
testName("foo ."); // function foo .()
testName("foo <"); // function foo <()
testName("foo?"); // function foo?()
testName("foo()"); // function foo()()
testName("[...]"); // function ...()
testName("foo<"); // function foo()
testName("foo..."); // function foo()
testName("foo(^)"); // function foo()
5, thì chuỗi đó được hiển thị mà không có function foo() {}
function testName(name) {
foo.displayName = name;
console.log(foo);
}
testName("$foo$"); // function $foo$()
testName("foo bar"); // function bar()
testName("Foo.prototype.add"); // function add()
testName("foo ."); // function foo .()
testName("foo <"); // function foo <()
testName("foo?"); // function foo?()
testName("foo()"); // function foo()()
testName("[...]"); // function ...()
testName("foo<"); // function foo()
testName("foo..."); // function foo()
testName("foo(^)"); // function foo()
5
Nếu không có mẫu nào ở trên phù hợp, toàn bộ displayName được hiển thị Bằng cách nhập thông tin sau vào bảng điều khiển Firefox, nó sẽ hiển thị dưới dạng như function foo() {}
function testName(name) {
foo.displayName = name;
console.log(foo);
}
testName("$foo$"); // function $foo$()
testName("foo bar"); // function bar()
testName("Foo.prototype.add"); // function add()
testName("foo ."); // function foo .()
testName("foo <"); // function foo <()
testName("foo?"); // function foo?()
testName("foo()"); // function foo()()
testName("[...]"); // function ...()
testName("foo<"); // function foo()
testName("foo..."); // function foo()
testName("foo(^)"); // function foo()
8const a = function () {};
a.displayName = "MyFunction";
a; // function MyFunction()
Bạn có thể tự động thay đổi displayName của một chức năng const object = {
// anonymous
someMethod: function someMethod(value) {
someMethod.displayName = `someMethod (${value})`;
},
};
console.log(object.someMethod.displayName); // undefined
object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
Firefox devtools sẽ dọn sạch một số mẫu phổ biến trong thuộc tính displayName trước khi hiển thị nó
Làm cách nào để hiển thị đầu vào tên trong JavaScript?
1 câu trả lời . Chọn phần tử muốn đọc. tài liệu. getElementById("firstname") sau đó sử dụng. . Chọn phần tử mà bạn muốn đặt các giá trị này để hiển thị cho người dùng. tài liệu. . Bây giờ hãy đặt logic bên trong hàm showName() và gọi hàm này trong sự kiện onclick của nút gửi Làm cách nào để đặt tên trong JavaScript?
Sử dụng phương thức setAttribute() để thay đổi thuộc tính tên của phần tử , e. g. hộp. setAttribute('tên', 'tên ví dụ'). Phương thức đặt hoặc cập nhật giá trị của một thuộc tính trên phần tử được chỉ định.
Làm cách nào để lấy tên từ người dùng trong JavaScript?
Nếu tập lệnh đang chạy trên Microsoft Windows trong HTA hoặc tương tự, bạn có thể thực hiện việc này. var wshshell=new ActiveXObject("wscript. shell"); var username=wshshell. ExpandEnvironmentStrings("%username%");
Làm cách nào để lấy giá trị tên trong JavaScript?
Ví dụ JavaScript getElementsByName()
. Đầu tiên, chọn nút gửi theo id btnRate của nó bằng phương thức getElementById() . Thứ hai, lắng nghe sự kiện nhấp chuột của nút gửi. Thứ ba, lấy tất cả các nút radio bằng getElementsByName() và hiển thị giá trị đã chọn trong phần tử đầu ra. | 
