Javascript hide a div and show another not working

Question

I have a javascript with an alert:

alert('Transaction successful, ' + orderData.payer.name.given_name);
document.querySelector("#grandiv").style.display = 'none';
document.querySelector("#minidiv").style.display = 'block';

<div id="grandiv">
    <!-- code -->
</div>

<div style="display:none" id="minidiv">
    <!-- code -->
</div>

#minidiv is hidden by default. I want #grandiv to be hidden and #minidiv displayed after the alert. But all I get after the alert is #grandiv being hidden and #minidiv not being displayed at all. Any ideas?

Answer 1

Your code is fine but it will not work if orderData.payer.name.given_name is undefined or if object orderData not exists or key payer does not exists or key name does not exists in payer object or given_name does not exists in the name object.

Open your developers tool in chrome and reload the page or call the funtion or use onload and run script.