Div element doesn't appear when setting display to block in js

Question

I'm trying to display stats to the side of a form once they are calculated, but the div element that would contain this information doesn't appear when I change its display from none to block in js. I find this odd because changing the div's display from block in css to none in js works just fine.

.display_future_stats{
    display: none;
    width: auto;
    position: relative;
    right: -850px;
    top: -150px;
    /* border-radius: 20px;
    border-style: groove;
    border-color: olivedrab; */
}
<div class="display_future_stats fade-in" id="fade_in_stats">
    <strong style="font-size: large; color:blue">display</strong><br>
    <div style="font-size: medium; color:blue;">26 24</div>
</div>

let fadein = document.getElementById("fade_in_stats");
fadein.style.display="block";

The code below is what I'm actually trying to do, but I found that the core issue has to do with changing style.display in js since the div currently contains the same content that I added to it below.

boldName.style.fontSize = "large";
boldName.textContent = document.getElementById("entername").value;
boldName.style.fontFamily = "Lucida Handwriting, Times New Roman, Cursive";
boldName.style.color = "blue";
boldName.appendChild(document.createElement("br"));
fadein.appendChild(boldName);
let statline = document.createElement("div");
statline.textContent = String(new_ppg) + " ppg, " + String(new_apg)
+ " apg, " + String(new_rpg) + " rpg, " + String(new_spg) + " spg, " + String(new_bpg) + " bpg";
statline.style.fontSize = "medium";
statline.style.color = "blue";
statline.style.fontFamily = "Courier New, Times New Roman, Serif";
statline.appendChild(document.createElement("br"));
fadein.appendChild(statline);
fadein.style.display='block';

Kishan Patel · Accepted Answer · 2021-07-28 18:17:11Z

1

There isn't any issue with the display property. You have used position: relative; in display_future_stats class. This property is just positioning your div outside from display. Remove this property and your code will work.

answered Jul 28, 2021 at 18:17

Kishan Patel

113 bronze badges

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

2 Comments

Ayon Paul Over a year ago

What do you mean “outside from display”? Because the position: relative worked as I wanted to when setting display to block in css. It stops working the minute I try setting it to something other than none in js

Ayon Paul Over a year ago

Well that works if I already have content inside the div. When I try to add content to the div in js and then display it, nothing appears.

Collectives™ on Stack Overflow

Div element doesn't appear when setting display to block in js

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