cannot set Property 'innerHTML'

Question

cannot set Property 'innerHTML'

Asked 6 years ago

Viewed 1,208 times

2

I’m trying to make a hangman’s game and I want you to show the correctly typed letters on the Divs, but give the following error on Chrome

forca.js:95 Uncaught Typeerror: Cannot set Property 'innerHTML' of null
gallows (gallows.js:95)
At Htmlbuttonelement.onclick (index.html:43)
gallows @gallows.js:95
onclick @index.html:43

If I try to set every word in a div whatever works, just the way it was supposed to work doesn’t 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>

1

Paul, what exactly is line 95? Apparently you did not find the element, for example in this line document.getElementById("casinha" + acharLetra).innerHTML, may be that the junction of "little house" with the variable acharLetra generates an ID that does not exist

– Ricardo Pontual

2018/06/21 at 11:59

2 answers

1

Included the acharLetra at the time when he ascertains 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;
...

To that end, I declared acharLetra a little earlier, 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>

thank you very much, it worked right, but I wanted to understand how if((find Etra = word.toUpperCase().indexof(letter)) > -1) works this way and my way there, could you give a brief explanation? I’m new to js yet

– Paulo Henrique Rodrigues Grund

2018/06/21 at 15:25
another doubt, when it has 2 repeated letters it only picks up the first, as I would arrange it in this method?

– Paulo Henrique Rodrigues Grund

2018/06/21 at 15:40
You compared palavra with the letra, which is uppercase. And since the comparison is case sensitive, he didn’t find the corresponding lowercase letters in palavra. Missed putting .toUpperCase(). As you had used it once, in this line I showed, I just took advantage of the code.

– Marcelo Shiniti Uchimura

2018/06/21 at 16:39
To find more occurrences of the letter in the string, just add an extra argument in the call of .indexOf(). This second argument is the position from which you will look. For example, say you want to know where the letter occurs for the first time; you do var primeiraVez = minhaString.indexOf("A");. Then, for the second instance, you do var segundaVez = minhaString.indexOf("A", primeiraVez + 1);.

– Marcelo Shiniti Uchimura

2018/06/21 at 16:43
Thanks, I was able to change the way I transformed the letter found to 0 in the string and turn all the words to everything else. Full code if you help someone: https://github.com/phgrund/game

– Paulo Henrique Rodrigues Grund

2018/06/21 at 21:04

Browser other questions tagged javascript

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

by eliangela • **171** points · Answer 1 · 2018-06-21T12:15:11+00:00

I put a console.log before the problematic call and returned the following: "Little House-1" and its ID is "Little House".

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

Check where the '-'