JavaScript - Como apresentar os dados de um mesmo vetor em mais de um elemento?

29/05/2020

Iniciando em JS! Meu desafio seria preencher um vetor com uma tabuada a partir de um n�mero digitado pelo usu�rio e depois imprimir 2 vezes a mesma tabuada s� que em elementos HTML Select diferentes. O resultado que estou tendo � a apresenta��o da tabuada apenas no 2� elemento HTML Select "areaResultado2". A tabuada s� � apresentada no 1� elemento HTML Select "areaResultado" se eu apagar o comando: areaResultado2.appendChild(vetorResultado[i]) de dentro do for de apresenta��o. Eu n�o estou conseguindo utilizar os dados do mesmo Vetor em mais de 1 elemento. Segue abaixo meu c�digo: Obrigado!

function gerarTabuada() {
var numTxt = window.document.getElementById('numero')
var areaResultado = window.document.getElementById('select-resultado')
var areaResultado2 = window.document.getElementById('select-resultado2')

if (numTxt.value.length < 1) {
window.alert('O CAMPO "N�MERO" EST� VAZIO!')
} else {
var num = Number(numTxt.value)
var vetorResultado = []

areaResultado.innerHTML = ``
areaResultado2.innerHTML = ``

for (var i = 0; i < 10; i++) {
var opt = window.document.createElement('option')
opt.innerHTML = `$ x ${i+1} = ${num * (i+1)}`
vetorResultado[i] = opt
}

for (var i = 0; i < 10; i++) {
areaResultado.appendChild(vetorResultado[i])
areaResultado2.appendChild(vetorResultado[i]) /*Se eu retirar essa linha, a tabuada � apresentada no objeto da linha acima "areaResultado", sen�o a tabuada s� aparece no objeto "areaResultado2", e o objeto "areaResultado" apresenta em tela o elemento select vazio.*/
}
}
}

Gustavo Lins

Curtir t�pico + 0

Responder

Post mais votado

29/05/2020

Boa noite, voc� poderia colocar todo c�digo? (HTML + JS) E use as tags do forum, tornando o c�digo mais leg�vel.

Exemplo:

function gerarTabuada() {
    var numTxt = window.document.getElementById('numero')
    var areaResultado = window.document.getElementById('select-resultado')
    var areaResultado2 = window.document.getElementById('select-resultado2')

    if (numTxt.value.length < 1) {
        window.alert('O CAMPO "N�MERO" EST� VAZIO!')
    } else {
        var num = Number(numTxt.value)
        var vetorResultado = []
        
        areaResultado.innerHTML = ``
        areaResultado2.innerHTML = ``

        for (var i = 0; i < 10; i++) {
            var opt = window.document.createElement('option')
            opt.innerHTML = `$ x ${i+1} = ${num * (i+1)}`
            vetorResultado[i] = opt
        }

        for (var i = 0; i < 10; i++) {
            areaResultado.appendChild(vetorResultado[i])
            areaResultado2.appendChild(vetorResultado[i]) /*Se eu retirar essa linha, a tabuada � apresentada no objeto da linha acima "areaResultado", sen�o a tabuada s� aparece no objeto "areaResultado2", e o objeto "areaResultado" apresenta em tela o elemento select vazio.*/
        }
    }

Espero seu retorno para assim lhe ajudar.

Giuliano

Responder

Gostei + 1

Mais Posts

30/05/2020

Gustavo Lins

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Treinando For ()</title>
    <link rel="stylesheet" href="estilo.css">
</head>

<body>

    <header>
        <h1>Tabuada</h1>
    </header>

    <section>
        <div id="formulario">
           N�mero: <input type="number" id="numero"> <button onclick="gerarTabuada()">Gerar</button>
        </div>
        <div id="resultado">
            <select id="select-resultado" size="10"></select>
        </div>
        <div id="teste">
            <select id="select-resultado2" size="10"></select>
        </div>
    </section>

    <footer>
        <p>© Gugga Lins</p>
    </footer>

    <script src="formaOtimizadaNaoFunciona.js"></script>

</body>

</html>

function gerarTabuada() {
    var numTxt = window.document.getElementById('numero')
    var areaResultado = window.document.getElementById('select-resultado')
    var areaResultado2 = window.document.getElementById('select-resultado2')

    if (numTxt.value.length < 1) {
        window.alert('O CAMPO "N�MERO" EST� VAZIO!')
    } else {
        var num = Number(numTxt.value)
        var vetorResultado = []
                
        areaResultado.innerHTML = ``
        areaResultado2.innerHTML = ``

        for (var i = 0; i < 10; i++) {
            var opt = window.document.createElement('option')
            opt.innerHTML = `$ x ${i+1} = ${num * (i+1)}`
            vetorResultado[i] = opt
        }

        for (var i = 0; i < 10; i++) {
            areaResultado.appendChild(vetorResultado[i])
            areaResultado2.appendChild(vetorResultado[i])
        }
    }
}

Responder

Gostei + 0