On Click function only working on second click

Question

Have the following code on a Wordpress/Woocommerce build. The issue is the button only works on the second click. Need this to work on the first click, what's wrong with my code?

// Add button to hide Personalisation

add_action('woocommerce_single_product_summary', 'custom_text', 29);

function custom_text() {
    print '<button class="personlisation-button" onclick="myFunction()">Add Personalisation</button>';  
}  

// Script to toggle visibility

<script type="text/javascript">
  function myFunction() {
    var x = document.getElementById("wcj_product_addons");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
</script>

Answer 1

It would be good to add a check for null . You might have no such element on a page.

 function myFunction() { var x = document.getElementById("demo"); if (x != null && x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 <button onclick="myFunction()" > Toggle</button > <div id="demo">Hello world</div>