Hướng dẫn how to create a comment section in html and javascript - cách tạo phần bình luận trong html và javascript
|
Để nhận phản hồi hoặc bất kỳ tin nhắn nào từ khách truy cập trang web, bạn cần một hộp bình luận trên trang web của bạn. Một hộp nhận xét có thể được tạo bằng cách sử dụng bất kỳ công nghệ web nào cho dù đó là HTML, CSS hay thậm chí là JavaScript đơn giản. Ba công cụ HTML, CSS và JavaScript là đủ để tạo các trang web đầy đủ chức năng. Chúng tôi sẽ khám phá cách thực hiện một hộp nhận xét đơn giản với HTML, CSS và JavaScript trong bài đăng này. Mở trình soạn thảo yêu thích của bạn và gõ hoặc sao chép mã dưới đây được đưa ra. Lưu tệp với tiện ích mở rộng HTML. & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Hộp bình luận & nbsp; & nbsp;DOCTYPE html> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Bài & nbsp; & nbsp;<input type="text" id="comment-box" placeholder="Enter comment"> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;ul> & nbsp; & nbsp; & nbsp; & nbsp;<script src="code.js">script> Trong mã HTML ở trên, chúng tôi đã sử dụng thẻ liên kết trong thẻ đầu để tham chiếu tệp CSS mà chúng tôi sẽ sử dụng sau. Sau này, trong thẻ cơ thể trước, chúng tôi đã bắt đầu một hộp đầu vào trong đó người dùng có thể nhập nhận xét của họ. Sau đó, một nút có tên của bài đăng được bắt đầu sẽ được nhấp để nhập nhận xét. Sau này, chúng tôi đã bắt đầu một danh sách không có thứ tự (UL) và để trống vì chúng tôi sẽ thêm một phần tử LI từ JavaScript trong thẻ này. Bạn cũng có thể thấy rằng chúng tôi sử dụng thuộc tính ID trong mã trên sẽ được sử dụng để tham chiếu các phần tử tương ứng trong mã JavaScript. Thẻ cuối cùng là thẻ script nơi chúng tôi đã truyền tham chiếu của tệp JavaScript sẽ được đính kèm vào tệp HTML hiện tại. Tên tệp JavaScript là Code.js.link tag in the head tag to reference the CSS file that we will use later. After this, in the body tag first, we
initiated an input box where a user can type their comment. Then a button with the name of the post is initiated which will be clicked to enter a comment. After this, we initiated an unordered list (ul) and left it blank because we will add a li element from JavaScript in this tag. You can also see that we use the id attribute in the above code which will be used to reference the corresponding elements in JavaScript code. The last tag is the script
tag where we passed the reference of the JavaScript file which will be attached to the current HTML file. The JavaScript file name is code.js. Tạo một tệp với tên của style.css. Cần lưu ý rằng bạn có thể đặt tên cho tệp của mình bất cứ điều gì nhưng hãy nhớ tham chiếu tên đó trong thẻ liên kết tệp HTML. Sao chép và dán mã dưới đây trong tệp CSS của bạn: cơ thể {& nbsp; & nbsp; Bối cảnh: DodgerBlue tuyến tính-Gradient (45Deg, Aqua, DodgerBlue, Deeppink) đã cố định;{ } #bình luận-box, #post {& nbsp; & nbsp; Biên giới: Không có; & nbsp; & nbsp; Border-Radius: 5px;} #Post: Hover {& nbsp; & nbsp; màu nền: deeppink;} Trong mã CSS ở trên, đầu tiên, chúng tôi đã tham khảo thẻ cơ thể của HTML và trang trí nền cơ thể với các màu khác nhau. Sau đó, sử dụng thuộc tính ID của hộp đầu vào, chúng tôi đã biến mất đường viền của hộp đầu vào và cho nó bán kính 5px. Kiểu dáng tương tự đã được áp dụng cho nút Post. Sau đó, sử dụng thuộc tính Hover, chúng tôi đặt màu nền của màu hồng sâu cho nút bài có nghĩa là bất cứ khi nào người dùng sẽ di chuột qua nút Post, màu của nó sẽ thay đổi thành màu hồng đậm.body tag of HTML and decorated the body background with different colors. Then using the id attribute of the input box, we vanished the border of the input box and gave it a radius of 5px. The same styling was applied to the post button. After this, using the hover property we set a background color of deep-pink for the post
button which means whenever a user will hover over the post button its color will change to deep pink. JavaScriptTạo tệp JavaScript với tiện ích mở rộng JS ví dụ Code.js. Cần lưu ý rằng tên của tệp phải tương tự như tên được tham chiếu trong thẻ tập lệnh của tệp HTML.js extension for example code.js. It should be noted that the name of the file should be similar to the one that was referenced in the script tag of the HTML file. Trong tệp Code.js, trước tiên, chúng tôi nhận phần tử nút HTML bằng phương thức getEuityById () và chuyển tên của ID được đưa vào nút trong HTML. Bạn cũng có thể thấy một trình nghe sự kiện được gắn vào bài đăng về cơ bản là phần tử nút. Trình nghe sự kiện này sẽ liên tục lắng nghe và bất cứ khi nào người dùng nhấp vào nút Post, chức năng trong trình nghe sự kiện sẽ được thực thi.code.js file, first, we get the HTML button element using getElementById() method and pass the name of the id given to the button in HTML. You can also see an event listener attached to the post which is basically the button element. This event listener will continuously listen and whenever a user clicks on the post button the function within the Event Listener will be executed. var post = document.getEuityById ("post"); post.AdDeventListener ("Nhấp", function () {& nbsp; & nbsp; var bình luậnboxvalue = document.getEuityById ("bình luận-box"). Giá trị; post= document.getElementById("post"); & nbsp; & nbsp; & nbsp; var li = document.createelement ("li"); & nbsp; & nbsp; var text = document.createTextNode (bình luậnboxvalue); & nbsp; & nbsp; li.AppendChild (văn bản); & nbsp; & nbsp; document.getEuityById ("không theo thứ tự"). appendChild (li);var li = document.createElement("li"); & nbsp; });}); Trong hàm người nghe sự kiện, trước tiên, chúng tôi sẽ nhận được giá trị của hộp đầu vào và sau đó, chúng tôi đã tạo ra một phần tử LI. Để đặt văn bản của phần tử LI, chúng tôi đã sử dụng CreatEtExtNode và sau đó sử dụng phương thức Phụ lục, chúng tôi đã cung cấp văn bản cho phần tử LI. Cuối cùng, bằng cách sử dụng phương thức phụ lục, chúng tôi đang cung cấp danh sách không có thứ tự về phần tử LI mà chúng tôi vừa tạo.createTextNode and after that using the appendChild method we provided the text to the li element. At last, using the appendChild method we are providing the unordered list of the li element we just created. Sự kết luậnHTML, CSS và JavaScript là các khối xây dựng cho nhà phát triển web và nhiều trang web được phát triển bằng ba công nghệ này. Trong bài đăng này, chúng tôi đã cung cấp cho bạn mã và giải thích về mã về cách tạo hộp bình luận bằng HTML, CSS và JavaScript. Dự án này sẽ có ích khi bạn đang lập danh sách việc cần làm, nhận xét trên trang web hoặc biểu mẫu phản hồi cũng như đính kèm văn bản vào một trang trong bất kỳ dự án web nào. Thông tin về các Tác giảMột nhà phát triển JavaScript & người đam mê Linux với 4 năm kinh nghiệm công nghiệp và đã được chứng minh để kết hợp các quan điểm sáng tạo và khả năng sử dụng dẫn đến các ứng dụng web đẳng cấp thế giới. Tôi có kinh nghiệm làm việc với Vue, React & Node.js & hiện đang làm việc về viết bài viết và tạo video. Làm thế nào để bạn tạo một phần bình luận trong HTML và JavaScript?Contents.. Bước 1: Tạo một thư mục có tên công khai và tạo chỉ mục.html .. Bước 2: Thêm mã Boilerplate vào chỉ mục của chúng tôi.html .. Bước 3: Tạo tệp style.css .. Bước 4: Thêm thư viện Pizer JS và tạo App.js .. Bước 5: Tạo biểu mẫu để thêm nhận xét mới .. Bước 6: Danh sách hiển thị các nhận xét nhận được cho kênh này .. Làm thế nào để bạn tạo một phần bình luận trong JavaScript?Bình luận dòng duy nhất bắt đầu với //.Bất kỳ văn bản nào giữa // và phần cuối của dòng sẽ bị JavaScript bỏ qua (sẽ không được thực thi).start with // . Any text between // and the end of the line will be ignored by JavaScript (will not be executed).
Làm cách nào để đưa ra một phần bình luận trong HTML?In HTML, a comment is text enclosed within < ! ╌ ╌> tags. This syntax tells the browser that they are comments and should not be rendered on the front end.
Làm thế nào để bạn nhận xét JavaScript trong HTML?Nhận xét dòng đơn một dòng JavaScript Nhận xét bắt đầu với hai dấu gạch chéo về phía trước (//).Tất cả văn bản sau hai lần chém về phía trước cho đến khi kết thúc một dòng tạo nên một bình luận, ngay cả khi có những dấu gạch chéo về phía trước trong văn bản nhận xét.start with two forward slashes (//). All text after the two forward slashes until the end of a line makes up a comment, even when there are forward slashes in the commented text. |
