document.getElementById().style.display = "block" doesnt work in same function as document.getElementById().innerText

I have a simple form that calls a function ‘activate_loading’ onsubmit. ‘activate_loading’ contains two lines of code to display a loading spinner and change text of submit button to ‘Please wait’:

        document.getElementById("loader_mini").style.display = "block";

changes the display of the loading spinner from display:none to display: block.

        document.getElementById("submitBtn").innerText = "Please Wait...";

changes the innerText of the button to ‘Please Wait’ instead of ‘Submit’

Each line will works fine on it’s own but when put together, the display of the loading spinner does not change from display:none to display: block. It seems that line

        document.getElementById("submitBtn").innerText = "Please Wait...";


        document.getElementById("loader_mini").style.display = "block";

not to work.

  1. I’ve tried switching the lines around which results in the same
  2. I tried .style.visibility= "visible"; instead of display: block->
    same result.
  3. I also noticed that is taken out of the
    button element. The code works fine.
  4. I tried switching browsers but it’s the same result again (tried on chrome & firefox)

Does anyone have any ideas what the issue is? I’d really appreciate any help on this at all. The code seems pretty straight forward but i cant seem to see what’s causing the issue.

    function activate_loading() {

            document.getElementById("loader_mini").style.display = "block"; 
            document.getElementById("submitBtn").innerText = "Please Wait...";
        width: 20px;
        height: 20px;
        border: 2px solid blue;
        border-top: 2px solid white;
        border-left: 1px solid white;
        border-bottom: 0px solid white;
        border-radius: 50%;
        -webkit-animation: spin 1.2s linear infinite;
        animation: spin 1.2s linear infinite;
        display: none;
      @-webkit-keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
        100% {
          -webkit-transform: rotate(360deg);
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        100% {
          transform: rotate(360deg);
<form id="form" method="post" class="hide_<?=$sent_status_show?>"
         <label for="email">Email Address:</label>
         <input type="email" name="email"/>
         <label for="subject">Email Subject:</label>
         <textarea name="subject"></textarea>
         <button id="submitBtn" class="submitBtn" type="submit">
            <div id="loader_mini">

31 thoughts on “document.getElementById().style.display = "block" doesnt work in same function as document.getElementById().innerText”

  1. 865929 627153I was searching at some of your articles on this internet site and I believe this internet site is genuinely instructive! Keep on posting . 336754


Leave a Comment