Home / Questions / 62334
Accepted
simon
Asked: 2020-04-12 12:21:53 +0800 CST 2020-04-12 12:21:53 +0800 CST

以 javaScript 中的按钮为条件

  • 772

您好同事，我有以下代码，其目的取决于您给它的按钮，它向您显示图像和角色的名称，图像向我显示它及其名称，但首先它可以正常工作但在第二个中它对我不起作用，因为我第一个的名称继续出现，并且与它对应的名称也继续出现。

事实是，我正在考虑另一个可以处理此问题的函数，但对我来说似乎很困惑，这会导致粘贴代码？

你怎么看？

我当前的代码：

<!DOCTYPE html>
<html>
<body>
<title>Mario Bros</title>
<script type="text/javascript">
	




 function red(){

 	document.getElementById('myImage').src='indice.jpeg';
     document.getElementById("mario").innerHTML = "Mario Bros";
 }

function verde(){
       document.getElementById('myImage').src='luchi.jpeg';
      document.getElementById("luchi").innerHTML = "Luchi";


}


</script>
<h1>Mario Bros</h1>



<img id="myImage" src="http://www.esucesos.com/wp-content/uploads/2015/09/mario-bros.-1.jpg" style="width:100px">


<p id="mario"></p>
<p id="luchi"></p>
<button onclick="red();">Mario</button>

<button onclick="verde();">Luchi</button>

</body>
</html>

javascript

2 Answers

  1. Best Answer

    一种可能的解决方案：而不是 2 <p>，只使用 1：

    <!DOCTYPE html>
<html>
<body>
<title>Mario Bros</title>
<script type="text/javascript">
function red(){
  document.getElementById('myImage').src='indice.jpeg';
  document.getElementById("texto").innerHTML = "Mario Bros";
 }

function verde(){
       document.getElementById('myImage').src='luchi.jpeg';
      document.getElementById("texto").innerHTML = "Luchi";
}
</script>
<h1>Mario Bros</h1>

<img id="myImage" src="http://www.esucesos.com/wp-content/uploads/2015/09/mario-bros.-1.jpg" style="width:100px">


<p id="texto"></p>

<button onclick="red();">Mario</button>

<button onclick="verde();">Luchi</button>

</body>
</html>

    • 1

  2. 看到 Trauma 的解决方案，我添加了一些我缺少的东西并且非常重要：一个按钮来恢复一切到开始，感谢 Trauma 的贡献我做到了。

    我的代码：

    <!DOCTYPE html>
<html>
<body>
<title>Mario Bros</title>
<script type="text/javascript">
	




 function red(){

 	document.getElementById('myImage').src='indice.jpeg';
    document.getElementById("texto").innerHTML = "Mario Bros -Personaje Principal";
    document.getElementById("creador").innerHTML = "Gilberto Quintero";
}

function verde(){
       document.getElementById('myImage').src='luchi.jpeg';
       document.getElementById("texto").innerHTML = "Luchi -Hermano de Mario Bros";
       document.getElementById("creador").innerHTML = "Miguel romero";


}
function restaurarTodo(){
	document.getElementById('myImage').src='http://www.esucesos.com/wp-content/uploads/2015/09/mario-bros.-1.jpg';

	      document.getElementById("texto").innerHTML = "Personajes del video juego Mario bros";

}




</script>
<h1 id="texto">Personajes del video juego <b>Mario bros</b></h1>



<img id="myImage" src="http://www.esucesos.com/wp-content/uploads/2015/09/mario-bros.-1.jpg" style="width:100px">


<p id="texto"></p>
<button onclick="red();">Mario</button>

<button onclick="verde();">Luchi</button>
<p>Creador:</p>
<p id="creador"></p>
<br><br><br><br>
<button onclick="restaurarTodo();">restaurar Todo</button>

</body>
</html>

    • 1