#javascript #html
#javascript #HTML
Вопрос:
Я пытаюсь сделать простой комментарий для целей обучения (например, на картинке)
Как мне заставить кнопку публикации публиковать комментарий в новом поле ввода каждый раз, когда я нажимаю. Другими словами, каждый раз, когда я пишу комментарий в текстовой области и нажимаю кнопку публикации, каждый из этих комментариев должен переходить в каждое поле ввода.
пример: я пишу «мне это нравится» в текстовой области и нажимаю опубликовать, эта запись будет отображаться в классе комментариев (0). Следующий комментарий «xyz» и нажмите «Опубликовать» переходит в класс (1) и т. Д. Пока я знаю только, как отображать в одном поле ввода.
Вот мой код до сих пор:
function postcomment(){
var x = document.getElementById("entercomment").innerHTML;
document.getElementsByClassName("comment")[0].value = x;
} body{
background-color: cyan;
}
#picgoeshere{
border: 5px solid grey;
height: 500px;
width:900px;
margin: 0 auto;
}
#picture{
height: 500px;
width:900px;
}
#displaycomment{
border: 3px solid grey;
height:250px;
width:800px;
margin: 0 auto;
margin: top:50%;
}
.comment{
height: 41.5px;
width: 800px;
border: 0;
}
#typecomment{
border: 3px solid grey;
height:100px;
width:800px;
margin: 0 auto;
}
#entercomment{
height:100px;
width:700px;
}
#submitbutton{
border: 1px solid grey;
background-color: green;
height: 100px;
width: 100.9px;
position: absolute;
top: ;
left: 65.7%;
} </!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="learnjs.css">
<title></title>
</head>
<body>
<div id="everything">
<div id="picgoeshere">
<img src="./images/bisping.jpg" id="picture">
</div>
<div id="displaycomment">
<input type="text" class="comment"></br>
<input type="text" class="comment"></br>
<input type="text" class="comment"></br>
<input type="text" class="comment"></br>
<input type="text" class="comment"></br>
<input type="text" class="comment"></br>
</div>
<div id="typecomment">
<textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>
<button id="submitbutton" onclick="postcomment()"> Post</button>
</div>
</div>
<script src = "learn.js"></script>
</body>
</html> Комментарии:
1. Есть какая-то конкретная причина, по которой вы используете элементы ввода для отображения комментария?
2. нет, это то, что я узнал до сих пор. если другие элементы лучше, это здорово. но я хочу использовать только Java script
3. @AnuRajan вы хотите отобразить свой комментарий в формате post box, например, в теге <pre> ??
Ответ №1:
Это должно вам помочь!
function postcomment() {
var x = document.getElementById("entercomment").value;
document.getElementById("entercomment").value = ''
const node = document.createElement("div")
const deleteButton = document.createElement("span")
node.innerHTML = x
node.className = 'cmt'
deleteButton.className = 'delete-button'
deleteButton.innerHTML = 'delete'
deleteButton.onclick = function(e) {
e.target.parentNode.parentNode.removeChild(e.target.parentNode)
}
node.appendChild(deleteButton)
const commentContainer = document.getElementById('displaycomment')
commentContainer.appendChild(node)
} body {
background-color: cyan;
}
#picgoeshere {
border: 5px solid grey;
height: 500px;
width: 900px;
margin: 0 auto;
}
#picture {
height: 500px;
width: 900px;
}
#displaycomment {
border: 3px solid grey;
height: 250px;
width: 800px;
margin: 0 auto;
margin: top: 50%;
}
.cmt {
background: #000;
color: #fff;
border-radius: 4px;
margin-top: 20px;
padding: 15px;
}
.comment {
height: 41.5px;
width: 800px;
border: 0;
}
#typecomment {
border: 3px solid grey;
height: 100px;
width: 800px;
margin: 0 auto;
}
#entercomment {
height: 100px;
width: 700px;
}
#submitbutton {
border: 1px solid grey;
background-color: green;
height: 100px;
width: 100.9px;
position: absolute;
top: ;
left: 65.7%;
}
.delete-button {
float: right;
color: red;
cursor: pointer;
} </!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="learnjs.css">
<title></title>
</head>
<body>
<div id="everything">
<div id="picgoeshere">
<img src="./images/bisping.jpg" id="picture">
</div>
<div id="displaycomment">
</div>
<div id="typecomment">
<textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>
<button id="submitbutton" onclick="postcomment()">Post</button>
</div>
</div>
<script src="learn.js"></script>
</body>
</html> Комментарии:
1. вау, спасибо. я начну изучать это. Это лучший способ делать то, что я хочу. Я использовал элемент ввода в основном для того, чтобы у него была опция удаления (x). есть ли способ удалить опубликованный комментарий, используя стиль ur?
2. @AnuRajan добавил возможность удаления. Рассмотрите возможность утверждения ответа!
Ответ №2:
Вы могли бы создать переменную счетчика и использовать ее для ссылки на каждый из элементов комментария, а затем добавлять 1 при каждом вызове функции. Например:
var counter = 0;
function postcomment() {
var x = document.getElementById("entercomment").value;
document.getElementsByClassName("comment")[counter].value = x;
counter ;
} body {
background-color: cyan;
}
#picgoeshere {
border: 5px solid grey;
height: 500px;
width: 900px;
margin: 0 auto;
}
#picture {
height: 500px;
width: 900px;
}
#displaycomment {
border: 3px solid grey;
height: 250px;
width: 800px;
margin: 0 auto;
margin: top: 50%;
}
.comment {
height: 41.5px;
width: 800px;
border: 0;
}
#typecomment {
border: 3px solid grey;
height: 100px;
width: 800px;
margin: 0 auto;
}
#entercomment {
height: 100px;
width: 700px;
}
#submitbutton {
border: 1px solid grey;
background-color: green;
height: 100px;
width: 100.9px;
position: absolute;
top: ;
left: 65.7%;
} </!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="learnjs.css">
<title></title>
</head>
<body>
<div id="everything">
<div id="picgoeshere">
<img src="./images/bisping.jpg" id="picture">
</div>
<div id="displaycomment">
<input type="text" class="comment">
<br>
<input type="text" class="comment">
<br>
<input type="text" class="comment">
<br>
<input type="text" class="comment">
<br>
<input type="text" class="comment">
<br>
<input type="text" class="comment">
<br>
</div>
<div id="typecomment">
<textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>
<button id="submitbutton" onclick="postcomment()">Post</button>
</div>
</div>
<script src="learn.js"></script>
</body>
</html> Комментарии:
1. @AnuRajan нет проблем: D
Ответ №3:
вот небольшой пример того, что вы хотите построить
function addNewComment() {
var comment = document.getElementById('comment').value
var comments = document.getElementById('comments');
comments.innerHTML = comment "<br>";
} <p id=comments></p>
<input type="text" id="comment">
<input type="submit" onclick="addNewComment()" value="submit"> Ответ №4:
Это то, что вы могли бы сделать.
Это всегда будет сложно, когда у вас фиксированное количество комментариев. Я внес изменения в способ добавления элементов в раздел отображения, как только кто-то добавит комментарий. Как я и делал, вы могли добавлять любое количество комментариев.
var commentId = 0;
function postcomment() {
// Get the comment text
var commentTextElement = document.querySelector("#entercomment")
var x = commentTextElement.value;
//Create a new element to display the comment and add the text content to it, you could use any element here. I just created a div for simple implementation
var element = document.createElement("div");
element.setAttribute("id", "comment-id-" commentId)
element.innerHTML = x;
var deleteElement = document.createElement("button");
deleteElement.innerHTML = "Delete";
deleteElement.setAttribute("commentId", "comment-id-" commentId);
commentId ;
deleteElement.className = "delete";
element.appendChild(deleteElement);
element.className = "posted-comment"
// Clear the text to enable further comments.
commentTextElement.value = "";
// Append the new comment to the display section
document.querySelector("#displaycomment").appendChild(element);
}
document.querySelector("#displaycomment").addEventListener("click", function(event) {
if (event.target.tagName === "BUTTON") {
var buttonElement = event.target;
var commentId = buttonElement.getAttribute("commentId");
document.querySelector("#" commentId).remove();
}
}); body {
background-color: cyan;
}
#picgoeshere {
border: 5px solid grey;
height: 500px;
width: 900px;
margin: 0 auto;
}
#displaycomment {
border: 3px solid grey;
height: 250px;
width: 400px;
margin: 0 auto;
margin: top: 50%;
}
.comment {
height: 41.5px;
width: 800px;
border: 0;
}
#typecomment {
border: 3px solid grey;
height: 100px;
width: 800px;
margin: 0 auto;
}
#entercomment {
height: 100px;
width: 700px;
}
#submitbutton {
border: 1px solid grey;
background-color: green;
height: 100px;
width: 100.9px;
position: absolute;
top: ;
left: 65.7%;
}
.posted-comment {
margin: 10px;
border: 1px solid #dedede;
}
.delete {
float: right;
} <div id="everything">
<div id="displaycomment">
</div>
<div id="typecomment">
<textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>
<button id="submitbutton" onclick="postcomment()">Post</button>
</div>
</div> Комментарии:
1. . я начну изучать это. Это лучший способ делать то, что я хочу. Я использовал элемент ввода в основном потому, что у него есть опция удаления (x). есть ли способ удалить опубликованный комментарий, используя стиль ur?
2. Просто добавлен способ, которым вы могли бы также удалить.
Ответ №5:
—Используйте предварительный тег для сохранения формата опубликованных комментариев — Окно автоматической прокрутки комментариев для прокрутки комментариев. —используйте случайный идентификатор для удаления функции щелчка по изображению.
function postcomment() {
document.getElementById("entercomment").focus();
var comment = document.getElementById("entercomment").value;
var randomId = Math.random().toString(36).replace(/[^a-z] /g, '').substr(0, 5);
document.getElementById("displaycomment").innerHTML = "<pre class='preClass' id ='" randomId "' />" comment "<img src='http://image.flaticon.com/icons/svg/54/54528.svg' onclick='removeComment(this.id);' id='" randomId "' class='preimg' /> </pre> ";
document.getElementById("entercomment").value = "";
}
function removeComment(element) {
var ele = document.getElementById(element);
ele.parentElement.removeChild(ele);
} body {
background-color: cyan;
}
#picgoeshere {
border: 5px solid grey;
height: 500px;
width: 900px;
margin: 0 auto;
}
#picture {
height: 500px;
width: 900px;
}
#displaycomment {
border: 3px solid grey;
height: 250px;
max-width: 800px;
overflow: auto;
margin: 0 auto;
margin: top: 50%;
}
.comment {
height: 41.5px;
width: 800px;
border: 0;
}
#typecomment {
border: 3px solid grey;
height: 100px;
width: 800px;
margin: 0 auto;
}
#entercomment {
height: 100px;
width: 700px;
}
#submitbutton {
border: 1px solid grey;
background-color: green;
height: 100px;
width: 100.9px;
position: absolute;
top: ;
left: 65.7%;
}
.preClass {
width: 100%;
border-bottom: 1px dotted blue;
position: relative;
}
.preimg {
height: 15px;
position: absolute;
right: 0px;
top: 0px;
} <div id="everything">
<div id="picgoeshere">
<img src="http://cdn.wallpapersafari.com/43/53/Tx8wbO.jpg" id="picture">
</div>
<div id="displaycomment">
<!-- <div id="comment"> </div>-->
</div>
<div id="typecomment">
<textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>
<button id="submitbutton" onclick="postcomment()">Post</button>
</div>