Boa noite galera. Sou iniciante em HTMl, CSS e Java Script. Por isso estou estudando, mas me deparei hoje com um erro que não estou conseguindo achar uma solução. Tenho uma 'grid' responsiva com imagens e coloquei um evento onde eu clico e o JavaScript me retorna com uma janela, mas não está funcionando de nenhuma maneira. Já fiz um código assim e funcionou corretamente, mas dessa vez não.
<!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>