How to change the image of a button as JavaScript?

Navigation
0

I'm making a classic old game in HTML, CSS and JavaScript, however, I want to know which command I can use to be able to swap the image of a button in javascript

I know it has something to do with document.getElementById () 

<!DOCTYPE html>
<html>
<head>
	<title>TicTacToe</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			background: #eff2ef;
		}

		#principal{
		}

		#principal td tr{
			background: white;
			margin: 20px;
			border: solid;
			border-color: black;
			padding: 30px;
		}

		#principal td tr label{
			background: white;
		}

	</style>
	<script type="text/javascript">
		var fotos = ["images/fundoCinza.jpeg" ," images/fundoX.jpeg " , "images/fundoO.jpeg"];
	</script>
</head>

<body>	
	<div id="tabela" align="center">
		<table id="principal">
			<tr>
				<td>
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>

				<td>					
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>
					
				<td>
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>
			</tr>

			<tr>
				<td>
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>

				<td>					
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>
					
				<td>
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>
			</tr>


			<tr>
				<td>
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>

				<td>					
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>
					
				<td>
					<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
				</td>
			</tr>			
	</div>

	</table>
</body>
</html>

I want when I click on any of these buttons, it changes to a second image (which in this case will be this gray background with an X in the front

    
asked by anonymous 12.12.2018 / 15:24

3 answers

0

Create a onclick event for each button image and change its src attribute when clicked: 

<!DOCTYPE html>
<html>
<head>
	<title>TicTacToe</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			background: #eff2ef;
		}

		#principal{
		}

		#principal td tr{
			background: white;
			margin: 20px;
			border: solid;
			border-color: black;
			padding: 30px;
		}

		#principal td tr label{
			background: white;
		}

	</style>
	<script type="text/javascript">
		var fotos = ["images/fundoCinza.jpeg" ,"https://uniquephoto2.azureedge.net/resources/uniquephoto/images/products/processed/SVG9050.mediumThumb.b.jpg" , "images/fundoO.jpeg"];

      // aguarda o DOM carregar
      document.addEventListener("DOMContentLoaded", function(){
         // seleciona os botões
         var botoes = document.querySelectorAll("#principal button");
         for(var x=0; x<botoes.length; x++){
            botoes[x].onclick = function(){
               // altera o atributo "src" da imagem do botão clicado
               this.firstElementChild.src = fotos[1];
            }
         }
      });
	</script>
</head>

<body>	
	<div id="tabela" align="center">
		<table id="principal">
			<tr>
				<td>
					<button>
          <img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>

				<td>					
					<button><img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>
					
				<td>
					<button><img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>
			</tr>

			<tr>
				<td>
					<button><img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>

				<td>					
					<button><img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>
					
				<td>
					<button><img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>
			</tr>


			<tr>
				<td>
					<button><img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>

				<td>					
					<button><img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>
					
				<td>
					<button><img src="https://static.webshopapp.com/shops/041466/files/134033882/100x100x2/tenetal-background-272x11m-thunder-gray.jpg"width="100" height="100"></button>
				</td>
			</tr>			
	</div>

	</table>
</body>
</html>
    
12.12.2018 / 15:50
0

I made a small example, in which it takes a background and replaces it with the "backgroundX.jpeg", using the url that is in your code.

When you click on the button element it will take your img and arrow the image "images / fundoX.jpeg". 

var elemento = document.querySelector("button");
elemento.onclick = function(){
  this.getElementsByTagName("img")[0].src = "images/fundoX.jpeg";
};
  

I recommend and change document.querySelector("button") , because in my   example it will catch all button of the page, to prevent it from   get some button other than the ones you want, create a class   for the buttons.

     

I put the javascript code at the end of the elements so that the code   javascript to be loaded after the rendered elements. 

<!DOCTYPE html>
<html>
   <head>
      <title>TicTacToe</title>
      <meta charset="utf-8">
      <style type="text/css">
         body{
          background: #eff2ef;
         }
         #principal{
         
         }
         #principal td tr{
           background: white;
           margin: 20px;
           border: solid;
           border-color: black;
           padding: 30px;
         }
         #principal td tr label{
          background: white;
         }
      </style>
   </head>
   <body>
      <div id="tabela" align="center">
         <table id="principal">
            <tr>
               <td>
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
               <td>					
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
               <td>
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
            </tr>
            <tr>
               <td>
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
               <td>					
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
               <td>
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
            </tr>
            <tr>
               <td>
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
               <td>					
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
               <td>
                  <button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
               </td>
            </tr>
         </table>
      </div>
      <script type="text/javascript">
           var fotos = ["images/fundoCinza.jpeg" ,"images/fundoX.jpeg" , "images/fundoO.jpeg"];
           var elemento = document.querySelector("button");
           elemento.onclick = function(){
             this.getElementsByTagName("img")[0].src = "images/fundoX.jpeg";
           };
      </script>
   </body>
</html>
    
12.12.2018 / 15:49
0

The getElementById method could actually be used. But as the name says, it will only get an object through the id of the object, that is, you would have to add an id for each button, or image - which is not necessary, according to the explanation I put below. However, you can add the onclick attribute to the images in this way: 

<script type="text/javascript">
    var fotos = ["images/fundoCinza.jpeg" ," images/fundoX.jpeg " , "images/fundoO.jpeg"];
</script>
<button><img src="images/fundoCinza.jpg" width="100" height="100" onclick="this.src = fotos[1]"></button>

% unnecessary% element

In CSS, there is the <img> property, which you can see more about it in MDN documentation . With it, you can add an image to the element, without necessarily needing the background-image tag. And if this property of the CSS is used, the image exchange approach will be a bit different: 

<style type="text/css">
    button {
      width: 100px;
      height: 100px;
      background-image: url("images/fundoCinza.jpeg");
    }

</style>
<script type="text/javascript">
  var fotos = ["images/fundoCinza.jpeg" ," images/fundoX.jpeg " , "images/fundoO.jpeg"];
</script>
<button onclick="this.style.backgroundImage = 'url('${fotos[1]}')'"></button>

I hope I have helped!

    
12.12.2018 / 15:58
Formula SE + PROCV ending in #VALUE! RMySQL - My querys return a list