search

Thẻ bình luận html trong javascript

Ngày đăng: 29/01/2023
Trả lời: 0
Lượt xem: 108

Nhận xét được khuyến khích thực hành trong lập trình và phát triển phần mềm nói chung, chúng có thể nêu lý do tại sao quyết định mã hóa được đưa ra hoặc giải thích những gì cần phải làm để cải thiện mã bạn đang làm việc.

Show

HTML có thể không được coi là ngôn ngữ lập trình nhưng nó chắc chắn có nhận xét. Trong HTML, các bình luận chủ yếu được sử dụng để chỉ ra các đoạn mã như tiêu đề, thanh bên hoặc các thành phần tùy chỉnh

Nhận xét không hiển thị trong HTML của bạn (như trong bất kỳ ngôn ngữ nào có nhận xét), nhưng bạn có thể hiển thị chúng trên trang cho mục đích gỡ lỗi

Hãy tìm hiểu làm thế nào chúng ta thực sự có thể thực hiện điều này

Các thẻ HTML (bao gồm cả nhận xét HTML) được biểu diễn dưới dạng các nút trong cây DOM và mỗi nút có thuộc tính 

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
1 là một giá trị số xác định loại nút

Để có được giá trị số, định dạng là 

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
2 trong đó nút là một phần tử HTML. Giá trị số là một giá trị lớn hơn 
p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
3

Bảng bên dưới liệt kê các giá trị trả về có thể

ValueMeaning1ELEMENT_NODE2ATTRIBUTE_NODE3TEXT_NODE4CDATA_SECTION_NODE5ENTITY_REFERENCE_NODE6ENTITY_NODE7PROCESSING_INSTRUCTION_NODE8COMMENT_NODE9DOCUMENT_NODE10DOCUMENT_TYPE_NODE11DOCUMENT_FRAGMENT_NODE12NOTATION_NODE

Từ bảng trên, rõ ràng là các nhận xét HTML có giá trị bằng số là 

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
4, đây là yêu cầu quan trọng để thực sự nhận được nhận xét và sau đó hiển thị nó trên bất kỳ phần nào của trang

Yêu cầu khác là giá trị 

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
5. 
p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
5 như tên ngụ ý là nội dung của nút

Dữ liệu nút mẫu

Đây là mã HTML

 style="color: red; text-align: center; text-decoration: underline;">
        
The core functionality of this app requires
JavaScript to work. Please enable JavaScript


 class="container">

 class="show" id="comments_section">
 class="btn remove-paragraph" id="remove-paragraph" title="Close">
 id="number_of_comments">

 id ="view_comments" class="btn success">Yes
 id ="dont_view_comments" class="btn">No
 class="btn success" id="show_comments">Show Comments
 class="btn" id="hide_comments">Hide Comments
 id="commentsInCode">
 style="display: none;" id="comment_subheading">Comments in your code

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và CSS

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy xem qua HTML, bạn sẽ nhận thấy chúng tôi sử dụng 

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
7. Điều đầu tiên chúng ta sẽ làm trong tập lệnh của mình là tạo các biến. Trong số các biến có một bộ tích lũy sẽ theo dõi các nhận xét được tìm thấy trong đoạn mã

/**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi cần biết số lượng nhận xét, do đó, chúng tôi lặp qua 

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
8 và khi chúng tôi gặp một 
p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
1 với giá trị là 
p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
4, chúng tôi sẽ tăng bộ tích lũy

for (let i = 0; i < container.childNodes.length; i++) {

    // save the childnode in a variable for
    // easy referencing
    let e = container.childNodes[i];

    if (e.nodeType === 8) { // we found a comment!

        // increment the accumulator
        accumulator += 1;

        // show the comments section
        comments_section.style.display = "block";

    }

}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi sẵn sàng cho người dùng biết số lượng bình luận

// Tell the user the number of comments found
number_of_comments.innerHTML =
"
We found " + accumulator + " comment(s) in the selected
section of code, will you like to see them?";

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Khi tải trang ban đầu, chúng tôi ẩn ba nút HTML

  • /**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
    1
  • /**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
    2
  • /**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
    3

/**
  * On initial page load, hide the "show",
  * hide" remove paragraph buttons
  */
