3

Gente eu fiz um código para aparecer a palavra no final com o click, mas o meu código ficou muito extenso. Tem alguma outra solução pra fazer a mesma coisa?

<!DOCTYPE>
<html>
<head>
    <title>Substituir</title>
</head>
<body>

    <p id="nome1" onclick="nome1()">Dinossauro</p>
    <p id="nome2" onclick="nome2()">Tubarao</p>
    <p id="nome3" onclick="nome3()">Ornitorrinco</p>
    <p id="nome4" onclick="nome4()">Gralha</p>

    <p id="recebe"></p>

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

JS:

var botao = document.querySelector("p");

function nome1(){

    var selecionaTexto = document.querySelector("#nome1");
    var texto = selecionaTexto.textContent;

    var campoRecebe = document.querySelector("#recebe");
    campoRecebe.textContent = texto;

    console.log(texto);

};
function nome2(){

    var selecionaTexto = document.querySelector("#nome2");
    var texto = selecionaTexto.textContent;

    var campoRecebe = document.querySelector("#recebe");
    campoRecebe.textContent = texto;

    console.log(texto);

};
function nome3(){

    var selecionaTexto = document.querySelector("#nome3");
    var texto = selecionaTexto.textContent;

    var campoRecebe = document.querySelector("#recebe");
    campoRecebe.textContent = texto;

    console.log(texto);

};
function nome4(){

    var selecionaTexto = document.querySelector("#nome4");
    var texto = selecionaTexto.textContent;

    var campoRecebe = document.querySelector("#recebe");
    campoRecebe.textContent = texto;

    console.log(texto);

};

1 Resposta 1

1

Podes fazer isso de maneira mais organizada procurando padrões no código.

Podes por exemplo dar a mesma classe a todos os elementos que queres que tenham essa funcionalidade (exemplo em baixo). Podes também fazer de outras maneiras, filtrando elementos com um certo ID ou parte de ID. Mas depois a lógica é a mesma: adicionas um auscultador de evento ao elemento e o this dentro dessa função é o elemento clicado.

var nomes = document.querySelectorAll('.nome');
for (var i = 0; i < nomes.length; i++) {
    nomes[i].addEventListener('click', buscarNome)
}

function buscarNome() {
    var texto = this.textContent;
    var campoRecebe = document.querySelector("#recebe");
    campoRecebe.textContent = texto;
    console.log(texto);
}

Exemplo: https://jsfiddle.net/su4kxrmz/

Quando fazes mudanças deste género, para evitar repetição de código diz-se tornar o código DRY

Você deve fazer log-in para responder a esta pergunta.

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