Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Por que a variável não entra como parâmetro da função?

Aprendi que funções servem para simplificar códigos, bastando inserir os parâmetros certos para alcançar o objetivo. De acordo com o código abaixo, a princípio, foi criando duas variáveis ("título" e "parágrafo"), as quais foram armazenadas as frases que se deseja inserir no HTML. Em seguida, mostrou-se que esse procedimento pode ser simplificado por meio da função "exibirTextoNaTela", bastando inserir os parâmetros "tag" e "texto". A dúvida: Veja que antes da função haviam 2 variáveis. A função define como parâmetros apenas a "tag" e o "texto". Então se eu chamar as duas funções: exibirTextoNaTela('h1', 'Jogo do número secreto') e exibirTextoNaTela('p', 'Escolha um número entre 1 e 10') AMBAS irão ser armazenadas na mesma variável "campo"?? Isso não daria erro?

// let titulo = document.querySelector('h1');
// titulo.innerHTML = 'Jogo do número secreto';

// let paragrafo = document.querySelector('p');
// paragrafo.innerHTML = 'Escolha um número entre 1 e 10';

function exibirTextoNaTela(tag, texto) {
let campo = document.querySelector(tag);
campo.innerHTML = texto;
}

exibirTextoNaTela('h1', 'Jogo do número secreto');
exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');

1 resposta
solução!

No seu código:

function exibirTextoNaTela(tag, texto) {
let campo = document.querySelector(tag);
campo.innerHTML = texto;
}

A função exibirTextoNaTela recebe dois parâmetros:

    tag → o seletor HTML ('h1', 'p', etc.).

    texto → o conteúdo que você quer colocar dentro dessa tag.

Dentro da função, você cria uma variável local chamada campo.

let campo = document.querySelector(tag);

Essa variável só existe durante a execução da função. Quando a função termina, essa variável "desaparece" da memória (é descartada pelo JavaScript).

Então, respondendo sua dúvida:

"Se eu chamar as duas funções... AMBAS irão ser armazenadas na mesma variável 'campo'? Isso não daria erro?"

Não dá erro porque:

Cada vez que você chama a função, a variável campo é recriada do zero, localmente.

Na primeira chamada:

exibirTextoNaTela('h1', 'Jogo do número secreto');

campo se refere ao elemento <h1>.

O conteúdo dele vira "Jogo do número secreto".

Depois a função termina, e essa versão de campo desaparece.

Na segunda chamada:

exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');

    campo se refere ao elemento <p>.

    O conteúdo dele vira "Escolha um número entre 1 e 10".

    Depois a função termina, e essa versão de campo também desaparece.

Ou seja: cada execução da função tem sua própria variável campo, independente das outras execuções. Isso é possível porque let cria variáveis locais ao escopo da função.

Resumindo:

A variável campo não é a mesma entre as duas chamadas.

Ela é criada e destruída a cada execução da função.

É por isso que você pode chamar várias vezes sem problema.