简体   繁体   中英

How can I add a comment option to my comment box so that the comments appear below the comment box?

How can I add a comment option to my comment box so that the comments appear below the comment box?

I have the comment box ready, but only this addendum is missing.

My html...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment Box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
    <input type="text" id="my-text" placeholder="Enter comment">
    <p id="result"></p>
    <button id="post">Post</button>
    <ul id="unordered">
       
   </ul>
   
    <script src="code.js"></script>
</body>
</html>

My js..


var myText = document.getElementById("my-text");
var result = document.getElementById("result");
var limit = 140;
result.textContent = 0 + "/" + limit;

myText.addEventListener("input",function(){
    var textLength = myText.value.length;
    result.textContent = textLength + "/" + limit;

    if(textLength > limit){
        myText.style.borderColor = "#ff2851";
        result.style.color = "#ff2851";
    }
    else{
        myText.style.borderColor = "#b2b2b2";
        result.style.color = "#737373";
    }

});

I tried to solve it according to this code - https://linuxhint.com/create-comment-box-using-html-css-javascript/ - but I couldn't find a solution and I don't understand how it could be done. Any ideas?

I think that you have to use and appendChild to add the li in the list of ul's

The thing that you're trying to do, you can find more help or information in other websites, named by "Personal Twitter", or "TO DO list". The rest of the code it look's good, but you only have to add this appendChild, to write the data in the html:)

You also could use this video , and use it to reference.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM