0

Eu não sei onde está o meu erro, meu código me parece muito sólido, mas não consigo rodar ele no chrome

const firePixelsArray =[]
const fireWidth = 10
const fireHeight = 10



function start(){
createFireDataStructure()
renderFire()
}

function createFireDataStructure(){
const numberOfPixels =fireWidth * fireHeight
for (let i =0; i< numberOfPixels; i++){
firePixelsArray[i] = 0
}
}

function calculateFirePropagation() {
}

function renderFire() {
let  htlm= '<table cellpadding=0 cellspacing=0>'

for (let row=0;  row  < fireHeight; row++) {
html += '<tr>'

 for (let column =0; column <fireWidth;  column++){
const pixelIndex = column + (fireWidth * row)

html+= '<td>'
html = pixelIndex
html = '</td>'
}
html+= '<tr>'
}
 html = '</table>'

document.querySelector('fireCanvas').innerHTML = html
}

start()                                 
<html>
<head>
<style>
table{
      bordder-collapse: collapse;
bordder:1px solid #000;
}

td{
   width: 50px                                                                             ;
              height: 50px                                                                ;
                          border: 1px solid #000                                         ;
                                                text-align:center                       ;
                                                                 vertical-align: center;
                                                                                            font-family: monospace ;
font-size:18px }
</style>


</head>
   <body>
<div id="fireCanvas"></div>         
<script src="fire.js"> </script>
                                         </body>
</html>
        

1
  • Opa, inseri na pergunta se mostra algum erro no console e qual é esse erro. 9/04/2019 às 21:18

1 Resposta 1

1

Ao debugar no console, foi possível notar que você digitou o nome da variável html, errado. E também, o querySelector, você se esqueceu de indicar que o target se trata de um ID: document.querySelector('#fireCanvas').

index.html

<html>
  <head>
    <style>
      table {
        border-collapse: collapse;
        border:1px solid #000;
      }
      td {
          width: 50px;
          height: 50px;
          border: 1px solid #000;
          text-align:center;
          vertical-align: center;
          font-family: monospace ;
          font-size: 18px;
        }
    </style>
  </head>

  <body>
    <div id="fireCanvas"></div>

    <script src="fire.js"></script>     
  </body>
</html>

fire.js

const firePixelsArray =[]
const fireWidth = 10
const fireHeight = 10

function createFireDataStructure(){
  const numberOfPixels =fireWidth * fireHeight

  for (let i =0; i< numberOfPixels; i++){
    firePixelsArray[i] = 0
  }
}

function calculateFirePropagation() {}

function renderFire() {
  let  html= '<table cellpadding=0 cellspacing=0>'

  for (let row=0;  row  < fireHeight; row++) {
    html += '<tr>'

    for (let column =0; column <fireWidth;  column++){
      const pixelIndex = column + (fireWidth * row)

      html += '<td>'
      html += pixelIndex
      html += '</td>'
    }
    html += '<tr>'
  }
  html += '</table>'

  document.getElementById('fireCanvas').innerHTML = html
}


(function start() {
  createFireDataStructure()
  renderFire()
})()
1
  • Muito Obrigado, ficomuito grato em poder aprender e ter tanta gente disposta a ajudar quem está começando :)
    – leomax499
    10/04/2019 às 20:39

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .