My goal is to comment on each blog post on a page. However, I am having trouble with the JavaScript code to get all buttons and input fields working and displaying the input values.
This is my current JS code: I am attempting to iterate through each button and retrieve the corresponding input value. I have also tried using
let text = document.previousSibling.value;let postArr = document.querySelectorAll('#post');
let inputBox = document.querySelectorAll('#commentBox').values;
function updateComments(){
postArr.forEach(function(btn){
btn.addEventListener("click", function(){
let li = document.createElement("li");
let text = document.createTextNode(inputBox[i]);
li.appendChild(text);
document.getElementById("unordered").appendChild(li);
});
})
}
Below is the relevant HTML:
<section class="article">
<h3>BLOG POST #1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis eius veritatis possimus magni esse, ipsum vel consectetur,
alias tenetur quis. Assumenda saepe aperiam vero cupiditate iusto perspiciatis provident. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Placeat perspiciatis quis ipsam sunt voluptates suscipit, alias omnis in possimus libero quam quos. Quidem unde eum accusamus eos eligendi, possimus ratione.</p>
<section class="commentList">
<ul id="unordered">
</ul>
</section>
<section class="comment">
<label>LEAVE A COMMENT</label>
<input type="text" id="commentBox" placeholder="Enter comment">
<button id="post" onclick="updateComments()">POST</button>
<button class="like" onclick="updateLike()">LIKE</button>
</section>
<button class="save">SAVE FOR LATER</button>
</section>
<section class="article">
<h3>BLOG POST #2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis eius veritatis possimus magni esse, ipsum vel consectetur,
alias tenetur quis. Assumenda saepe aperiam vero cupiditate iusto perspiciatis provident. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Placeat perspiciatis quis ipsam sunt voluptates suscipit, alias omnis in possimus libero quam quos. Quidem unde eum accusamus eos eligendi, possimus ratione.</p>
<section class="commentList">
<ul id="unordered">
</ul>
</section>
<section class="comment">
<label>LEAVE A COMMENT</label>
<input type="text" id="commentBox" placeholder="Enter comment">
<button onclick = "updateComments()" id="post">POST</button>
<button onclick= "updateLike()" class="like">LIKE</button>
</section>
<button class="save">SAVE FOR LATER</button>
</section>