Por que se eu fizer dessa forma, não dá certo? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

por Gabriel Santos Oliveira

| 114.5k xp | 22 posts

Seguindo as lembranças da lógica de programação 1, lembro que o professor ensinou fazer funções, como ele fez com o document.write. Resolvi testar o mesmo com o document.querySelector, mas aqui já não da certo, olhem meu código, e por que será que não da certo chamar uma função pra isso?

<canvas width="600" height="400"></canvas>

<script>
    function getHtml(text) {
        document.querySelector(text);
    }

    var tela = getHtml('canvas');
    var pincel = tela.getContext("2d");

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

</script>

2 respostas

por William Gabriel Almeida Rocha

| 43.6k xp | 34 posts

07/08/2022

Olá!

Ao usar document.querySelector(text), você está apenas selecionando o elemento HTML <canvas> e fazendo nada com ele. Para exibir algo lá, você deve usar o innerHTML:

    document.querySelector(text).innerHTML = 'Hello, World!'

por Gabriel Santos Oliveira

| 114.5k xp | 22 posts

08/08/2022

obrigado pela resposta, é que a gente fazia tipo assim nas aulas anteriores... a gente fazia isso pra não chamar o document.write o tempo todo no meio do codigo, então foi por isso que pensei que daria certo com o querySelector, mas como vc explicou, nesse caso eu so estou chamando a tag do canvas, pq não é um texto comum como o write.

function escreva(text) {
                    document.write(text);
}

var exemplo = 55;
escreva("A variável exemplo é " + exemplo);