Javascript - display: block/none

Question

Javascript - display: block/none

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

<div class="admincontent3" id="admincontent3">
  Hello
</div>

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 %}
    <script type="text/javascript">
        showAddedToBasket();
    </script>
{% 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;
}

2

html javascript css twig display

Author: Valek Potapov, 2017-11-28

Source

1 answers

score 5 · Accepted Answer

You check the styles that are specific to a particular element (the style property), while display was set in css(in the class).

To get the current styles, taking into account all cascading style sheets(CSS), use the function 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;
}

<div class="admincontent3" id="admincontent3">
    Hello
 </div>
 <hr>
 <button onclick=action()>Show</button>