Question 230146 in Html Question posted in
Some basic documentation can be found here.

Html – Why are first two buttons jumping when i push third?

function clickListener() {
   loader.style.display = 'inline-block';
   title.style.display = 'none';
}
button {
    height: 3rem;
    padding: 0 1rem;
    margin-right: 20px;
}

#loader {
    display: none;
    width: 12px;
    height: 12px;
    margin: 15px auto;
    position: relative;
}
<div class="buttons">
  <button>1</button>
  <button>2</button>
  <button onclick="clickListener()">
     <span id="title">Push</span>
     <span id="loader"></span>
  </button>
</div>

Browser: chrome

Tags:

3

Answers


  1. 0

    The structure of your HTML code is the problem here. You have a mismatched closing div tag for the third button, and the Push should be inside the third button element.

    The loader and title elements should be defined somewhere in your HTML, possibly as references to existing elements using JavaScript. Its missing in your code.

    Here is your updated code:

    const loader = document.getElementById('loader');
    const title = document.getElementById('title');

    function clickListener() {
      loader.style.display = 'inline';
      title.style.display = 'none';
    }
    button {
      height: 3rem;
      padding: 0 1rem;
      margin-right: 20px;
    }

    #loader {
      display: none;
    }
      <div class="buttons">
    <button>1</button>
    <button>2</button>
    <button onclick="clickListener()">
      <span id="title">Push</span>
      <span id="loader"></span>
    </button>
  </div>
    Login or Signup to reply.
  2. 0

    When you click the button, the listener clickListener() is called. Once it’s called, clickListener changes the CSS properties of the button’s children (".title" and ".loader").

    This has nothing to do with JavaScript. This is a CSS problem.

    When you change the display type of ".loader", CSS is the position shifting to the left because the button overflows out of it’s parent container, when inline is similar to block.

    You can achieve the same effect to the button via using inline-block instead, or just setting the textContent to "" (nothing).

    You also had a type in your code, you ended <span> with a </div> instead.

    Here is an example of using inline-block instead of inline:

    function clickListener() {
   loader.style.display = 'inline-block';
   title.style.display = 'none';
}
    button {
    height: 3rem;
    padding: 0 1rem;
    margin-right: 20px;
}

#loader {
    display: none;
}
    <div class="buttons">
  <button>1</button>
  <button>2</button>
  <button onclick="clickListener()">
     <span id="title">Push</span>
     <span id="loader"></span>
  </button>
</div>
    Login or Signup to reply.
  3. 0

    Here’s what happens in Firefox.
    enter image description here

    It’s because you are hiding the text and showing an empty element. The other reason is because you have <span id="title">Push</div> – it begins with <span and closes with </div> so the browser is trying to correct this for you and it’s not working correctly.

    Also, you have never defined the variables title and loader – honestly I’m amazed this code does anything at all, I’ve never seen this done this way.

    Here’s a much better and cleaner way of doing this. The click listener should be added in JS. If you do this and use classes instead of ID’s then you can make this work easily for as many buttons as you need it to.

    [...document.querySelectorAll('.load-on-click')].forEach(function(loadBtn) {
  loadBtn.addEventListener('click', function(){
    const btnTitle = loadBtn.querySelector('.btn-title');
    const btnLoader = loadBtn.querySelector('.btn-loader');

    btnLoader.style.display = 'inline';
    btnTitle.style.display = 'none';
  });
});
    button {
    height: 3rem;
    padding: 0 1rem;
    margin-right: 20px;
}

.btn-loader {
    display: none;
}
    <div class="buttons">
  <button>1</button>
  <button>2</button>
  <button class="load-on-click">
     <span class="btn-title">Push 3</span>
     <span class="btn-loader">loading 3...</span>
  </button>
</div>

<br><br>

<div class="buttons">
  <button>4</button>
  <button>5</button>
  <button class="load-on-click">
     <span class="btn-title">Push 6</span>
     <span class="btn-loader">loading 6...</span>
  </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search