Click event does not work [closed]

Question

Click event does not work [closed]

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Good evening guys. I am a beginner in HTMl, CSS and Java Script. That's why I'm studying, but today I came across a mistake that I can not find a solution to. 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 at all. I already did a code like that and it worked correctly, but not this time.

<!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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="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"/><divclass="imagem-mascara"></div><div class="titleBox">Winding garden path</div>
      </div>
    </div>

  </div>

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

</body>
</html>

javascript html

asked by anonymous 04.03.2017 / 03:56

2 answers

1

You must assign the correct function to the eventHandler: In only 1 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.

04.03.2017 / 03:58

How to filter PCAP file with Python? doubt with include php

score 1 · Accepted Answer

You solve the problem by changing your Javascript code

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

for

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

The script function has to match the argument passed in the button's onClick property.