0

for some reason when i use JavaScript to edit the css of batata[y] nothing happens. The objective of the code is to create multiple blocks and move then from the top to the button of the page.

var p1
var p2 = [];
var y = 0;
var x = 0;
var telaJogo, telaJogo2, telaInicio;
var balao = [];
var a = 0;
var batata;

function ola() {
  var bola = setInterval(addBalao, 1000);
}

function addBalao() {
  telaJogo2 = document.getElementById('telaJogo2');
  p2.push(0);
  balao.push(0);
  p1 = Math.floor(Math.random() * 445);
  batata = "balao" + y;
  balao[y] = document.createElement('div'); //create the block
  balao[y].setAttribute("id", batata);
  telaJogo2.appendChild(balao[y]);
  balao[y].style = "top:" + p2[y] + "px;";
  balao[y].style = "left:" + 30 + "px;";
  balao[y].style = "background-color: red;";
  balao[y].style = "height: 50px;";
  balao[y].style = "width: 50px;";
  balao[y].style = "position: absolute";

  console.log("p2[y]" + p2[2]);
  setInterval(ola2, 100);
  y++;
}

function ola2() {
  // move block
  for (x = 0; x < y; x++) {
    p2[x]++;
    atualiza();
  }
  a = 0;
  //console.log(p2);
}

function atualiza() {
  // update the frame
  balao[x].setAttribute("style", "top:" + p2[x] + "px;");
}
#telaJogo2 {
  height: 800px;
  width: 445px;
  background-color: #90ee90;
}
<body onLoad="ola()">
  <script type="text/javascript">
  </script>
  <div id="telaJogo2">
    <div id="barra1"></div>
  </div>
Itay Gal
  • 10,706
  • 6
  • 36
  • 75
cesar xexeu
  • 1
  • Please comment your code and format your example as a snippet – Nino Filiu Mar 17 '19 at 23:18
  • First of all you have errors. There are some comments that are not written as comments. Second, you never called any of your functions so nothing should happen. Please fix your code and edit the post. – Omri Attiya Mar 17 '19 at 23:22
  • Your code is invalid in the first place. – Scott Marcus Mar 17 '19 at 23:22
  • https://stackoverflow.com/questions/15241915/how-to-change-css-property-using-javascript –  Mar 17 '19 at 23:31
  • Possible duplicate of [How to change css property using javascript](https://stackoverflow.com/questions/15241915/how-to-change-css-property-using-javascript) –  Mar 17 '19 at 23:31
  • There's no `batata[y]` in the code, do you mean `balao[y]`? – Barmar Mar 18 '19 at 00:55
  • Each of your `style` assignments is overwriting the previous one. They don't automatically append. You should assign to `balao[y].style.top`, `balao[y].style.backgroundColor`, etc. – Barmar Mar 18 '19 at 00:57

0 Answers0