How to change the image of a button like Javascript?

Question

How to change the image of a button like Javascript?

Asked 6 years ago

Viewed 1,204 times

0

I’m doing a classic old game in HTML, CSS and Javascript, however, I want to know which command I can use to change the image of a javascript button

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 some of these buttons, it will change to a second image (which in case will be this gray background with an X in front

You want it to automatically change to the next image in the list sequence, or you want it to change to a specific photo?

– Gustavo Sampaio

2018/12/12 at 14:35
For a specific photo

– Vitor Corrêa

2018/12/12 at 14:36

3 answers

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by Wictor Chaves • **8,445** points · Answer 1 · 2018-12-12T14:49:10+00:00

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

When you click on the button element it grabs 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 the document.querySelector("button"), because in mine example it will catch all the button of the page, to prevent it take some button not the ones you want, create a class to the buttons.

I put the javascript code at the end of the elements so that the code javascript is 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>

by Sam • **79,597** points · Answer 2 · 2018-12-12T14:50:52+00:00

Create an event onclick for each image of the buttons and change its attribute src 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>

by Gustavo Sampaio • **1,180** points · Answer 3 · 2018-12-12T14:58:05+00:00

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

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

Element <img> unnecessary

In CSS, there is the property background-image, which you can see more about her in this MDN documentation. With it, you can add an image to the element without necessarily needing the tag <img>. And if that property CSS is used, the image exchange approach will be a little 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’ve helped!