Tell me what I’m doing wrong. I want to show an element that is hidden.

& lt; div class = "admincontent3" id = "admincontent3" & gt;
 Hello
& lt; / div & gt;

JavaScript:

function showAddedToBasket () {
 var added_item_button = document.getElementById ('admincontent3');
 var displaySetting = added_item_button.style.display;
 if (displaySetting == 'none') {
  added_item_button.style.display = 'block';
 }
}

Twig:

{% if added_to_basket == true%}
  & lt; script type = "text / javascript" & gt;
    showAddedToBasket ();
  & lt; / script & gt;
{% endif%}

CSS:

. admincontent3 {
  display: none;
  color: white;
  font-size: 2vw;
  margin-top: -50vw;
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1.5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 1.5s;
}

Answer 1, authority 100%

You are checking styles specific to a specific element (style property) while display was set in css (in a class).

You can get the actual styles, taking into account all the cascading style sheets (CSS), using the getComputedStyle

function action () {
 var added_item_button = document.getElementById ('admincontent3');
 var actualDisplay = getComputedStyle (added_item_button) .display;
 if (actualDisplay == 'none') {
  added_item_button.style.display = 'block';
 } else {
  added_item_button.innerText + = '.';
 }
} 

. admincontent3 {
  display: none;
} 

& lt; div class = "admincontent3" id = "admincontent3" & gt;
  Hello
 & lt; / div & gt;
 & lt; hr & gt;
 & lt; button onclick = action () & gt; Show & lt; / button & gt;