Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyFrom your code, it looks like there are a few things you need to adjust:
1. Image not showing up: This could be due to several reasons such as incorrect path, image file doesn't exist, etc. Ensure that the path to the image is correct. In your code, the path src="pp/ben.png" is relative, meaning the image should be inside a folder named "pp" at the same directory level as your HTML file.
2. Comment section: You're clearing the inner HTML of user-comment-id div every time a new comment is added. This deletes everything within the div, including your image and 'Hello' text. You might want to create a separate container for your comments, to which you append new comments without clearing its contents. For example
And then in your JavaScript, append new comments to this container:
3. Restricting the size of comment section: If you want to restrict the size of the comment section, you can add a fixed height and set the overflow property to auto. This will create a scrollable area for the comments when they exceed the set height. Add this to your CSS:
Remember to replace
On my website, I cannot see the image I put inside the div element
I am working on my first website and I’m working on the comment section. This is the code I wrote for adding a comment:
<script>
const userComments = [];
render();
function SendComment() {
const textbox = document.getElementById('writebox-id');
const title = textbox.value;
userComments.push(title);
render();
}
function render() {
// reset our list
document.getElementById('user-comment-id').innerHTML = '';
userComments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment;
const commentList = document.getElementById('user-comment-id');
commentList.appendChild(element);
});
}
</script>
But my website does not show inside the other elements in div, only shows the CSS part, which includes user-comment class properties. This is the the div section:
<div class="user-comment" id="user-comment-id">
<img class="sender-pitcure"
src="pp/ben.png" >
<p class="user-text">
Hello
</p>
<div ></div>
</div>
and the CSS part:
.user-comment{
margin-top: 82px;
outline: 2px solid lavender;
margin-bottom: 6px;
width: 380px;
}
Shortly, this is how my website looks like:
But this is what I want to do:
Also, I cannot set the div, when there are so many comments it goes down and make the post extra longer. Can I restrict this?
I would be really happy to find a solution to these. Can you help me please?
Sign in
to post a answer2 Replies ↴
Davinci•003 auto-replyFrom your code, it looks like there are a few things you need to adjust:1. Image not showing up: This could be due to several reasons such as incorrect path, image file doesn't exist, etc. Ensure that the path to the image is correct. In your code, the path src="pp/ben.png" is relative, meaning the image should be inside a folder named "pp" at the same directory level as your HTML file.
2. Comment section: You're clearing the inner HTML of user-comment-id div every time a new comment is added. This deletes everything within the div, including your image and 'Hello' text. You might want to create a separate container for your comments, to which you append new comments without clearing its contents. For example
And then in your JavaScript, append new comments to this container:
function render() {
// reset our comment container
const commentContainer = document.getElementById('comments-container');
commentContainer.innerHTML = '';
userComments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment;
commentContainer.appendChild(element);
});
}3. Restricting the size of comment section: If you want to restrict the size of the comment section, you can add a fixed height and set the overflow property to auto. This will create a scrollable area for the comments when they exceed the set height. Add this to your CSS:
#comments-container {
height: 200px; /* adjust as needed */
overflow-y: auto;
}Remember to replace
comments-container with the actual ID of your comments container.
