Javascript Um click na imagem e mudar o que esta escrito do lado em uma tabela

Jade Bortot · 28 de outubro de 2018

Olá, sou iniciante na área da programação web e preciso de ajuda.

Estou fazendo um site e uma da páginas, coloquei uma tabela com duas colunas, na coluna1, eu fiz outra tabela para que eu possa colocar fotos de usuários do site, e na outra coluna, coluna2, vou escrever alguns dados sobre eles. Gostaria de que quando clicassem em uma dessas fotos, o que esta escrito do lado mudasse de acordo com cada usuário. Pensei um usar o if dentro do script, e no html fazer links internos, para colocar o nome do link interno na condição do if. Inicialmente não esta dando certo (acho que pelo fato do não estar usando o script em tudo). Gostaria de saber se o que eu penso vai ser possível, como posso fazer e se a forma da qual estou pensando está certa.
Obrigada

washalbano · 28 de outubro de 2018

Olá!
O que você pensa vai ser possível sim.
Você pode fazer com html, css e javascript
Use tabelas apenas para dados tabulares.
Existem outros elementos html que você pode usar para resolver o que queres.
A forma que você está pensando provavelmente dá certo.
Se puder nos mostrar o que já fez(pode ser um screenshot), de repente, podemos compreender e orientar melhor e com mais precisão.
Você tá escrevendo css e js vanilla?

Jade Bortot · 28 de outubro de 2018

Olá, boa noite.

Estou escrevendo em css mesmo.

Este é uma parte do código da pagina que citei

<div id="parceiros">Parceiros</div>  
	<table width="95%" border="0" > 
	    		<tr>
	    			<td style="padding:10px; margin:10px;" width="31%">
	   					<button onclick="#teste"><img src="IMAGENS/boy.png" /></button><br> Nome <p>
	    				<img src="IMAGENS/boy.png" /><br> Nome <p/>
	    				<img src="IMAGENS/boy.png" /><br> Nome <p>
						<img src="IMAGENS/boy.png" /><br> Nome <p/>
					</td>
					<td style="padding:10px; margin:10px;" width="69%">
						<img src="IMAGENS/boy.png" /><br> Nome <p>
						<img src="IMAGENS/boy.png" /><br> Nome <p/>
						<img src="IMAGENS/boy.png" /><br> Nome <p>
						<img src="IMAGENS/boy.png" /><br> Nome <p/>
					
					<td style="padding:10px; margin:10px;" width="31%">
						
						<script>
							if (onclick == "#teste"){
							Sucesso!
							}					
						
						</script>
					
					
						Área: <br />
						aaaaaaaaaaaaaaa <br />
									<br />
						Contato:<br />
						e-mail: [email protected]<br />
						Facebook: aaaaaa<br />
						Twitter: aaaaaaaaa<br />
						Site: aaaaa.com <br />
								<br />
						Projetos:<br />
						aaaaaaaaaaaaaa<br />
								<br />
						Links:<br />
						aaaaaaaaaa<br />
								<br />
					</td>
			
			
	</table>

A imagem de como está a página

Estou fazendo a formatação em css em outro arquivo, mas dessa parte não modifiquei nada.
Como pode ver, eu tentei fazer um teste com o script (nunca tinha usado antes), creio que não funcionou porque o que coloquei dentro da condição do if não esta em script também (nisso fui bem lerda hahaha).
Obrigada pela ajuda.

Matheus Evandro Rech · 29 de outubro de 2018

Bom vamos la o seu onclick esta errado

Crie uma function para executa o onclick e não use o # para nomes de variáveis ou outras coisa pois o # é usado para comentários

O <script> use no final da teg <body> ou se for externo na teg <head>

para alterar algum testo com JS com a teg <a> adicione uma id no meio dela digite o conteúdo e feche a teg no JS use o o getElementById("id").innerHTML = "o texto que quer que apareça";

eu arrumei o seu código e o HTML ficou assim:

	<div id="parceiros">Parceiros</div>  
    	<table width="95%" border="0" > 
	    	<tr>
	    		<td style="padding:10px; margin:10px;" width="31%">
                	<img src="IMAGENS/boy.png" onclick="usuario1()" />
            		<br> Nome <p>
	    			<img src="IMAGENS/boy.png" onclick="usuario2()" />
            		<br> Nome </p>
	    			<img src="IMAGENS/boy.png" onclick="usuario3()" />
            		<br> Nome <p>
					<img src="IMAGENS/boy.png" onclick="usuario4()" />
            		<br> Nome </p>
				</td>
				<td style="padding:10px; margin:10px;" width="69%">
					<img src="IMAGENS/boy.png" onclick="usuario5()" />
            		<br> Nome <p>
					<img src="IMAGENS/boy.png" onclick="usuario6()" />
           			 <br> Nome <p/>
					<img src="IMAGENS/boy.png" onclick="usuario7()" />
            		<br> Nome <p>
					<img src="IMAGENS/boy.png" onclick="usuario8()" />
            		<br> Nome <p/>
                </td>
					<td style="padding:10px; margin:10px;" width="31%">
						Área: <br>
						<a id="area"></a>
            			<br>
						<br>
						Contato:<br>
						e-mail:<a id="email"></a><br>
						Facebook: <a id="face"></a><br>
						Twitter: <a id="twitter"></a><br>
						Site: <a id="site"></a><br>
						<br>
						Projetos:<br>
						<a id="projetos"></a><br>
						<br>
						Links:<br>
						<a id="links"></a><br>
						<br>
					</td>
			</table>
    </div>

