Toastr: toast-top-center doesn't get applied at the first click of the button

When I click the button, the message is displayed in the top-right. Only after one or two attempts, it is positioned in the top-center. But when submitting a form it should come in the top-center in the first click itself. Could anyone please tell me why it happens this way and how it can be corrected? I have included the code snippet below.

<!DOCTYPE html>
<html>
<head>
<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet"
 href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body>

<p>toast-top-center</p>

<button onclick="myFunction()">Click Here</button>

<p id="demo"></p>

<script>
function myFunction() {
   Command: toastr["error"]
           ("I'm not in the top-center!")

         toastr.options = {
          "closeButton" : false,
          "debug" : false,
          "newestOnTop" : false,
          "progressBar" : false,
          "positionClass" : "toast-top-center",
          "preventDuplicates" : false,
          "onclick" : null,
          "showDuration" : "300",
          "hideDuration" : "1000",
          "timeOut" : "5000",
          "extendedTimeOut" : "1000",
          "showEasing" : "swing",
          "hideEasing" : "linear",
          "showMethod" : "fadeIn",
          "hideMethod" : "fadeOut"
         }
}
</script>

</body>
</html>

Solution

I think the error is because you run the toast before reading the options.

That's why the first toast is on top right.

Run the toast at the end of your function and it will work.

<!DOCTYPE html>
<html>
<head>
<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet"
 href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body>

<p>toast-top-center</p>

<button onclick="myFunction()">Click Here</button>

<p id="demo"></p>

<script>
function myFunction() {

         toastr.options = {
          "positionClass" : "toast-top-center",
          "closeButton" : false,
          "debug" : false,
          "newestOnTop" : false,
          "progressBar" : false,
          "preventDuplicates" : false,
          "onclick" : null,
          "showDuration" : "300",
          "hideDuration" : "1000",
          "timeOut" : "5000",
          "extendedTimeOut" : "1000",
          "showEasing" : "swing",
          "hideEasing" : "linear",
          "showMethod" : "fadeIn",
          "hideMethod" : "fadeOut"
         }
   Command: toastr["success"]
           ("I'm in the top-center!")

}
</script>

</body>
</html>