How to style each div that is created by JavaScript code

Question

I'm creating a site for emails, where a user upon clicking a mailbox (inbox, sent, archived) I will show them all the emails that belong to said mailbox.

Now my problem is the layout, the borders of each email are not displaying the way I want. This is how it should be, where the email with gray background is a read one, while white is not:

This is what code turns up:

I want them separated but I can't get it to work. Help would be appreciated!

inbox.js:

function load_mailbox(mailbox) {

  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#compose-view').style.display = 'none';

  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

  //get me all the emails in inbox(example)
  fetch(`/emails/${mailbox}`)
  .then(response => response.json())
  .then(emails => {
    
    //for each email
    emails.forEach(myFunction);

    function myFunction(item) {

      //create a new div htmlelement
      const element = document.createElement('div');
      //give it a class in case i need it
      element.setAttribute("class", "email-dv")

      //add info to this div
      element.innerHTML += item.sender + "<br>";
      element.innerHTML += item.subject + "<br>";
      element.innerHTML += item.timestamp + "<br>";
      
      //create the borders for the div
      //issue here, it is not creating a rectangle for each div
      element.style.boder = "groove"; 

      //if email is not read
      if (item.read === false) { 
        element.style.backgroundColor = "white";
      }
      else {
        element.style.backgroundColor = "grey";
      }

      element.addEventListener('click', function() {
        console.log('This element has been clicked!')
      });

      //add it to the main div for all emails
      document.querySelector('#emails-view').append(element);
    }

  });

inbox.html :

{% extends "mail/layout.html" %}
{% load static %}

{% block body %}
    <h2>{{ request.user.email }}</h2>

    <button class="btn btn-sm btn-outline-primary" id="inbox">Inbox</button>
    <button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
    <button class="btn btn-sm btn-outline-primary" id="sent">Sent</button>
    <button class="btn btn-sm btn-outline-primary" id="archived">Archived</button>
    <a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
    <hr>

<div id="emails-view" >
</div>

    <div id="compose-view">
        <h3 id="h">New Email</h3>
        <form id="compose-form">
            <div class="form-group">
                From: <input disabled class="form-control" value="{{ request.user.email }}">
            </div>
            <div class="form-group">
                To: <input id="compose-recipients" class="form-control">
            </div>
            <div class="form-group">
                <input class="form-control" id="compose-subject" placeholder="Subject">
            </div>
            <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
            <input type="submit" class="btn btn-primary" id="submit-button"/>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'mail/inbox.js' %}"></script>
{% endblock %}

“//issue here, it is not creating a rectangle for each div” - you tried to set a boder, not a border. — C3roe
– C3roe, Commented Jul 28, 2020 at 11:29
(You should rather assign classes, than setting inline styles.) — C3roe
– C3roe, Commented Jul 28, 2020 at 11:30
@CBroe well that is pretty embarrassing for me. Fixed the mistake, they are showing now the way i wanted. i just gotta add the margins to better fix them.Thank you — Bryar
– Bryar, Commented Jul 28, 2020 at 11:32

Debsmita Paul · Accepted Answer · 2020-07-28 11:40:53Z

2

Well, first of all you have a typo:

element.style.boder you're missing the "r" in border. Can you check that first?

edited Jul 28, 2020 at 11:40

Debsmita Paul

1,48011 silver badges22 bronze badges

answered Jul 28, 2020 at 11:32

Onur

914 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bryar Over a year ago

yup, you're correct. They are showing correctly, thanks (i will accept your answer in a few mins)

s.kuznetsov Over a year ago

if this question helped you, then mark it with a tick to the left of the question.

Collectives™ on Stack Overflow

How to style each div that is created by JavaScript code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related