Conditional on buttons in javaScript

Question

Conditional on buttons in javaScript

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Hello classmates I have the following code which the purpose is depends on which button you show 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 does not work it works because the name of the first one continues to follow me and also the one that corresponds to it.

The truth was I was thinking about another function in which I would handle this problem but it is something tangled which would probocaria pasta 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

asked by simon 11.04.2017 в 22:21

source

2 answers

1

Seeing the Trauma solution I added something that I was missing and something very important a button to restore everything at the beginning and thanks to the contribution of Trauma 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>

answered by 12.04.2017 в 00:11

Problem with strcat Filter ages django

score 1 · Accepted Answer

One possible solution: instead of 2 <p> , use only 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>