TheWalkingPlay2500 TheWalkingPlay2500 - 1 month ago 8
Javascript Question

Creating a on-click tab

I'm trying to make a fake and funny buying website, where I'm selling the worse games ever, but, when the person clicks on the game it's supposed to open a tab with the game "description" but it doesn't opens, it flashes on the top of the screen and don't stay.

code:



function OpenGame(jogo) {
if (jogo == "Rambo"){
document.getElementById("game-info").innerHTML = "<h1>RAMBO</h1>";
document.getElementById("game-info").className += "info";
document.getElementById("content").className += "info";
document.getElementById("game-info").focus();
}
}

.prod {
width: 80%;
height: 80%;
border: 2px solid black;
transition: 0.5s ease;
position: relative;
}
.prod:hover {
box-shadow: 0px 0px 25px #696969;
transition: 0.5s ease;
filter: grayscale(1);
}
.img {
position: absolute;
width: 100%;
height: 100%;
}
.tabelinha {
width: 100%;
height: 100%;
}
td {
width: 20%;
}
.trzinhu {
height: 500px;
}
html {
background-image: url("../BG/BG_Str.png");
}
.content {
z-index: 100;
}
.content:info {
z-index: -1;
filter: blur(10px);
}
.game {
position: absolute;
width: 90%;
height: 100%;
z-index: -1;
background-color: white;
box-shadow: 0px 0px 25px #696969;
transition: 0.5s ease;
opacity: 0;
}
.game:info {
opacity: 1;
z-index: 100;
}

<script src="http://www.w3schools.com/lib/w3data.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title> Compras ®</title>

<script src="Utils/w3data.js"></script>
<link rel="stylesheet" href="Styles/Menu.css" type="text/css">
<link rel="stylesheet" href="Styles/Compras.css" type="text/css">
<script src="Utils/CookieManager.js"></script>

</head>
<body>

<center><div class="game" id="game-info"></div></center>
<div class="content" id="content">

<div w3-include-html="Utils/Menu.html"></div>

<br>

<div class="carrinho">
<a class="carrinho_nome">Itens no carrinho: </a>
<a class="itens" id="itens">0</a>
</div>

<br><br>
<table class="tabelinha">
<tr class="trzinhu">
<td>
<div class="prod">
<a onclick="OpenGame('Rambo')" href=""><img class="img" src="Jogos/Rambo_The_Videogame.jpg"></a>
</div>
</td><td>
<div class="prod">
<a onclick="OpenGame('NMS')" href=""><img class="img" src="Jogos/No_Mans_Sky.jpg"></a>
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Envolve.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Bo_3.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Nox.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Cod_IW.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/BF_H.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Cod_G.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Just_Dance.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/cod_AW.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/The_Order.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/mine.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Dia_Z.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/h1z1.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Farm.jpeg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/ets2.jpeg">
</div>
</td></tr>
</table>
<script>
w3IncludeHTML();
</script>

</div>

</body>
</html>




Answer

That's because the page reloads after you hit <a>.

You can cancel the event by returning false on onclick.

<a onclick="OpenGame('Rambo'); return false;" href="">

function OpenGame(jogo) {
	if (jogo == "Rambo"){
		document.getElementById("game-info").innerHTML = "<h1>RAMBO</h1>";
		document.getElementById("game-info").className += "info";
		document.getElementById("content").className += "info";
		document.getElementById("game-info").focus();
	}
}
.prod {
	width: 80%;
	height: 80%;
	border: 2px solid black;
	transition: 0.5s ease;
	position: relative;
}
.prod:hover {
	box-shadow: 0px 0px 25px #696969;
	transition: 0.5s ease;
	filter: grayscale(1);
}
.img {
	position: absolute;
	width: 100%;
	height: 100%;
}
.tabelinha {
	width: 100%; 
	height: 100%;
}
td {
	width: 20%;
}
.trzinhu {
	height: 500px;
}
html {
	background-image: url("../BG/BG_Str.png");
}
.content {
	z-index: 100;
}
.content:info {
	z-index: -1;
	filter: blur(10px);
}
.game {
	position: absolute;
	width: 90%;
	height: 100%;
	z-index: -1;
	background-color: white;
	box-shadow: 0px 0px 25px #696969;
	transition: 0.5s ease;
	opacity: 0;	
}
.game:info {
	opacity: 1;
	z-index: 100;
}
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title> Compras ®</title>

<script src="Utils/w3data.js"></script>
<link rel="stylesheet" href="Styles/Menu.css" type="text/css">
<link rel="stylesheet" href="Styles/Compras.css" type="text/css">
<script src="Utils/CookieManager.js"></script>

</head>
<body>

<center><div class="game" id="game-info"></div></center>
<div class="content" id="content">

<div w3-include-html="Utils/Menu.html"></div>

<br>

<div class="carrinho">
<a class="carrinho_nome">Itens no carrinho: </a>
<a class="itens" id="itens">0</a>
</div>

<br><br>
<table class="tabelinha">
<tr class="trzinhu">
<td>
<div class="prod">
<a onclick="OpenGame('Rambo'); return false;" href=""><img class="img" src="Jogos/Rambo_The_Videogame.jpg"></a>
</div>
</td><td>
<div class="prod">
<a onclick="OpenGame('NMS'); return false;" href=""><img class="img" src="Jogos/No_Mans_Sky.jpg"></a>
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Envolve.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Bo_3.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Nox.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Cod_IW.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/BF_H.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Cod_G.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Just_Dance.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/cod_AW.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/The_Order.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/mine.jpg">
</div>
</td></tr><tr class="trzinhu"><td>
<div class="prod">
<img class="img" src="Jogos/Dia_Z.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/h1z1.jpg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/Farm.jpeg">
</div>
</td><td>
<div class="prod">
<img class="img" src="Jogos/ets2.jpeg">
</div>
</td></tr>
</table>
<script>
w3IncludeHTML();
</script>

</div>

</body>
</html>