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

JavaScript

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

Gustavo Lins

Curtidas 0

Melhor post

Giuliano

Giuliano

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.*/
}
}
}



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.
GOSTEI 1

Mais Respostas

Gustavo Lins

Gustavo Lins

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!
<!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])
        }
    }
}
GOSTEI 0
POSTAR