você não precisa criar uma tag <button> e colocar a imagem dentro é só colocar o onClick dentro da tag <img>

coloquei 8 usuários para diferenciar de cada imagem

no JS ficou assim:

    <script>
      function usuario1(){
        document.getElementById("area").innerHTML = "usuario1";
        document.getElementById("email").innerHTML = "usuario1";
        document.getElementById("face").innerHTML = "usuario1";
        document.getElementById("twitter").innerHTML = "usuario1";
        document.getElementById("site").innerHTML = "usuario1";
        document.getElementById("projetos").innerHTML = "usuario1";
        document.getElementById("links").innerHTML = "usuario1";
      } 

      function usuario2(){
        document.getElementById("area").innerHTML = "usuario2";
        document.getElementById("email").innerHTML = "usuario2";
        document.getElementById("face").innerHTML = "usuario2";
        document.getElementById("twitter").innerHTML = "usuario2";
        document.getElementById("site").innerHTML = "usuario2";
        document.getElementById("projetos").innerHTML = "usuario2";
        document.getElementById("links").innerHTML = "usuario2";
      } 

      function usuario3(){
        document.getElementById("area").innerHTML = "usuario3";
        document.getElementById("email").innerHTML = "usuario3";
        document.getElementById("face").innerHTML = "usuario3";
        document.getElementById("twitter").innerHTML = "usuario3";
        document.getElementById("site").innerHTML = "usuario3";
        document.getElementById("projetos").innerHTML = "usuario3";
        document.getElementById("links").innerHTML = "usuario3";
      } 

      function usuario4(){
        document.getElementById("area").innerHTML = "usuario4";
        document.getElementById("email").innerHTML = "usuario4";
        document.getElementById("face").innerHTML = "usuario4";
        document.getElementById("twitter").innerHTML = "usuario4";
        document.getElementById("site").innerHTML = "usuario4";
        document.getElementById("projetos").innerHTML = "usuario4";
        document.getElementById("links").innerHTML = "usuario4";
      } 

      function usuario5(){
        document.getElementById("area").innerHTML = "usuario5";
        document.getElementById("email").innerHTML = "usuario5";
        document.getElementById("face").innerHTML = "usuario5";
        document.getElementById("twitter").innerHTML = "usuario5";
        document.getElementById("site").innerHTML = "usuario5";
        document.getElementById("projetos").innerHTML = "usuario5";
        document.getElementById("links").innerHTML = "usuario5";
      } 

      function usuario6(){
        document.getElementById("area").innerHTML = "usuario6";
        document.getElementById("email").innerHTML = "usuario6";
        document.getElementById("face").innerHTML = "usuario6";
        document.getElementById("twitter").innerHTML = "usuario6";
        document.getElementById("site").innerHTML = "usuario6";
        document.getElementById("projetos").innerHTML = "usuario6";
        document.getElementById("links").innerHTML = "usuario6";
      } 

      function usuario7(){
        document.getElementById("area").innerHTML = "usuario7";
        document.getElementById("email").innerHTML = "usuario7";
        document.getElementById("face").innerHTML = "usuario7";
        document.getElementById("twitter").innerHTML = "usuario7";
        document.getElementById("site").innerHTML = "usuario7";
        document.getElementById("projetos").innerHTML = "usuario7";
        document.getElementById("links").innerHTML = "usuario7";
      } 

      function usuario8(){
        document.getElementById("area").innerHTML = "usuario8";
        document.getElementById("email").innerHTML = "usuario8";
        document.getElementById("face").innerHTML = "usuario8";
        document.getElementById("twitter").innerHTML = "usuario8";
        document.getElementById("site").innerHTML = "usuario8";
        document.getElementById("projetos").innerHTML = "usuario8";
        document.getElementById("links").innerHTML = "usuario8";
      }
    </script>

ficou um código meio longo porque esses usuário são internos(somente no código) agora se você criar um banco de dados esse código terá que ser alterado

o elemento function como o nome ja diz é uma função e funções na programação são blocos de código executáveis muitas vezes no WEB com o onClick mais a outras formas

Espero ter ajudado