Problem with target identification

Asked

Viewed 48 times

-3

Structure of the Progama:

<body>

    <div class = 'tabuleiro' onclick = 'clicar()'>
        <div id = 'a1' class = 'espaco'></div>
        <div id = 'a2' class = 'espaco'></div>
        <div id = 'a3' class = 'espaco'></div>

        <div id = 'b1' class = 'espaco'></div>
        <div id = 'b2' class = 'espaco'></div>
        <div id = 'b3' class = 'espaco'></div>

        <div id = 'c1' class = 'espaco'></div>
        <div id = 'c2' class = 'espaco'></div>
        <div id = 'c3' class = 'espaco'></div>
    </div>
    <input type="button" value="clicar" onclick = 'resultado()'>

<script>
    var a1 = document.getElementById('a1').innerHTML
    var a2 = document.getElementById('a2').innerHTML
    var a3 = document.getElementById('a3').innerHTML

    var b1 = document.getElementById('b1').innerHTML
    var b2 = document.getElementById('b2').innerHTML
    var b3 = document.getElementById('b3').innerHTML

    var c1 = document.getElementById('c1').innerHTML
    var c2 = document.getElementById('c2').innerHTML
    var c3 = document.getElementById('c3').innerHTML

    var vitoria = false

    function clicar(){
        var espaco_selecionado = event.target
        espaco_selecionado.innerHTML = 'X'
    }

    function conferir(){                                //*DÚVIDA
        if (a1 == 'X' && a2 == 'X' && a3 == 'X'){
            window.alert('VITORIA')
        }
    }
    
</script>
</body>

The problem is that the program does not identify that the variables a1, a2 and A3, are with the value 'X', even though I have a function (click()) that puts such value in them.

javascript

  • you want to compare the html ( id content ) with the variables ?

  • The html text is copied only and has no text reference. Example: var t = 2; var c = t; t = 4; Output: t=4,c=2

  • Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativities worth reading the Stack Overflow Survival Guide in English.

3 answers

0


Remember that the browser will interpret your script only once. So when the browser goes through the line var a1 = document.getElementById('a1').innerHTML, the value of a1 is empty. This empty value is assigned to the variable a1. When the innerHTML is changed at mouse click, you are not updating the value of a1, therefore its logic within the function conferir does not work as expected.

The change below should help you solve the problem:

  var a1 = document.getElementById('a1');
  var a2 = document.getElementById('a2');
  var a3 = document.getElementById('a3');

  var b1 = document.getElementById('b1');
  var b2 = document.getElementById('b2');
  var b3 = document.getElementById('b3');

  var c1 = document.getElementById('c1');
  var c2 = document.getElementById('c2');
  var c3 = document.getElementById('c3');

  var vitoria = false

  function clicar(){
      var espaco_selecionado = event.target
      espaco_selecionado.innerHTML = 'X'
  }

  function conferir(){                                //*DÚVIDA
      if (a1.innerHTML == 'X' && a2.innerHTML == 'X' && a3.innerHTML == 'X') {
          window.alert('VITORIA')
      }
  }
.tabuleiro {
    background: #efefef;
    border: 1px solid #ccc;
    display: flex;
    flex-flow: row wrap;
}

.espaco {
    background: #ccc;
    height: 30px;
    border: 1px solid red;
    width: 30%;
}
<div class="tabuleiro" onclick="clicar()">
    <div id="a1" class="espaco"></div>
    <div id="a2" class="espaco"></div>
    <div id="a3" class="espaco"></div>

    <div id="b1" class="espaco"></div>
    <div id="b2" class="espaco"></div>
    <div id="b3" class="espaco"></div>

    <div id="c1" class="espaco"></div>
    <div id="c2" class="espaco"></div>
    <div id="c3" class="espaco"></div>
</div>
<input type="button" value="clicar" onclick="conferir()">

0

Good night Davi Ribeiro,

Only your code is missing you pass the event as parameter in the function. try this:

<body>

    <div class = 'tabuleiro' onclick = 'clicar(event)'>
        <div id = 'a1' class = 'espaco'></div>
        <div id = 'a2' class = 'espaco'></div>
        <div id = 'a3' class = 'espaco'></div>

        <div id = 'b1' class = 'espaco'></div>
        <div id = 'b2' class = 'espaco'></div>
        <div id = 'b3' class = 'espaco'></div>

        <div id = 'c1' class = 'espaco'></div>
        <div id = 'c2' class = 'espaco'></div>
        <div id = 'c3' class = 'espaco'></div>
    </div>
    <input type="button" value="clicar" onclick = 'resultado()'>

<script>
    var a1 = document.getElementById('a1').innerHTML
    var a2 = document.getElementById('a2').innerHTML
    var a3 = document.getElementById('a3').innerHTML

    var b1 = document.getElementById('b1').innerHTML
    var b2 = document.getElementById('b2').innerHTML
    var b3 = document.getElementById('b3').innerHTML

    var c1 = document.getElementById('c1').innerHTML
    var c2 = document.getElementById('c2').innerHTML
    var c3 = document.getElementById('c3').innerHTML

    var vitoria = false

    function clicar(event){
        var espaco_selecionado = event.target
        espaco_selecionado.innerHTML = 'X'
    }

    function conferir(){                                //*DÚVIDA
        if (a1 == 'X' && a2 == 'X' && a3 == 'X'){
            window.alert('VITORIA')
        }
    }
    
</script>
</body>

However your code has a "click" button that calls a "result()" function that does not exist in the javascript above, so this may be your problem too, but at first the error you reported is due to the fact that you are calling target from Event that was not coming in the function.

I hope I’ve helped!

0

String type data does not receive reference from a value, but only a copy that was received.

Example:

var t = "2";
var c = t;
t = "3"
console.log(`t: ${t},c: ${c}`)

Some data types have reference as for example: Object and Function

var t = {}
var c = t
t.d = 2;
console.log(t)
console.log(c)

Solution of the problem is reference through a Function the text.

Example:

// Referenciado a propriedade document.getElementById("test").innerHTML
var test_text = () => document.getElementById("test").innerHTML;

console.log(test_text())

document.getElementById("test").innerHTML = "Hello World2!"

console.log(test_text())
<html>
<p id="test">Hello World!</p>
</html>

I hope it helped.

Browser other questions tagged javascript

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