show_comments.classList.toggle('hidden');
hide_comments.classList.toggle('hidden')
remove_paragraph.classList.toggle('hidden');

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi đính kèm một trình xử lý sự kiện vào nút xem nhận xét. Bên trong trình xử lý sự kiện, chúng tôi lặp qua 

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
8 để tìm nhận xét, sau đó chúng tôi tạo thẻ 
/**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
5 và 
/**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
6 sẽ chứa thẻ 
p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
5. Thẻ 
/**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
6 sau đó được gắn vào thẻ 
/**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
5, thẻ này lần lượt được gắn vào trang thông qua phương pháp 
for (let i = 0; i < container.childNodes.length; i++) {

    // save the childnode in a variable for
    // easy referencing
    let e = container.childNodes[i];

    if (e.nodeType === 8) { // we found a comment!

        // increment the accumulator
        accumulator += 1;

        // show the comments section
        comments_section.style.display = "block";

    }

}
0 và tiêu đề phụ nhận xét được hiển thị

Các nút 

for (let i = 0; i < container.childNodes.length; i++) {

    // save the childnode in a variable for
    // easy referencing
    let e = container.childNodes[i];

    if (e.nodeType === 8) { // we found a comment!

        // increment the accumulator
        accumulator += 1;

        // show the comments section
        comments_section.style.display = "block";

    }

}
1 và 
for (let i = 0; i < container.childNodes.length; i++) {

    // save the childnode in a variable for
    // easy referencing
    let e = container.childNodes[i];

    if (e.nodeType === 8) { // we found a comment!

        // increment the accumulator
        accumulator += 1;

        // show the comments section
        comments_section.style.display = "block";

    }

}
2 bị ẩn sau đó chúng tôi hiển thị các nút 
/**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
2 và 
/**
  * querySelector. jQuery style
  * Inspiration from Todd Motto
  * https://ultimatecourses.com/blog/attaching-event-handlers-to-dynamically-created-javascript-elements
  */

let $ = function (selector) {
    return document.querySelector(selector);
};

// variables
let container = $('.container');
let comments_section = $('#comments_section');
let dont_view_comments = $('#dont_view_comments');
let view_comments = $('#view_comments');
let number_of_comments = $('#number_of_comments');
let hide_comments = $('#hide_comments');
let show_comments = $('#show_comments');
let remove_paragraph = $('#remove-paragraph');
let commentsInCode = $('#commentsInCode');
let comment_subheading = $('#comment_subheading');
let accumulator = 0;
3

view_comments.addEventListener('click', function() {

    // loop through the childnodes
    for (let i = 0; i < container.childNodes.length; i++) {

        // save the childNodes in a variable
        // for easy referencing 
        let e = container.childNodes[i];

        if (e.nodeType === 8) { // we found a comment

            /**
              * create a text node with the "data", 
              * after which we create a div and pre
              * elements.
              *
              * The data is attached to the pre tag
              * and the pre tag to the created div
              * which in turn is attached to a section
              * on the page
              */
            let text = document.createTextNode(e.data);
            let div = document.createElement('div');
            let pre = document.createElement('pre');
            pre.appendChild(text);
            div.appendChild(pre);
            commentsInCode.appendChild(div);
            comment_subheading.style.display = "block";
        }
    }

    /**
      * We are using four buttons to make things simple
      * after the user click yes to view the comments
      * we hide the "yes" and "no"buttons. Afterward,
      * we show the "hide" and "remove" paragraph
      * buttons
      */
    view_comments.classList.toggle("hidden");
    dont_view_comments.classList.toggle("hidden");
    hide_comments.classList.toggle("show");
    remove_paragraph.classList.toggle("show");
});

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu người dùng không muốn xem các bình luận, chúng tôi sẽ đóng hoàn toàn phần bình luận

// a button to close the comments section on initial
// page load
dont_view_comments.addEventListener('click', function() {
    comments_section.style.display = 'none'; 
});

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau khi người dùng quyết định xem các bình luận, chúng tôi sẽ bật và tắt hai nút khi người dùng nhấp vào - ẩn bình luận và hiển thị bình luận

/**
  * Add an event listener to the hide, show,
  * dont view comments and view comments buttons
  */ 
hide_comments.addEventListener("click", function() {
    commentsInCode.style.display = "none";
    hide_comments.style.display = "none";
    show_comments.style.display = "block";
});

show_comments.addEventListener("click", function() {
    hide_comments.style.display = "block";
    commentsInCode.style.display = "block";
    show_comments.style.display = "none";
});

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cuối cùng, chúng tôi cung cấp một giải pháp thay thế để người dùng đóng toàn bộ phần nhận xét

