我目前正在尝试创建评论部分,我可以设法让用户输入他们的姓名和评论,并且我还完成了创建列表,但是我无法将输入的名称和评论都添加到列表中作为评论。你能修复 Javascript 以将名称和评论添加到列表中吗?我想修复我的 favascrpt,这样我就可以将我的元素“comment”添加到我添加的名为“list”的 ID 的列表中。
// JavaScript Document
function titleSubmit() {
document.querySelector("titleNameinput");
document.querySelector("message");
document.getElementById("message").innerHTML = titleNameinput.value;
}
function CommentSubmit() {
document.querySelector("CommentSubmitinput");
document.querySelector("comment");
document.getElementById("comment").innerHTML = CommentSubmitinput.value;
}
function AddItemsintoList() {
document.querySelector("list")
document.querySelector("comment");
list.append("comment")
}
@charset "utf-8";
/* CSS Document */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
min-height: 100%;
}
h1 {
margin-left: 20px;
margin-top: 5px;
}
h3 {
font-size: 30px;
}
.chattitle {
font-size: 60px;
}
.container {
width: min(90%, 1140px);
margin: 3rem auto;
}
.comment__container {
position: relative;
}
.comment__container {
content: "";
background-color: RGB 165, 165, 165;
position: absolute;
min-height: 100%;
/*as hight as container itself*/
width: 1px;
left: -10px;
}
.comment_card {
padding: 20px;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: .5rem;
min-width: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}
.comment__card h3,
.comment__card p {
margin-bottom: 1rem;
}
.comment_card-footer {
display: flex;
font-size: .85rem;
opacity: p;
gap: 30px;
justify-content: flex-end;
align-items: center;
}
.show-replies {
cursor: pointer;
}
.header {
background-color: white;
color: black;
text-align: center;
margin: -30px;
font-size: 50px;
}
.headimg {
line-height: 5px;
background-color: white;
padding: 5px;
display: block;
margin-left: auto;
margin-right: auto;
width: 125px;
}
.container {
border-radius: 25px;
width: 85%;
margin: auto;
border: #000000;
}
.container2 {
border-radius: 25px;
width: 99%;
background: #09B018;
margin: auto;
border: #000000;
}
.row {
padding: 10px;
border-radius: 20px;
background: #09B04F;
display: flex;
gap: 2%;
justify-content: center;
}
.column {
border-radius: 15px;
width: 60%;
background: #02DB69;
min-height: 125px;
gap: 5%;
margin-left: 10px;
margin-right: 10px;
}
.navi {
display: flex;
justify-content: center;
/* Centers the list items horizontally */
list-style-type: none;
padding: 0;
margin: 0;
}
.navi li {
font-size: 30px;
margin-right: 20px;
/* Adjust spacing between items as needed */
}
.commenttext {
font-size: 20px;
}
<div><img src="ECORUM_Logo(png).png" alt="Logo" class="headimg"></div>
<ul class="navi">
<li>Home</li>
<li>About</li>
<li>Events</li>
<li>Project</li>
<li>Contact</li>
</ul>
<br>
<hr>
<h1 class="chattitle">Test Title</h1>
<br>
<div class="container">
<div class="comment_container">
<div class="comment_card">
<script src="test.js"></script>
<input id="titleNameinput" type="text" value="SampleTitle" style="height:30px; width:70%;font-size: 20px">
<br> <br>
<input id="CommentSubmitinput" type="text" value="Comment" style="height:25px; width:45%;font-size: 16px">
<br>
<br>
<button onClick="CommentSubmit(); titleSubmit()" style="height:30px; width:90px">Comment</button>
<script>
myFunction();
</script>
</div>
</div>
<br>
<br>
</div>
<div class="container">
<div class="comment_container">
<div class="comment_card">
<ul id="list">
<li>
<p id="message"></p>
<p id="comment"></p>
</li>
<!--I want to add code to include new items from input into this unordered list to make a comment section without moving a new line><!--->
<script>
AddItemsintoList()
</script>
</ul>
</div>
</div>
</div>
<br>
<hr>
问题是您仅替换了现有
#title
和 #message
段落元素中的字符串。您需要做的就是向#list
添加新元素。一种方法是使用 .innerHTML
并不断添加新的字符串元素。此示例展示了如何使用模板文字将变量插入到字符串中。
此外,在元素上使用
on-click
是一个不好的标准。您应该使用 addEventListener
。
此外,删除了不相关的 HTML 代码。
document.getElementById("commentBtn").addEventListener("click", addComment);
function addComment() {
const listElement = document.getElementById("list");
const titleValue = document.getElementById("titleNameinput").value;
const commentValue = document.getElementById("CommentSubmitinput").value;
listElement.innerHTML += `
<li>
<p class="message">${titleValue}</p>
<p class="comment">${commentValue}</p>
</li>
`
}
@charset "utf-8";
/* CSS Document */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
min-height: 100%;
}
h1 {
margin-left: 20px;
margin-top: 5px;
}
h3 {
font-size: 30px;
}
.chattitle {
font-size: 60px;
}
.container {
width: min(90%, 1140px);
margin: 3rem auto;
}
.comment__container {
position: relative;
}
.comment__container {
content: "";
background-color: RGB 165, 165, 165;
position: absolute;
min-height: 100%;
/*as hight as container itself*/
width: 1px;
left: -10px;
}
.comment_card {
padding: 20px;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: .5rem;
min-width: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}
.comment__card h3,
.comment__card p {
margin-bottom: 1rem;
}
.comment_card-footer {
display: flex;
font-size: .85rem;
opacity: p;
gap: 30px;
justify-content: flex-end;
align-items: center;
}
.show-replies {
cursor: pointer;
}
.header {
background-color: white;
color: black;
text-align: center;
margin: -30px;
font-size: 50px;
}
.headimg {
line-height: 5px;
background-color: white;
padding: 5px;
display: block;
margin-left: auto;
margin-right: auto;
width: 125px;
}
.container {
border-radius: 25px;
width: 85%;
margin: auto;
border: #000000;
}
.container2 {
border-radius: 25px;
width: 99%;
background: #09B018;
margin: auto;
border: #000000;
}
.row {
padding: 10px;
border-radius: 20px;
background: #09B04F;
display: flex;
gap: 2%;
justify-content: center;
}
.column {
border-radius: 15px;
width: 60%;
background: #02DB69;
min-height: 125px;
gap: 5%;
margin-left: 10px;
margin-right: 10px;
}
.navi {
display: flex;
justify-content: center;
/* Centers the list items horizontally */
list-style-type: none;
padding: 0;
margin: 0;
}
.navi li {
font-size: 30px;
margin-right: 20px;
/* Adjust spacing between items as needed */
}
.commenttext {
font-size: 20px;
}
<div class="container">
<div class="comment_container">
<div class="comment_card">
<input id="titleNameinput" type="text" value="SampleTitle" style="height:30px; width:70%;font-size: 20px">
<br><br>
<input id="CommentSubmitinput" type="text" value="Comment" style="height:25px; width:45%;font-size: 16px">
<br><br>
<button id="commentBtn" style="height:30px; width:90px">Comment</button>
</div>
</div>
<br><br>
</div>
<div class="container">
<div class="comment_container">
<div class="comment_card">
<ul id="list"></ul>
</div>
</div>
</div>
<br>
<hr>