Button moves onClick - Unsure if is JS or HTML issue-CodePudding

I have a search button that plays a random sound when pressed. However when the button is pressed it also slightly moves, any ideas why?

Full Example Here

<body>

<h1>Hello Test Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis odit, maiores quo minus hic nisi ipsum ullam architecto aut corporis. Consectetur officia reiciendis nostrum quam laborum cupiditate culpa obcaecati eveniet?</p>

function playRandomSound() {
let sounds = [
    "randomsound1.mp3",
    "randomsound2.mp3",
    "randomsound3.mp3",
       ];

let soundFile = sounds[Math.floor(Math.random() * sounds.length)];
document.getElementById("player").innerHTML = "<embed src=\""   soundFile   "\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

<body>

<h1>Hello Test Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis odit, maiores quo minus hic nisi ipsum ullam architecto aut corporis. Consectetur officia reiciendis nostrum quam laborum cupiditate culpa obcaecati eveniet?</p>




    <div class="input-container">
        <span id='player'></span>
        <button id="searchbutton" class="mainsearchbutton rotate" onclick="playRandomSound();">Search Now</button>
    </div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. A aliquid assumenda adipisci dignissimos, hic quaerat nulla magni ducimus optio quidem, quos totam maxime id, reiciendis libero corrupti iure. Alias, quidem!

CodePudding user response：

You can just move the span to be after the button:

<div class="input-container">
    <button id="searchbutton" class="mainsearchbutton rotate" onclick="playRandomSound();">Search Now</button>
    <span id='player'></span>
</div>

CodePudding user response：

Kindly check the solution below.

Here I added a class clicked to the #player span, and gave it float: left to detach the same from the parent and float above.

So the issue is fixed.

function playRandomSound() {
let sounds = [
    "randomsound1.mp3",
    "randomsound2.mp3",
    "randomsound3.mp3",
       ];

let soundFile = sounds[Math.floor(Math.random() * sounds.length)];
document.getElementById("player").innerHTML = "<embed src=\""   soundFile   "\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
document.getElementById("player").classList.add("clicked");
}

#player.clicked {
  float: left;
}

<div class="input-container">
  <span id='player'></span>
  <button id="searchbutton" class="mainsearchbutton rotate" onclick="playRandomSound();">Search Now</button>
</div>