// a button to close the entire comments section
remove_paragraph.addEventListener("click", function()  {
    comments_section.style.display = "none";
});

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hình ảnh dưới đây là một ví dụ về mã này đang hoạt động

Thẻ bình luận html trong javascript
Một ví dụ hiển thị hai nhận xét đã được tìm thấy bởi tập lệnh

Hạn chế

Cách tiếp cận này không xem xét các nhận xét trong phần tử con. Ví dụ

p {
    font-weight: bold;
    line-height: 1.618;
    font: 18px Georgia;
}

pre {
    font-weight: bold;
    text-decoration: underline;
    font-family: Georgia;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.form__label {
    display: block;
    margin-bottom: 0.6em;
}

.btn {
    border: none;
    padding: 1.2em;
    background-color: #cd5b45;
    color: #ffffff;
}

.btn.success {
    background-color: green;
}

.btn:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.show {
   display: block;
}

#comments_section {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    padding: 1.2em;
    position: relative;
}

.remove-paragraph {
    padding: 0.8em;
    position: absolute;
    top: 0em;
    right: 0em;
    border: 50%;
}

.remove-paragraph:hover {
    cursor: pointer;
    font-weight: bold;
}

.remove-paragraph::before {
    content: 'x';
}

#commentsInCode {
    background-color: #cccccc;
}

#commentsInCode pre {
    padding: 1em;
}

#commentsInCode h2 {
    text-align: center;
}

.hidden {
    display: none;
}

.show {
   display: block;
}
0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Phần kết luận

Điều này hữu ích cho mục đích gỡ lỗi. Mã bị hack nhưng nó hoạt động. Việc cải thiện mã hoặc tốt hơn nữa là biến nó thành một hàm chấp nhận bộ chọn làm đối số tùy thuộc vào bạn

Làm cách nào để nhận xét HTML trong JavaScript?

