Showing incorrect display

Question

I'm trying to return the display value after a button is clicked, but it doesn't return the correct value.

My element: <div id="my_div" style="display: none;"></div>

After button click: <div id="my_div" style="display: block;"></div>

Javascript:

(function () {
  $('#button').trigger('click');

  return document.getElementById('my_div').style.display;
})();

Returns:

"none"

Without clicking the button (just executing document.getElementById('my_div').style.display) I get the correct output:

Executing in console:

(function () {
  return document.getElementById('my_div').style.display;
})();

Returns:

"block"

Do you have a button that display that div on the click event? — herodrigues, Feb 14 '19 at 20:31
jQuery’s `.trigger()` is *asynchronous* - it doesn’t wait for the event handlers to execute before returning. This means the next line of code *may* (and in your case does) execute before the event handlers do. Check out [this answer](https://stackoverflow.com/a/13338585/1813169) for a workaround — MTCoster, Feb 14 '19 at 20:33
I do not have click hander it because I'm running on a site that is not mine, but I'm sure that when you click the button the display of none goes to block — Slinidy, Feb 14 '19 at 20:34
The site contains register, login etc.. I think the problem is being what MTCoster said — Slinidy, Feb 14 '19 at 20:39

richardev · Answer 1 · 2019-02-14T20:45:08.743

0

Use $("#my_div).css('display') to return display value.

(function () {
  // On click
  $('#my_div').on('click', function(){
    console.log($(this).css('display'));
  });
})();

/* For testing purpose */
#my_div {
  width:100px;
  height: 100px;
  background: #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="my_div" style="display:block"></div>

edited Feb 14 '19 at 20:45

answered Feb 14 '19 at 20:36

richardev

976
1
10
33

Return: undefined – Slinidy Feb 14 '19 at 20:47
@Slinidy test Snippet above does return `block` as result. Try running snippet and clicking on gray block. For testing purpose I used `console.log` to catch the value - you can change it to `return` if you like. – richardev Feb 14 '19 at 20:49

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

You can do it like this.

HTML:

<div id="my_div" style="display: none;">
</div>

<button id="button"> Click </button>

JS:

const myDiv = document.getElementById("my_div");

$("button").click(function() {
 console.log(myDiv.style.display);
 return myDiv.style.display;
});

Working pen Link

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 14 '19 at 20:37

Paolo

823
6
18

You can check the result on your browser's console. – Paolo Feb 14 '19 at 20:38
Return: undefined – Slinidy Feb 14 '19 at 20:47
1

Can you post your whole code? Maybe your object name is not "myDiv". – Paolo Feb 14 '19 at 20:50

score 0 · Answer 3 · answered Feb 14 '19 at 20:59

0

That's how it worked

$("#my_button").trigger('click');
setTimeout(test, 1000);
function test() { if (document.getElementById('my_div').style.display === 'block')
    alert('test');
}

But I do not know if this is the best option

answered Feb 14 '19 at 20:59

Slinidy

367
1
4
12

Showing incorrect display

3 Answers3