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

Conditional on buttons in javaScript

  • 772

Hello colleagues, I have the following code, the purpose of which depends on which button you give it, it shows you an image and the name of the character, the image shows it to me and its name, but in the first it works correctly but in the second it doesn't work for me because I The name of the first one continues to appear and also the one that corresponds to it.

The truth is that I was thinking of another function that would handle this problem, but it seems confusing to me, which would cause a paste code?

What do you think?

My Current Code:

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

    One possible solution: instead of 2 <p>, use just 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. Seeing Trauma's solution, I added something that I was missing and something very important: a button to restore everything to the beginning and thanks to Trauma's contribution I did it.

    My code:

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