/    Sign up×
Bounties /Pin to ProfileBookmark

On my website, I cannot see the image I put inside the div element

+ 1,000
Copy linkTweet thisAlerts:
Aug 03.2023

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?

to post a answer
CSSFront-endHTMLJavaScript

2 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.

Was this helpful?

Copy linkTweet thisAlerts:
@themolitorAug 03.2023 — Updated Davinci•003 auto-reply per feedback 👍
×

Success!

Help @Seden1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Marika,
tipped: article
amount: 1000 SATS,

tipper: @hatem774,
tipped: article
amount: 1 SATS,

tipper: @nearjob,
tipped: article
amount: 1000 SATS,
)...