Question

我遇到了问题：我正在更改按钮的文本，具体取决于上一页的点击，所以我尝试使用JavaScript来更新innerHTML新页面中按钮的onload()新页面正文的事件。但是，它会在用户更改其文本时显示。我只是希望它直接显示而不会让用户注意到变化。有没有人得到这个答案？

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>

Answer 1

启动隐藏display: none的按钮，仅在更改值后显示。或者，如果您正在寻找更顺畅的过渡，您可以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>

Answer 2

使函数在定义时立即调用：

(function () {
  document.getElementById("GymName").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>
<button class="btn btn-danger" id="GymName">Omar</button>
<script>
(function () { document.getElementById("GymName").innerHTML = 'hesham'; }());
</script>

<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>

出现在新的html页面

2 个答案: