Where’s the mistake I made?

Asked

Viewed 45 times

0

I don’t know where my mistake is, my code seems very solid, but I can’t run it on 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>

javascript html error-recovery

  • Oops, I entered the question if it shows any error in the console and what is this error.

1 answer

1

When debugging on the console, it was possible to notice that you typed the variable name html, wrong. And also, the querySelector, you forgot to indicate that the target is an 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()
})()

  • Thank you very much, very grateful to be able to learn and have so many people willing to help those who are starting :)

Browser other questions tagged javascript html error-recovery

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