Button Pressed Moves Input and Button down the page, Buttons Options

[HelloWorld_]

New to HTML and CSS, but have setup a very simple Input/Button test page.

When you press the button a random audio is played.

However also when you press the button, both the input and button field move down the page slightly. Any ideas what I could be doing wrong here?


<section>
<!----BTN Start.-->
<!----For some reason need to keep span id player above the button or sounds wont play.-->
<span id='player'></span>

<input type="text" id="searchinput" spellcheck="true" class="mainsearch" autofocus>
</section>

<section>
<button id="searchbutton" class="mainsearchbutton rotate" onclick="playRandomSound();">Search Now</button>
</section>
<!----BTN END.-->



.mainsearch {
display: block;
margin-left: auto;
margin-right: auto;

width: 25rem;
position: relative;
height: 2.38rem;
border-radius: 25rem;
background-color: #05F4B7;
color: #12151F;
font-family: roboto;
font-size: 20px;
font-weight: 500;
border: 0px;
padding-left: 2rem;
padding-right: 2rem;
margin-bottom: 3rem;
outline: none;
}

.mainsearchbutton {
display: block;
margin-left: auto;
margin-right: auto;

width: 29rem;
position: relative;
height: 2.5rem;
border-radius: 25rem;
background-color: #05F4B7;
color: #12151F;
font-family: roboto;
font-size: 20px;
font-weight: bolder;
border: 0px;

transform: rotate(-5deg);
transition-duration: 0.5s;
}


.mainsearchbutton:hover {
background-color: #937aff;
color: white;
transition-duration: 0.5s;

}

[pandy]

Nothing moves when I click the button with what you gave us. What do you have more than that? Maybe the script does something more than play a sound file?

[HelloWorld_]

Nothing moves when I click the button with what you gave us. What do you have more than that? Maybe the script does something more than play a sound file?

Found the culprit.

document.getElementById('searchbutton').onclick = function () {
document.getElementById('searchinput').focus();
};

Just not sure why it moves the section down.

[pandy]

Well, focus() will focus the search field and place the cursor there. The page will be scrolled if needed.

[HelloWorld_]

Well, focus() will focus the search field and place the cursor there. The page will be scrolled if needed.

Hi Pandy, I removed this code and still get the error.

document.getElementById('searchbutton').onclick = function () {
document.getElementById('searchinput').focus();
};

Do you see anything wrong in this JS below that could be the cause for moving the input/search button down the page. When I turn it off the error is gone.

function playRandomSound() {
var sounds = [
"pur-once-btn-click (1).mp3",
"famous-quotes (2).mp3"
];

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


}

This post has been edited by HelloWorld_: Jul 17 2021, 09:23 AM

[pandy]

Hi Pandy, I removed this code and still get the error.

document.getElementById('searchbutton').onclick = function () {
document.getElementById('searchinput').focus();
};

But you said that was the culprit?

Do you see anything wrong in this JS below that could be the cause for moving the input/search button down the page. When I turn it off the error is gone.

No. You use attributes that belong to the old non standard EMBED and I don't know if browsers support them anymore, but if it works it works. EMBED itself is standard now with HTML5, but not the old attributes. But I don't see how that could make anything jump.