can not set property 'innerHTML'

Question

can not set property 'innerHTML'

Navigation

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

2

I'm trying to make a game of the gallows and I want it to show the letters already typed correctly appear the preview in the divs, but gives the following error in chrome

forca.js: 95 Uncaught TypeError: Can not set property 'innerHTML' of null
      at forca (forca.js: 95)
      at HTMLButtonElement.onclick (index.html: 43)
  forca @ forca.js: 95
  onclick @ index.html: 43

If I try to set all the words in a div that works, just the way it was supposed to work does not work, any solution? My code below.

var i;
var quantidadeClasses = 3;
var lastResult;
var palavras = new Array(quantidadeClasses);
for(i = 0; i < quantidadeClasses; i++) {
	palavras[i] = new Array ();
}
/*
	palavras[0] = Veículos
	palavras[1] = Animais
	palavras[2] = Cor
*/

//Palavras Veículos
	palavras[0][0] = "Carro";
	palavras[0][1] = "Barco";
	palavras[0][2] = "Moto";
	palavras[0][3] = "Onibus"

//Palavras Animais
	palavras[1][0] = "Cachorro";
	palavras[1][1] = "Gato";
	palavras[1][2] = "Cavalo";
	palavras[1][3] = "Camelo";
	palavras[1][4] = "Girafa";
	palavras[1][5] = "Golfinho";
	palavras[1][6] = "Macaco";

//Palavras Cor

	palavras[2][0] = "Branco";
	palavras[2][1] = "Preto";
	palavras[2][2] = "Amarelo";
	palavras[2][3] = "Vermelho";
	palavras[2][4] = "Verde";
	palavras[2][5] = "Azul";
	palavras[2][6] = "Cinza";
	palavras[2][7] = "Rosa";

var erros;
var jogada = 0;
var tentativas = 7;
var letra;
var re;
var checar;
var fimJogo;
var maxClasse;
var randomClasse;
var maxPalavras;
var randomPalavra;
var palavra;
var acertos;
var palavraLength;

window.onload = function carregamento() {
	inicioPartida();
}

