2

Pessoal ainda estou galgando na area de Ti, alguém poderia me ajudar com o seguinte código, seria coisa simples mas de extrema importância no trabalho do meu curso, segue o código Html

<html>
<head>
<title>Projeto</title>
<style>
  body {text-align: center; }
  .retangulo {margin: auto; border: 2px solid black;}

  #ret0 {width: 400px;background-color: gray;}

  #ret1 {background-color: red;}
  #ret2 {background-color: yellow;}
  #ret3 {background-color: green;}

  #ret0 div {
margin: 20px auto;
width: 64px;
height: 64px;
  }

</style>
<script type="text/javascript" src="java.js"></script>
</head>
<body>

<div id="ret0" class="retangulo">
<div id="ret1" class="retangulo"></div>
<div id="ret2" class="retangulo"></div>
<div id="ret3" class="retangulo"></div>
<p id="texto">O que o JavaScript Pode fazer.</p>
<input type="button" onclick="acao()"value="Ação"/>
</div>
<p><em>Maxwell Gomes de Arruda</em></p>
</body>
</html>

Nesse caso esse é o meu código index.html. O que eu queria era que no arquivo java.js - ao clicar em cada quadrado colorido(individualmente) aparecesse um "texto" e ao clicar no botão ação, apagasse os texto inseridos nos quadrados coloridos.

4
  • O código que você colocou foi o CSS, faltou o HTML. E ficou um pouco confuso o que realmente você quer fazer poderia exemplificar melhor? 23/08/2017 às 18:33
  • 2
    Uma das coisas que você tem que fazer é não confundir Java com JavaScript que são duas linguagens bem diferentes. Poste o código do arquivo java.js. 23/08/2017 às 18:36
  • aparecesse um "texto" - de onde vem esse texto?
    – Sergio
    23/08/2017 às 18:38
  • Pra onde vai e onde deveria aparecer esse texto? 23/08/2017 às 19:33

1 Resposta 1

1

Segue um exemplo de como pode fazer este JavaScript:

var divs = document.querySelectorAll('.texto')

for(var i=0; i<divs.length; i++) {
  divs[i].addEventListener('click', function() {
    this.innerHTML = 'TEXTO';
  });
};

function acao() {
  for(var i=0; i<divs.length; i++) {
    divs[i].innerHTML = '';
  };
}
body {text-align: center; }
  .retangulo {margin: auto; border: 2px solid black;}

  #ret0 {width: 400px;background-color: gray;}

  #ret1 {background-color: red;}
  #ret2 {background-color: yellow;}
  #ret3 {background-color: green;}

  #ret0 div {
margin: 20px auto;
width: 64px;
height: 64px;
  }
<div id="ret0" class="retangulo">
  <div id="ret1" class="retangulo texto"></div>
  <div id="ret2" class="retangulo texto"></div>
  <div id="ret3" class="retangulo texto"></div>
  <p id="texto">O que o JavaScript Pode fazer.</p>
  <input type="button" onclick="acao()"value="Ação"/>
</div>
<p><em>Maxwell Gomes de Arruda</em></p>

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 .