Javascript code

Asked

Viewed 45 times

2

Staff I am still climbing in the area of Ti, someone could help me with the following code, it would be simple thing but of utmost importance in the work of my course, follows the code 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>

In this case this is my index.html code. What I wanted was that in the java.js file - when clicking on each colored square (individually) a "text" appeared and when clicking on the action button, delete the text inserted in the colored squares.

javascript

  • The code you put in was CSS, lacked HTML. And it got a little confused what you really want to do could exemplify better?

  • 2

    One of the things you have to do is not to confuse Java with Javascript which are two very different languages. Post the file code java.js.

  • a "text appears" - where this text comes from?

  • Where it goes and where it should appear?

1 answer

1


Here’s an example of how you can do this 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>

Browser other questions tagged javascript

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