function inicioPartida() {
	erros = 0;
	jogada = 0;
	acertos = 0;
	fimJogo = false;
	maxClasse = (palavras.length) - 1;
	randomClasse = Math.floor(Math.random() * (maxClasse + 1));
	maxPalavras = (palavras[randomClasse].length) - 1;
	randomPalavra = Math.floor(Math.random() * (maxPalavras + 1));
	palavra = palavras[randomClasse][randomPalavra];
	palavraLength = palavra.length;
	document.getElementById("teclado").style.display = ""
	document.getElementById("jogarNovamente").style.display = "none";
	for(i = 0; i < palavraLength; i++) {
		document.getElementById("casinha" + i).style.display = "";
	}
}
function forca(letra) {
	document.getElementById(letra).disabled = true;
	document.getElementById(letra).style.color = "#FFF";
	document.getElementById(letra).style.borderColor = "#000";
	document.getElementById("placar").style.display = "";
	if(jogada == 0)
		document.getElementById("avisoTeclado").style.display = "none";
	if(palavra.toUpperCase().indexOf(letra) > -1){
		document.getElementById(letra).style.backgroundColor = "#0F0";
		var lastResult = "acertou";
		document.getElementById("placar").style.color = "#0F0";
		document.getElementById("lastLetra").innerHTML = letra;
		document.getElementById("lastResult").innerHTML = "acertou";
		acertos++;
		for(i = 0; i < palavraLength; i++) {
			var acharLetra = palavra.indexOf(letra);
			document.getElementById("casinha" + acharLetra).innerHTML = letra;
		}
		re = new RegExp(letra, 'gi');
		palavra = palavra.replace(re, '0');
		checar = /^0+$/.test(palavra);
		if(checar == true) {
			setTimeout(function(){ alert("Você venceu. Parabéns!!!"); }, 200);
			document.getElementById("placar").innerHTML = "Você venceu a partida.<br>Caso queira jogar novamente, clique no botão acima para jogar novamente.";
			fimJogo = true;
		}
	}
	else{
		document.getElementById(letra).style.backgroundColor = "#F00";
		document.getElementById("placar").style.color = "#F00";
		document.getElementById("lastLetra").innerHTML = letra;
		document.getElementById("lastResult").innerHTML = "errou";
		erros++;
		if(erros == tentativas) {
			document.getElementById("img").src = "src/boneco/7.png";
			document.getElementById("placar").innerHTML = "Você perdeu o jogo. A palavra correta era " + palavras[randomClasse][randomPalavra] + ".";
			fimJogo = true;
		}
		else {
			document.getElementById("img").src = "src/boneco/" + erros + ".png";
		}
	}
	if(fimJogo == true) {
		finalizarPartida();
	}
	jogada++;
}
function mostrarJogar() {
	document.getElementById("tutorial").style.display = "none";
	document.getElementById("jogar").style.display = "";;
	document.getElementById("liTutorial").style.backgroundColor = "#EEE";
	document.getElementById("liJogar").style.backgroundColor = "#DDD";
}
function mostrarTutorial() {
	document.getElementById("tutorial").style.display = "";
	document.getElementById("jogar").style.display = "none";
	document.getElementById("liTutorial").style.backgroundColor = "#DDD";
	document.getElementById("liJogar").style.backgroundColor = "#EEE";
}
function gerarDica1() {
	var classe;
	switch (randomClasse) {
		case 0:
		classe = "é um veículo";
		break;
		case 1:
		classe = "é um animal";
		break;
		case 2:
		classe = "é uma cor";
		break;
	}
	document.getElementById("mostrarDica1").innerHTML = classe;
}
function gerarDica2() {
	var primeiraLetra = palavra.charAt(0);
	document.getElementById("mostrarDica2").innerHTML = "Primeira letra: '" + primeiraLetra + "'";
}
function finalizarPartida() {
	document.getElementById("teclado").style.display = "none"
	document.getElementById("jogarNovamente").style.display = "";
}

button {
	color: #777;
	background-color: #EEE;
	border: 1px #EEE solid;
}
button:hover {
	color: #000;
	background-color: #DDD;
	border: 1px #CCC solid;
}	
ul#navbar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #EEE;
	border: 1px #DDD solid;
}
li {
	float: left;
}
li a {
	color: #777;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
li a:hover {
	background-color: #DDD;
	color: #000; 
	transition-duration: 0.4s;
	text-decoration: none;
}
.invisivel {
	display: none;
}
#main {
	margin: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 550px;
	min-height: 700px;
	border: 1px #CCC solid;
	background-color: #F5F5F5;
}
#logoDiv {
	background-image: url("../src/logo.jpg");
	height: 200px;
	border-bottom: 1px #CCC solid;
}
#headerDiv {
	border-bottom: 1px #CCC solid;
}
#bodyDiv {
	margin: 10px;
	vertical-align: middle;
}
#leftSide {
	float: right;
	width: 50%;
}
#rightSide {
	float: left;
	width: 50%;
}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;

}
#teclado {
	width: 370px;
	height: 120px;
	background-color: #DDD;
	border: 1px #CCC solid;
	border-radius: 10px;
}
#teclado-cima {
	margin-bottom: 5px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
#teclado-meio {
	margin-bottom: 5px;
}
#teclado-baixo {
	margin-bottom: 10px;
}
.teclado {
	width: 30px !important;
	height: 30px !important;
}
#dicaDiv {
	margin-top: 5px;
	border: 1px #606060 solid;
	border-radius: 10px;
	background-color: #DCDCDC;
	padding: 10px;
}
#pDica1 {
	margin: 0 auto;
}

