Return in array js

Asked

Viewed 57 times

1

I’m trying to make an old game of js, but I can’t check if the filled-in index is different from 1 or 2. Any solution? I’m trying to re-turn the array but it doesn’t seem to go.

Code: https://jsfiddle.net/ew9kfhy3/

Error in the Chrome:

tictactoe.js:99 Uncaught Typeerror: Cannot set Property 'innerHTML' of null
at jogaria (tictactoe.js:99)
at tictactoe.js:10

javascript

  • The error is saying that there is no element with that id when doing document.getElementById(id) returns null, when doing innerHTML in null of error

  • I changed the business, but the error is the same http://prntscr.com/jw40et the problem is that q the AI is able to override a part of the vector that already has something

1 answer

2


I noticed 3 errors in your code:

In these comparisons if(v[1] != 1 || v[1] != 2) you could just do if(!v[0]) { to check if it is empty. Or you should use the operator && instead of ||:

if(v[1] != 1 && v[1] != 2)

The operator || which means ou, you are saying that it can be right of 1 or 2, so if it is empty or 1, it will validate, if it is 2 will also validate.

Another similar error is in this if:

if(v[randomIA] != 1 || v[randomIA] != 2) {
   v[randomIA] = 2;

Would you have to use either if(!v[randomIA]) { or if(v[randomIA] != 1 && v[randomIA] != 2) {. And the value in v[randomIA] = 2; should logically be the random value:

v[randomIA] = randomIA;

Another problem is the generation of a random number:

randomIA = Math.floor(Math.random() * (9 + 1));

It’s generating numbers from 0 to 9. Like ids of divs range from 0 to 8, remove the + 1, because it is generating the 9 and Javascript returns the error cited for not finding the element of id="q9", that doesn’t exist.

Fixing these problems, the code seems to work perfectly. See (I even added borders to make it easier to view):

var q;
var i;
var vez = Math.floor(Math.random() * (2) + 1);  // 1 para player / 2 para IA
var randomIA;
var posicaoOcupada;
var fimJogo = 0;
var flag = 0;
var v = new Array(9);   // 1 para player / 2 para IA
if(vez == 2)
    jogarIA();
function jogar(q) {
   posicaoOcupada = false;
    switch(q) {
        case 0:
            if(!v[0]) {
                v[0] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 1:
            if(!v[1]) {
                v[1] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 2:
            if(!v[2]) {
                v[2] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 3:
            if(!v[3]) {
                v[3] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 4:
            if(!v[4]) {
                v[4] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 5:
            if(!v[5]) {
                v[5] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 6:
            if(!v[6]) {
                v[6] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 7:
            if(!v[7]) {
                v[7] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 8:
            if(!v[8]) {
                v[8] = 1;
            }
            else
                posicaoOcupada = true;
        break;
    }
    if(posicaoOcupada == true){
        document.getElementById("alerta").style.display = "";
    }else if(posicaoOcupada == false) {
        document.getElementById("q" + q).innerHTML = "X";
        jogarIA();
    }
    return v[q];
}
var randomLinha;
var randomColuna;
function jogarIA() {
    flag = 0;
    while(flag == 0) {
        randomIA = Math.floor(Math.random() * (9));
        if(!v[randomIA]) {
            v[randomIA] = randomIA;
            flag = 1;
        }
        else
            flag = 0;
    }
    document.getElementById("q" + randomIA).innerHTML = "O";
    return v[randomIA];
}
function mostrarIndex() {
	document.getElementById("index").style.display = "";
	document.getElementById("tutorial").style.display = "none";
	document.getElementById("jogar").style.display = "none";
	document.getElementById("liIndex").style.backgroundColor = "#DDD";
	document.getElementById("liTutorial").style.backgroundColor = "#EEE";
	document.getElementById("liJogar").style.backgroundColor = "#EEE";
	window.location.href = "";
}
function mostrarTutorial() {
	document.getElementById("index").style.display = "none";
	document.getElementById("tutorial").style.display = "";
	document.getElementById("jogar").style.display = "none";
	document.getElementById("liIndex").style.backgroundColor = "#EEE";
	document.getElementById("liTutorial").style.backgroundColor = "#DDD";
	document.getElementById("liJogar").style.backgroundColor = "#EEE";
	window.location.href = "#tutorial";
}
function mostrarJogar() {
	document.getElementById("index").style.display = "none";
	document.getElementById("tutorial").style.display = "none";
	document.getElementById("jogar").style.display = "";
	document.getElementById("liIndex").style.backgroundColor = "#EEE";
	document.getElementById("liTutorial").style.backgroundColor = "#EEE";
	document.getElementById("liJogar").style.backgroundColor = "#DDD";
}
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;
}
#main {
	margin: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 550px;
	min-height: 500px;
	border: 1px #CCC solid;
	background-color: #F5F5F5;
}
#logoDiv {
	background-image: url("../src/logo.png");
	height: 200px;
	border-bottom: 1px #CCC solid;
}
#headerDiv {
	border-bottom: 1px #CCC solid;
}
#bodyDiv {
	margin: 10px;
}
#q{
    width: 246px;
    height: 246px;
	display: flex;
	margin: 0 auto;
    flex-wrap: wrap;
    align-content: flex-start;
	background: url("../src/grid.png");
}
.quadrado{
    width: 80px;
    height: 80px;
    margin: 0px;
    padding: 0px;
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    border: 1px solid #000;
}
<div class="container">
   <div id="main">
      <div id="logoDiv"></div>
      <div id="headerDiv">
         <ul id="navbar">
            <li id="liIndex" style="background-color: #CCC;"><a href="javascript:mostrarIndex();" id="indexNavbar">Página Inicial</a></li>
            <li id="liTutorial"><a href="javascript:mostrarTutorial();" id"tutorialNavbar">Tutorial</a></li>
            <li id="liJogar"><a href="javascript:mostrarJogar();" id="jogoNavbar">Jogar</a></li>
         </ul>

      </div>
      <div id="bodyDiv">
         <article id="index">
            <p>Bem vindo <span id="mostrarNome"></span> ao Jogo da Velha, descubra quais são as palavras antes que suas tentativas acabem.</p>
            <p>Caso não saiba jogar, clique na aba <b>Tutorial</b> para aprender. Caso já saiba, clique em <b>Jogar</b> para começar a diversão.</p>
         </article>
         <article id="tutorial" style="display: none;">
            <p>Nesse tópico, você verá como jogar o Jogo da Forca.</p/=>
         </article>
         <article id="jogar" style="display: none;" align: "center">
            <p id="placar" class="text-center"><b>Placar:</b><br><span id="placarPlayer">0</span> vs IA <span id="placarIA">0</span></p>
            <div id="q" class="text-center">
               <div id="q0" class="quadrado" onClick="jogar(0);"></div>
               <div id="q1" class="quadrado" onClick="jogar(1);"></div>
               <div id="q2" class="quadrado" onClick="jogar(2);"></div>
               <div id="q3" class="quadrado" onClick="jogar(3);"></div>
               <div id="q4" class="quadrado" onClick="jogar(4);"></div>
               <div id="q5" class="quadrado" onClick="jogar(5);"></div>
               <div id="q6" class="quadrado" onClick="jogar(6);"></div>
               <div id="q7" class="quadrado" onClick="jogar(7);"></div>
               <div id="q8" class="quadrado" onClick="jogar(8);"></div>
            </div>
            <p id="alerta" class="text-center" style="display: none;"><i class="fa fa-exclamation-triangle"></i> Posição ocupada, tente outra!</p>
         </article>
      </div>
   </div>
</div>

  • thanks even bro, it worked here :) yesterday I was sleepy and worried about evidence, nor noticed these silly mistakes kk

Browser other questions tagged javascript

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