Nhận xét Javascript một dòng bắt đầu bằng hai dấu gạch chéo (//) . Tất cả văn bản sau hai dấu gạch chéo lên cho đến cuối dòng tạo thành một nhận xét, ngay cả khi có dấu gạch chéo lên trong văn bản nhận xét.

/* trong JavaScript là gì?

Nhận xét nhiều dòng bắt đầu bằng /* và kết thúc bằng */. Mọi văn bản giữa /* và */ sẽ bị JavaScript bỏ qua

Làm cách nào để bình luận trong JavaScript?

Trong JavaScript, có thể thêm nhận xét một dòng bằng cách sử dụng hai dấu gạch chéo // .

Làm cách nào để sử dụng các thẻ HTML bên trong thẻ script?

Thêm JavaScript vào Tài liệu HTML . Thẻ .

programming javascript

Bài Viết Liên Quan

Bài tập tiếng việt lớp 3 tập 1 pdf năm 2024
Bài tập tiếng việt lớp 3 tập 1 pdf năm 2024

mẹo hay Khỏe Đẹp Bài tập
Asias next top model 5 ep 3 năm 2024
Asias next top model 5 ep 3 năm 2024

mẹo hay Top List Top
Bài thi vào cấp 3 là hình thức gì năm 2024
Bài thi vào cấp 3 là hình thức gì năm 2024

là ai
Chứng từu cần để quyết toán thuế tndn năm 2024
Chứng từu cần để quyết toán thuế tndn năm 2024

mẹo hay
Con chuoột máy tính gọi thông dụng là gì năm 2024
Con chuoột máy tính gọi thông dụng là gì năm 2024

là ai Hỏi Đáp Là gì Công Nghệ Máy tính Máy Chuột bi
Cách in vé sô kiến thiết như thế nào năm 2024
Cách in vé sô kiến thiết như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào Mẹo Hay Cách To vé số
Rules of survival pc lỗi không bấm số được năm 2024
Rules of survival pc lỗi không bấm số được năm 2024

mẹo hay PUBG offline PC
Mời bạn ăn cơm tiếng anh là gì năm 2024
Mời bạn ăn cơm tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Đề thi học sinh giỏi toán lớp 6 nam 2023-2023 năm 2024
Đề thi học sinh giỏi toán lớp 6 nam 2023-2023 năm 2024

mẹo hay Học Tốt Học
Ngày 2 tháng 7 là cung hoàng đạo gì năm 2024
Ngày 2 tháng 7 là cung hoàng đạo gì năm 2024

là ai Cung Cự Giải
Cách sửa lỗi lmht lỗi dữ liệu bị hỏng năm 2024
Cách sửa lỗi lmht lỗi dữ liệu bị hỏng năm 2024

mẹo hay Mẹo Hay Cách Lỗi Riot client Download Riot Client Hextech Repair Tool
Top trang web tai anh chat luong cao năm 2024
Top trang web tai anh chat luong cao năm 2024

mẹo hay Top List Top Pixabay Web ảnh Unsplash
Tính quản lý trong quan hệ lao động là gì năm 2024
Tính quản lý trong quan hệ lao động là gì năm 2024

là ai Hỏi Đáp Là gì
Tập làm văn lớp 6 tả người thân năm 2024
Tập làm văn lớp 6 tả người thân năm 2024

mẹo hay
Vbt toán lớp 5 tập 2 bài 173 năm 2024
Vbt toán lớp 5 tập 2 bài 173 năm 2024

mẹo hay
Sinh ngày 15 tháng 1 năm 1988 là tuổi gì năm 2024
Sinh ngày 15 tháng 1 năm 1988 là tuổi gì năm 2024

là ai
1 số bài toán về cm trung trực năm 2024
1 số bài toán về cm trung trực năm 2024

mẹo hay
Cách cập nhật các bản vá lỗi cho windows năm 2024
Cách cập nhật các bản vá lỗi cho windows năm 2024

mẹo hay Mẹo Hay Cách Update win 10 Update Windows 11
Đề thi đại học môn toán năm 2023 khối a năm 2024
Đề thi đại học môn toán năm 2023 khối a năm 2024

mẹo hay Học Tốt Học Đại học Hơn
Paid-in capital in excess of par value là gì năm 2024
Paid-in capital in excess of par value là gì năm 2024

là ai Hỏi Đáp Là gì additional paid-in capital Share capital

Quảng Cáo

Có thể bạn quan tâm

Bài tập kinh tế xây dựng đầu tư khách sạn năm 2024
1 ngày trước . bởi SaneSolemnity
Viết bài văn nghị luận về niềm tin năm 2024
1 ngày trước . bởi Short-livedFreestyle
4 file bl al cp csc là gì năm 2024
1 ngày trước . bởi RheumatoidBacklash
Quỹ đầu tư pdf là viết tắt của từ gì năm 2024
1 ngày trước . bởi SumptuousEmbodiment
Các quán ăn trên đường phạm văn đồng nha trang năm 2024
1 ngày trước . bởi CompetentNarrator
Top 10 công ty vốn hóa lớn nhất thế giới năm 2024
1 ngày trước . bởi ImplacableDentist
Giáo án ngữ văn 11 cơ bản trọn bộ năm 2024
1 ngày trước . bởi Self-indulgentDigress
Ngôn ngữ lập trình là ngôn ngữ gì năm 2024
1 ngày trước . bởi FeedingFormality
Nên mua xe máy nào cho học sinh cấp 3 năm 2024
1 ngày trước . bởi CrossedUnification
Bài tập thể dục buổi sáng bài số 4 năm 2024
1 ngày trước . bởi InvestingAccommodation

Toplist được quan tâm

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
5 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
5 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
5 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
5 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
5 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
5 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
5 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
5 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
5 tháng trước

Quảng cáo

Xem Nhiều

D là ký hiệu gì trong hóa học năm 2024
1 tuần trước . bởi PreposterousTheology
Qua tiêu hóa lipid sẽ được biến đổi thành gì năm 2024
3 ngày trước . bởi RabidContentment
Camera điều khiển tren không gọi là gì năm 2024
23 giờ trước . bởi SquareBrunt
Bài 42 vật lí 9 sách bài tập năm 2024
6 ngày trước . bởi One-manReceptor
Nhà hàng phố đêm 346 phạm văn đồng năm 2024
6 ngày trước . bởi UnregulatedIntersection
Dùng ram như thế nào cho máy tính xem phim năm 2024
1 ngày trước . bởi DelightedWhereabouts
Nguyên tắc khách quan là gì năm 2024
1 tuần trước . bởi MelancholyCylinder
Rd trong tiếng anh là gì năm 2024
1 tuần trước . bởi EffortlessGoogle
25 đô là bao nhiêu tiền việt năm 2024
1 tuần trước . bởi MarineWidget
Đi vệ sinh nhiều lần trong ngày là bệnh gì năm 2024
1 tuần trước . bởi AptPerusal

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Xây Nhà Inc.