#placar {
	margin-top: 5px;
}
#avisoTeclado {
	margin-top: 5px;
}
#img {
	border: 1px #606060 solid;
	margin-bottom: 10px;
}
.casinhas  {
	text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head>
	<title>Jogo da Forca</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="src/forca.js"></script>
	<script type="text/javascript" src="src/mostrar.js"></script>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="src/style.css">
</head>
<body>
	<div class="container">
		<div id="main">
			<div id="logoDiv"></div>
			<div id="headerDiv">
				<ul id="navbar">
					<li id="liJogar" style="background-color: #CCC;"><a href="javascript:mostrarJogar();" id="jogoNavbar">Jogar</a></li>
					<li id="liTutorial"><a href="javascript:mostrarTutorial();" id"tutorialNavbar">Tutorial</a></li>
				</ul>

			</div>
			<div id="bodyDiv">
				<article id="jogar">
					<div id="bonecos" class="text-center">
						<img src="src/boneco/0.png" id="img" alt="Boneco">
					</div>
					<div id="teclado" class="center">
						<div id="teclado-cima" class="text-center">
							<button class="teclado" id="Q" name="nameTeclado" onClick="forca(this.id);">Q</button>
							<button class="teclado" id="W" name="nameTeclado" onClick="forca(this.id);">W</button>
							<button class="teclado" id="E" name="nameTeclado" onClick="forca(this.id);">E</button>
							<button class="teclado" id="R" name="nameTeclado" onClick="forca(this.id);">R</button>
							<button class="teclado" id="T" name="nameTeclado" onClick="forca(this.id);">T</button>
							<button class="teclado" id="Y" name="nameTeclado" onClick="forca(this.id);">Y</button>
							<button class="teclado" id="U" name="nameTeclado" onClick="forca(this.id);">U</button>
							<button class="teclado" id="I" name="nameTeclado" onClick="forca(this.id);">I</button>
							<button class="teclado" id="O" name="nameTeclado" onClick="forca(this.id);">O</button>
							<button class="teclado" id="P" name="nameTeclado" onClick="forca(this.id);">P</button>
						</div>
						<div id="teclado-meio" class="text-center">
							<button class="teclado" id="A" name="nameTeclado" onClick="forca(this.id);">A</button>
							<button class="teclado" id="S" name="nameTeclado" onClick="forca(this.id);">S</button>
							<button class="teclado" id="D" name="nameTeclado" onClick="forca(this.id);">D</button>
							<button class="teclado" id="F" name="nameTeclado" onClick="forca(this.id);">F</button>
							<button class="teclado" id="G" name="nameTeclado" onClick="forca(this.id);">G</button>
							<button class="teclado" id="H" name="nameTeclado" onClick="forca(this.id);">H</button>
							<button class="teclado" id="J" name="nameTeclado" onClick="forca(this.id);">J</button>
							<button class="teclado" id="K" name="nameTeclado" onClick="forca(this.id);">K</button>
							<button class="teclado" id="L" name="nameTeclado" onClick="forca(this.id);">L</button>
						</div>
						<div id="teclado-baixo" class="text-center">
							<button class="teclado" id="Z" onClick="forca(this.id);">Z</button>
							<button class="teclado" id="X" name="nameTeclado" onClick="forca(this.id);">X</button>
							<button class="teclado" id="C" name="nameTeclado" onClick="forca(this.id);">C</button>
							<button class="teclado" id="V" name="nameTeclado" onClick="forca(this.id);">V</button>
							<button class="teclado" id="B" name="nameTeclado" onClick="forca(this.id);">B</button>
							<button class="teclado" id="N" name="nameTeclado" onClick="forca(this.id);">N</button>
							<button class="teclado" id="M" name="nameTeclado" onClick="forca(this.id);">M</button>
						</div>
					</div>
					<div id="resultado" class="text-center">
						<span id="casinha0" class="casinhas" style="display: none;">_</span>
						<span id="casinha1" class="casinhas" style="display: none;">_</span>
						<span id="casinha2" class="casinhas" style="display: none;">_</span>
						<span id="casinha3" class="casinhas" style="display: none;">_</span>
						<span id="casinha4" class="casinhas" style="display: none;">_</span>
						<span id="casinha5" class="casinhas" style="display: none;">_</span>
						<span id="casinha6" class="casinhas" style="display: none;">_</span>
						<span id="casinha7" class="casinhas" style="display: none;">_</span>
						<span id="casinha8" class="casinhas" style="display: none;">_</span>
						<span id="casinha9" class="casinhas" style="display: none;">_</span>
						<span id="casinha10" class="casinhas" style="display: none;">_</span>
						<span id="casinha11" class="casinhas" style="display: none;">_</span>
						<span id="casinha12" class="casinhas" style="display: none;">_</span>
						<span id="casinha13" class="casinhas" style="display: none;">_</span>
						<span id="casinha14" class="casinhas" style="display: none;">_</span>
					</div>
					<button id="jogarNovamente" class="center" style="display: none;" onClick="window.location.reload(false);">Jogar Novamente</button>
					<p id="avisoTeclado" class="text-center">Clique em alguma tecla do teclado para jogar.</p><p id="placar" class="text-center" style="display: none;">Você jogou <span id="lastLetra"></span> e <span id="lastResult"></span>.</p>
					<div id="dicaDiv" class="text-center">
						<p id="pDica1" style="display: inline;">Dica 1: <span id="mostrarDica1"><a href="javascript:gerarDica1();" onClick="gerarDica1();">mostrar dica</a></span>.</p><br>
						<p id="pDica2" style="display: inline;">Dica 2: <span id="mostrarDica2"><a href="javascript:gerarDica2();">mostrar dica</a></span>.</p><br>
					</div>
				</article>
				<article id="tutorial" style="display: none;">
					<p>Nesse tópico, você verá como jogar o Jogo da Forca.</p/=>
					<p></p>
				</article>
			</div>
		</div>
	</div>
</body>
</html>

javascript

asked by anonymous 21.06.2018 / 13:47

2 answers

3

I placed a console.log before the problematic call and returned the following: "house-1" and its house ID is "house1."

for(i = 0; i < palavraLength; i++) {
    var acharLetra = palavra.indexOf(letra);
    console.log("casinha" + acharLetra);
    document.getElementById("casinha" + acharLetra).innerHTML = letra;
}

Check where '-' is coming

21.06.2018 / 14:15

Graphics in PrimeFaces How to create a class and pass a value of an attribute in the class constructor in C #

score 1 · Accepted Answer

I include acharLetra in the time it checks that the letter exists, which is

...
if((acharLetra = palavra.toUpperCase().indexOf(letra)) > -1){
  document.getElementById(letra).style.backgroundColor = "#0F0";
  var lastResult = "acertou";
  document.getElementById("placar").style.color = "#0F0";
  document.getElementById("lastLetra").innerHTML = letra;
...

For this, I declare acharLetra just before, near the beginning of forca() ,

function forca(letra) {
  var acharLetra;
  document.getElementById(letra).disabled = true;
  document.getElementById(letra).style.color = "#FFF";
....

var i;
var quantidadeClasses = 3;
var lastResult;
var palavras = new Array(quantidadeClasses);
for(i = 0; i < quantidadeClasses; i++) {
	palavras[i] = new Array ();
}
/*
	palavras[0] = Veículos
	palavras[1] = Animais
	palavras[2] = Cor
*/

//Palavras Veículos
	palavras[0][0] = "Carro";
	palavras[0][1] = "Barco";
	palavras[0][2] = "Moto";
	palavras[0][3] = "Onibus"

//Palavras Animais
	palavras[1][0] = "Cachorro";
	palavras[1][1] = "Gato";
	palavras[1][2] = "Cavalo";
	palavras[1][3] = "Camelo";
	palavras[1][4] = "Girafa";
	palavras[1][5] = "Golfinho";
	palavras[1][6] = "Macaco";

//Palavras Cor

	palavras[2][0] = "Branco";
	palavras[2][1] = "Preto";
	palavras[2][2] = "Amarelo";
	palavras[2][3] = "Vermelho";
	palavras[2][4] = "Verde";
	palavras[2][5] = "Azul";
	palavras[2][6] = "Cinza";
	palavras[2][7] = "Rosa";

var erros;
var jogada = 0;
var tentativas = 7;
var letra;
var re;
var checar;
var fimJogo;
var maxClasse;
var randomClasse;
var maxPalavras;
var randomPalavra;
var palavra;
var acertos;
var palavraLength;

window.onload = function carregamento() {
	inicioPartida();
}

function inicioPartida() {
	erros = 0;
	jogada = 0;
	acertos = 0;
	fimJogo = false;
	maxClasse = (palavras.length) - 1;
	randomClasse = Math.floor(Math.random() * (maxClasse + 1));
	maxPalavras = (palavras[randomClasse].length) - 1;
	randomPalavra = Math.floor(Math.random() * (maxPalavras + 1));
	palavra = palavras[randomClasse][randomPalavra];
	palavraLength = palavra.length;
	document.getElementById("teclado").style.display = ""
	document.getElementById("jogarNovamente").style.display = "none";
	for(i = 0; i < palavraLength; i++) {
		document.getElementById("casinha" + i).style.display = "";
	}
}
function forca(letra) {
    var acharLetra;
	document.getElementById(letra).disabled = true;
	document.getElementById(letra).style.color = "#FFF";
	document.getElementById(letra).style.borderColor = "#000";
	document.getElementById("placar").style.display = "";
	if(jogada == 0)
		document.getElementById("avisoTeclado").style.display = "none";
	if((acharLetra = palavra.toUpperCase().indexOf(letra)) > -1){
		document.getElementById(letra).style.backgroundColor = "#0F0";
		var lastResult = "acertou";
		document.getElementById("placar").style.color = "#0F0";
		document.getElementById("lastLetra").innerHTML = letra;
		document.getElementById("lastResult").innerHTML = "acertou";
		acertos++;
		for(i = 0; i < palavraLength; i++) {
			document.getElementById("casinha" + acharLetra).innerHTML = letra;
		}
		re = new RegExp(letra, 'gi');
		palavra = palavra.replace(re, '0');
		checar = /^0+$/.test(palavra);
		if(checar == true) {
			setTimeout(function(){ alert("Você venceu. Parabéns!!!"); }, 200);
			document.getElementById("placar").innerHTML = "Você venceu a partida.<br>Caso queira jogar novamente, clique no botão acima para jogar novamente.";
			fimJogo = true;
		}
	}
	else{
		document.getElementById(letra).style.backgroundColor = "#F00";
		document.getElementById("placar").style.color = "#F00";
		document.getElementById("lastLetra").innerHTML = letra;
		document.getElementById("lastResult").innerHTML = "errou";
		erros++;
		if(erros == tentativas) {
			document.getElementById("img").src = "src/boneco/7.png";
			document.getElementById("placar").innerHTML = "Você perdeu o jogo. A palavra correta era " + palavras[randomClasse][randomPalavra] + ".";
			fimJogo = true;
		}
		else {
			document.getElementById("img").src = "src/boneco/" + erros + ".png";
		}
	}
	if(fimJogo == true) {
		finalizarPartida();
	}
	jogada++;
}
function mostrarJogar() {
	document.getElementById("tutorial").style.display = "none";
	document.getElementById("jogar").style.display = "";;
	document.getElementById("liTutorial").style.backgroundColor = "#EEE";
	document.getElementById("liJogar").style.backgroundColor = "#DDD";
}
function mostrarTutorial() {
	document.getElementById("tutorial").style.display = "";
	document.getElementById("jogar").style.display = "none";
	document.getElementById("liTutorial").style.backgroundColor = "#DDD";
	document.getElementById("liJogar").style.backgroundColor = "#EEE";
}
function gerarDica1() {
	var classe;
	switch (randomClasse) {
		case 0:
		classe = "é um veículo";
		break;
		case 1:
		classe = "é um animal";
		break;
		case 2:
		classe = "é uma cor";
		break;
	}
	document.getElementById("mostrarDica1").innerHTML = classe;
}
function gerarDica2() {
	var primeiraLetra = palavra.charAt(0);
	document.getElementById("mostrarDica2").innerHTML = "Primeira letra: '" + primeiraLetra + "'";
}
function finalizarPartida() {
	document.getElementById("teclado").style.display = "none"
	document.getElementById("jogarNovamente").style.display = "";
}

button {
	color: #777;
	background-color: #EEE;
	border: 1px #EEE solid;
}
button:hover {
	color: #000;
	background-color: #DDD;
	border: 1px #CCC solid;
}	
ul#navbar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #EEE;
	border: 1px #DDD solid;
}
li {
	float: left;
}
li a {
	color: #777;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
li a:hover {
	background-color: #DDD;
	color: #000; 
	transition-duration: 0.4s;
	text-decoration: none;
}
.invisivel {
	display: none;
}
#main {
	margin: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 550px;
	min-height: 700px;
	border: 1px #CCC solid;
	background-color: #F5F5F5;
}
#logoDiv {
	background-image: url("../src/logo.jpg");
	height: 200px;
	border-bottom: 1px #CCC solid;
}
#headerDiv {
	border-bottom: 1px #CCC solid;
}
#bodyDiv {
	margin: 10px;
	vertical-align: middle;
}
#leftSide {
	float: right;
	width: 50%;
}
#rightSide {
	float: left;
	width: 50%;
}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;

}
#teclado {
	width: 370px;
	height: 120px;
	background-color: #DDD;
	border: 1px #CCC solid;
	border-radius: 10px;
}
#teclado-cima {
	margin-bottom: 5px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
