0

Estou fazendo uma clássico jogo da velha em HTML,CSS E JavaScript, porém, quero saber qual comando eu posso usar para poder trocar a imagem de um botão em javascript

Sei que tem alguma coisa a ver com 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>

Quero que quando eu clique sobre algum desses botões, ele mude pra uma segunda imagem(que no caso vai ser esse fundo cinza com um X na frente

2
  • Você quer que ele automaticamente mude para a próxima imagem da sequência da lista, ou você quer que ele mude para uma foto específica? Commented 12/12/2018 às 14:35
  • Para uma foto específica Commented 12/12/2018 às 14:36

3 Respostas 3

1

Crie um evento onclick para cada imagem dos botões e altere seu atributo src ao ser clicado:

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

1

Fiz um pequeno exemplo, no qual ele pega um fundo e o substitui para o "fundoX.jpeg", utilizando a url que esta no seu código.

Ao clicar no elemento button ele pega o seu img e seta a imagem "images/fundoX.jpeg".

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

Recomendo e altere o document.querySelector("button"), porque no meu exemplo ele vai pegar todos os button da página, para evitar que ele pegue algum button que não seja os que você deseje, crie uma classe para os botões.

Coloquei o código javascript no final dos elementos para que o código javascript seja carregado depois dos elementos renderizados.

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

1

O método getElementById realmente poderia ser usado. Mas, como o próprio nome diz, ele só irá pegar um objeto através do id do objeto, ou seja, você teria que adicionar um id para cada botão, ou imagem — que aliás não é necessária, conforme a explicação que coloquei abaixo. No entanto, você pode adicionar o atributo onclick nas imagens dessa forma:

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

Elemento <img> desnecessário

No CSS, existe a propriedade background-image, a qual você pode ver mais sobre ela nessa documentação do MDN. Com ela, você pode adicionar uma imagem ao elemento, sem precisar obrigatoriamente da tag <img>. E se essa propriedade do CSS for utilizada, a abordagem de troca da imagem será um pouco diferente:

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

Espero ter ajudado!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .