CODEWITHSUNDEEP
javascripthtmlcss
Ayon Paul
Ayon Paul

Reputation: 31

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

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';

Upvotes: 3

Views: 667

Answers (1)

Kishan Patel
Kishan Patel

Reputation: 11

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.

Upvotes: 1

Related Questions