Show Div and hide others that are visible with 2 arrays in JavaScript

Question

Show Div and hide others that are visible with 2 arrays in JavaScript

Navigation

#1 by (0 votes)

-2

I have the following code based on JavaScript :

var perguntas = new Array();
var respostas = new Array();
var totalPerguntas = 2;

perguntas[1] = "Pergunta um";
respostas[1] = "Resposta um";
perguntas[2] = "Pergunta dois";
respostas[2] = "Resposta dois";

function listaPerguntas() {

    for (var i = 1; i <= totalPerguntas; i++) {
        var frasePergunta = perguntas[i];
        var fraseResposta = respostas[i];

        document.write("<div id='classPergunta'><div id='frasePergunta'><h2>" + frasePergunta + "</h2></div>" + "<br>" + "<div id='fraseResposta'><h4>" + fraseResposta + "</h4></div></div>" + "<br>");

    }
}

function mudarEstado() {
    document.getElementById("classPergunta").style.display = "block";
}

document.write(listaPerguntas())
document.write("<br><br><button type='button' onclick='mudarEstado('perguntas[i].respostas[i]')' >Next</button>");

Basically, it gets the Array and returns the questions stored in them at the click of the button. What I'm looking for is a solution to make a set of questions and answers that to the click it to advance to the next question and hide the other divs so that it is applied the TWO ARRAYS , I found a code that basically does which I would like, but a bit different and just with an array, so I could not proceed. I accept constructive criticism because I am training!

javascript array

asked by anonymous 22.10.2018 / 15:27

1 answer

Comparison between month and year App to display Logcat on android devices [closed]

score 0 · Answer 1

The structure of your code is a bit wrong, it will be complicated for you to achieve a suitable solution with this structure, come on:

First you are writing the result of the listaPerguntas() function again, since it is already using document.write , that is, you are writing the printed HTML value twice.
There are divs with the same name id , ID's in HTML elements are unique, so they should be used in only one element.
In the way you are using arrays: perguntas[1] e respostas[1] you will always lose the first array item, since arrays start at 0. eg: perguntas[0] = Primeira Pergunta
The total of questions should be related to the size of the array, rather than being the static total in a variable. Use perguntas.length instead of total_questions. So when a new question is added to your array, the total will also be updated.
It is good practice to add the answers within an object of the same question, so you only loop through one array instead of two.

The solution to your problem is to create a function that lists the questions and an accountant to page the questions. Basically like this:

let perguntas = new Array();
let respostas = new Array();
let contador = -1;

const container = document.querySelector('.perguntas-respostas');

perguntas.push( { pergunta: 'Pergunta um', respostas: ['Resposta 1' , 'Resposta 1-2'] } );
perguntas.push( { pergunta: 'Pergunta dois', respostas: ['Resposta 2' , 'Resposta 2-1'] } );

const listaPerguntas = () => { 
 perguntas.forEach( (val) => { 
   // para performance é melhor criar elements, mas aqui pro exemplo vamos fazer com strings
   let str = '<div class="pergunta"><strong>' + val.pergunta + '</strong><br />';
   val.respostas.forEach( (res) => str += (res + '<br />') );
   str += '</div>';
   container.innerHTML += str;
 });
}

listaPerguntas();

const mudaEstado = () => { 
 if(contador === (perguntas.length-1)) contador = 0;
 else if(contador >= -1) contador++;

 showPergunta();
}

const showPergunta = () => { 
 const perguntasEl = container.querySelectorAll('.pergunta');
 console.log(contador);
 //console.log(perguntasEl);
 perguntasEl.forEach( (v) => v.style.opacity = .2 );
 perguntasEl[contador].style.opacity = 1;
}

mudaEstado();

.pergunta { 
 margin-bottom: 20px;
 opacity: 0.2;
}

<button type="button" onClick="mudaEstado()">Next</button>
<div class="perguntas-respostas">

</div>

I hope I have helped.