#teclado-meio {
	margin-bottom: 5px;
}
#teclado-baixo {
	margin-bottom: 10px;
}
.teclado {
	width: 30px !important;
	height: 30px !important;
}
#dicaDiv {
	margin-top: 5px;
	border: 1px #606060 solid;
	border-radius: 10px;
	background-color: #DCDCDC;
	padding: 10px;
}
#pDica1 {
	margin: 0 auto;
}

#placar {
	margin-top: 5px;
}
#avisoTeclado {
	margin-top: 5px;
}
#img {
	border: 1px #606060 solid;
	margin-bottom: 10px;
}
.casinhas  {
	text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head>
	<title>Jogo da Forca</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="src/forca.js"></script>
	<script type="text/javascript" src="src/mostrar.js"></script>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="src/style.css">
</head>
<body>
	<div class="container">
		<div id="main">
			<div id="logoDiv"></div>
			<div id="headerDiv">
				<ul id="navbar">
					<li id="liJogar" style="background-color: #CCC;"><a href="javascript:mostrarJogar();" id="jogoNavbar">Jogar</a></li>
					<li id="liTutorial"><a href="javascript:mostrarTutorial();" id"tutorialNavbar">Tutorial</a></li>
				</ul>

			</div>
			<div id="bodyDiv">
				<article id="jogar">
					<div id="bonecos" class="text-center">
						<img src="src/boneco/0.png" id="img" alt="Boneco">
					</div>
					<div id="teclado" class="center">
						<div id="teclado-cima" class="text-center">
							<button class="teclado" id="Q" name="nameTeclado" onClick="forca(this.id);">Q</button>
							<button class="teclado" id="W" name="nameTeclado" onClick="forca(this.id);">W</button>
							<button class="teclado" id="E" name="nameTeclado" onClick="forca(this.id);">E</button>
							<button class="teclado" id="R" name="nameTeclado" onClick="forca(this.id);">R</button>
							<button class="teclado" id="T" name="nameTeclado" onClick="forca(this.id);">T</button>
							<button class="teclado" id="Y" name="nameTeclado" onClick="forca(this.id);">Y</button>
							<button class="teclado" id="U" name="nameTeclado" onClick="forca(this.id);">U</button>
							<button class="teclado" id="I" name="nameTeclado" onClick="forca(this.id);">I</button>
							<button class="teclado" id="O" name="nameTeclado" onClick="forca(this.id);">O</button>
							<button class="teclado" id="P" name="nameTeclado" onClick="forca(this.id);">P</button>
						</div>
						<div id="teclado-meio" class="text-center">
							<button class="teclado" id="A" name="nameTeclado" onClick="forca(this.id);">A</button>
							<button class="teclado" id="S" name="nameTeclado" onClick="forca(this.id);">S</button>
							<button class="teclado" id="D" name="nameTeclado" onClick="forca(this.id);">D</button>
							<button class="teclado" id="F" name="nameTeclado" onClick="forca(this.id);">F</button>
							<button class="teclado" id="G" name="nameTeclado" onClick="forca(this.id);">G</button>
							<button class="teclado" id="H" name="nameTeclado" onClick="forca(this.id);">H</button>
							<button class="teclado" id="J" name="nameTeclado" onClick="forca(this.id);">J</button>
							<button class="teclado" id="K" name="nameTeclado" onClick="forca(this.id);">K</button>
							<button class="teclado" id="L" name="nameTeclado" onClick="forca(this.id);">L</button>
						</div>
						<div id="teclado-baixo" class="text-center">
							<button class="teclado" id="Z" onClick="forca(this.id);">Z</button>
							<button class="teclado" id="X" name="nameTeclado" onClick="forca(this.id);">X</button>
							<button class="teclado" id="C" name="nameTeclado" onClick="forca(this.id);">C</button>
							<button class="teclado" id="V" name="nameTeclado" onClick="forca(this.id);">V</button>
							<button class="teclado" id="B" name="nameTeclado" onClick="forca(this.id);">B</button>
							<button class="teclado" id="N" name="nameTeclado" onClick="forca(this.id);">N</button>
							<button class="teclado" id="M" name="nameTeclado" onClick="forca(this.id);">M</button>
						</div>
					</div>
					<div id="resultado" class="text-center">
						<span id="casinha0" class="casinhas" style="display: none;">_</span>
						<span id="casinha1" class="casinhas" style="display: none;">_</span>
						<span id="casinha2" class="casinhas" style="display: none;">_</span>
						<span id="casinha3" class="casinhas" style="display: none;">_</span>
						<span id="casinha4" class="casinhas" style="display: none;">_</span>
						<span id="casinha5" class="casinhas" style="display: none;">_</span>
						<span id="casinha6" class="casinhas" style="display: none;">_</span>
						<span id="casinha7" class="casinhas" style="display: none;">_</span>
						<span id="casinha8" class="casinhas" style="display: none;">_</span>
						<span id="casinha9" class="casinhas" style="display: none;">_</span>
						<span id="casinha10" class="casinhas" style="display: none;">_</span>
						<span id="casinha11" class="casinhas" style="display: none;">_</span>
						<span id="casinha12" class="casinhas" style="display: none;">_</span>
						<span id="casinha13" class="casinhas" style="display: none;">_</span>
						<span id="casinha14" class="casinhas" style="display: none;">_</span>
					</div>
					<button id="jogarNovamente" class="center" style="display: none;" onClick="window.location.reload(false);">Jogar Novamente</button>
					<p id="avisoTeclado" class="text-center">Clique em alguma tecla do teclado para jogar.</p><p id="placar" class="text-center" style="display: none;">Você jogou <span id="lastLetra"></span> e <span id="lastResult"></span>.</p>
					<div id="dicaDiv" class="text-center">
						<p id="pDica1" style="display: inline;">Dica 1: <span id="mostrarDica1"><a href="javascript:gerarDica1();" onClick="gerarDica1();">mostrar dica</a></span>.</p><br>
						<p id="pDica2" style="display: inline;">Dica 2: <span id="mostrarDica2"><a href="javascript:gerarDica2();">mostrar dica</a></span>.</p><br>
					</div>
				</article>
				<article id="tutorial" style="display: none;">
					<p>Nesse tópico, você verá como jogar o Jogo da Forca.</p/=>
					<p></p>
				</article>
			</div>
		</div>
	</div>
</body>
</html>