I have a problem: I am changing the text of a button depending on a click from the previous page, so I tried using JavaScript to update the innerHTML of the button in the new page using the onload() event for the body of the new page. But, it appears for the user when it changes its text. I just want it to appear directly without the change being noticeable to the user. Has anyone got the answer for this?
function myFunction(){
var x=document.getElementById("GymName");
x.innerHTML="hesham";
}
<!DOCTYPE html>
<html>
<head>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body onload="myFunction()" >
<button class="btn btn-danger" id="GymName">Omar</button>
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/login.js"></script>
</body>
</html>
Start the button hidden with display: none, and only show it after the value is changed. Or, if you're looking for a smoother transition you could fade it in with jQuery.
function myFunction(){
var x = document.getElementById("GymName");
x.innerHTML = "hesham";
x.style.display = "inline";
}
#GymName {
display: none;
}
<body onload="myFunction()" >
<button class="btn btn-danger" id="GymName">Omar</button>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With