Click event does not work

Asked

Viewed 93 times

1

Good evening guys. I’m a beginner in Html, CSS and Java Script. That is why I am studying, but today I have stumbled upon a mistake that I am unable to find a solution. I have a responsive grid with images and put an event where I click and Javascript returns me with a window, but it is not working in any way. I made a code like that once and it worked properly, but this time it didn’t.

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" /></meta>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css">
    body {
       margin: 0;
       padding: 0;
       background: DarkSlateGray;
       font: 10px/13px 'Lucida Sans',sans-serif;
    }
    .box {
       float: left;
       position: relative;
       padding-bottom: 20%;
    }
    .boxInner {
       position: absolute;
       left: 2px;
       right: 2px;
       top: 2px;
       bottom: 2px;
       overflow: hidden;

    }
    .boxInner img {
       width: 100%;
       height:100%;
    }
	.imagem-mascara {
  	 width:100%;
  	 height:100%;
  	 position:absolute;
   	 top:0;
  	 background:url(https://uploaddeimagens.com.br/images/000/842/886/full/SombraPrincipal.png) 0 0 no-repeat;
   background-size: 100% 100%;
}
    .titleBox {
       position: absolute;
       height:30px;
       bottom: 0;
       left: 0;
       right: 0;
       margin-bottom: 4px;
       color: #FFF;
       text-align: center;
       font: 13px arial, sans-serif;
       overflow: hidden;
    }

    @media only screen and (max-width : 480px) {
       .box {
          width: 33.3%;
          padding-bottom: 45%;
       }
    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
       .box {
          width: 33%;
          padding-bottom: 50%;
       }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
       .box {
          width: 25%;
          padding-bottom: 33.3%;
       }
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
       .box {
          width: 25%;
          padding-bottom: 33%;
       }
    }
  </style>

</head>
<body class="no-touch">

  <div class="wrap">

    <div class="box">
      <div class="boxInner">
        <img src="https://s1.vagalume.com/fernanda-brum/images/profile-bigw314.jpg" />
        <div class="imagem-mascara" id="Teste" onclick="Evento(this)"></div><div class="titleBox">Butterfly</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">An old greenhouse</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">Purple wildflowers</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">A birdfeeder</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">Crocus close-up</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">The garden shop</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">Spring daffodils</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">Iris along the path</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">The garden blueprint</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">The patio</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">Bumble bee collecting nectar</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
        <div class="imagem-mascara"></div><div class="titleBox">Winding garden path</div>
      </div>
    </div>

  </div>

<script>
function myFunction() {
    alert(evento.id);
}
</script>

</body>
</html>

javascript html

2 answers

1

You need to assign the right function to the eventHandler: In just one of the div’s you put onclick="Evento(this)" when you should have put onclick="myFunction(this)"

and you need to put in the other div’s also this call.

  • Not to mention the function Evento nor is it declared.

1


You solve the problem by changing the code of your Javascript 

function myFunction() {
    alert(evento.id);
}

for 

function Evento(evento) {
    alert(evento.id);
}

The script function has to match with the argument passed in the onClick property of the button.

Browser other questions tagged javascript html

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