My code doesn’t work!

Asked

Viewed 59 times

-2

I’m learning to move the JS and I’m playing a little game.

I want to know what’s wrong with it, because I put the code exactly like the video class I watch, but it doesn’t run at all.

It was to create a screen in the center of the page, but nothing appears.
Follow the code below:

var canvas, ctx, LARGURA, ALTURA, frame = 0

function main() {
  ALTURA = window.innerHeight
  LARGURA = window.innerWidth

  if (LARGURA >= 500) {
    ALTURA = 600
    LARGURA = 600
  }


  canvas = document.createElement("canvas")
  canvas.width = LARGURA
  canvas.height = ALTURA


  canvas.style.border = "1px solid #000"
}
canvas {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>Página Inicial</title>

</head>

<body>

  <header>
    <nav></nav>
  </header>
  <div></div>
  <article>
    <section>


    </section>
  </article>

  <aside></aside>

  <div></div>

  <footer></footer>
</body>

</html>

javascript css3

  • Read: https://pt.meta.stackoverflow.com/questions/1084/comomos-formatter-questions-answers/1297#1297

  • You have to call the method main() you only declared it but did not make use of it.

  • How do I call it in html?

  • Only invoke inside the script as a normal function like this main() or html put it into an event handler onclick="main()". PS: In the previous comment I called method, but it’s just a function.

  • I put the main() at the end of the script, but still nothing appears...

  • 1

    Some things are missing from your code. I’m taking a look you need to attach the element created in canvas = document.createElement("canvas") the page like this document.body.appendChild(canvas); . Documentation of appendChild: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

  • canvas = Document.createelement("canvas") Document.body.appendchild(canvas) // error appears on the console " script.js:15 Uncaught Typeerror: Cannot read Property 'appendchild' of null "

  • Take a look at the answer I put is there is commented on. Click Run to see the result. On the upper right side of the display is the Whole Page button.

  • Running here, but mine does not run...appears the error msg on the console

Show 4 more comments

1 answer

1


As I said in the comments are missing some things in your code.

First you need to evoke the function main(), it was declared but not used.

You also need to attach the created element to the line

canvas = document.createElement("canvas");

your page using the method Node.appendChild(). See in the example:

var canvas, ctx, LARGURA, ALTURA, frame = 0

function main() {
  ALTURA = window.innerHeight
  LARGURA = window.innerWidth

  if (LARGURA >= 500) {
    //Diminuí largura e altura para facilitar a visualização
    ALTURA = 300 
    LARGURA = 300
  }


  canvas = document.createElement("canvas")
  canvas.width = LARGURA
  canvas.height = ALTURA


  canvas.style.border = "1px solid #000"

  //Faltou em seu código adicionar o canvas ao corpo do documento
  document.body.appendChild(canvas);

}

main(); //Faltou em seu código evocar o método main()
canvas {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>Página Inicial</title>

</head>

<body>

  <header>
    <nav></nav>
  </header>
  <div></div>
  <article>
    <section>


    </section>
  </article>

  <aside></aside>

  <div></div>

  <footer></footer>
</body>

</html>

  • The code is not picking up on mine, the console says : "Uncaught Typeerror: Cannot read Property 'appendchild' of null at main " I made the changes you commented

  • On this console here on the page? I clicked and it worked correctly See the image: https://imgur.com/HeZh9q9

  • Not from here, the hence worked, but in mine. I run mine on the VS code web and the console appears that error.

  • Comments with a print, must be typo.

  • Did you save the document after you modified it? Some JS linters only scan the saved version of the file.

  • I can not share the print I took, the comment does not put the photo. Have some instagram or other place I can send

  • Use this site https://imgur.com/ is the official of the page.

  • https://imgur.com/a/r5lzuc7

  • Probably you are loading your JS file as if it were a module part https://imgur.com/gQaRzyw, I need to see the tag <script> HTML believe that there is the error. But the simplest way to solve it is to leave this code on the page itself.

  • I wrote this code, in the VS code it has to look like this: https://repl.it/@Ronaldovasques/How should be new

  • Look at the reply, my code in full. https://repl.it/repls/LegitimateHorribleFile

  • Is because it’s in the <head> the DOM has not yet been loaded have to move to the end of the file or put to work in the event load. The way you’re doing it is best solution is to migrate the tag <script> to the end of the page.

  • Look at your modified script: https://repl.it/@Ronaldovasques/Legitimatehorriblefile

  • 1

    My God, that was kkkk! Thanks bro...

Show 9 more comments

Browser other questions tagged javascript css3

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