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

Question

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, he takes the Array and returns the questions stored in them at the click of the button. What I’m looking for is a solution to ask a set of questions and answers that in the click it moves to the next question and hide the other divs so that this is applied to the TWO ARRAYS, I found a code that basically does what I’d like, but a little different and just with an array, so I couldn’t go on. I accept constructive criticism because I’m training !

Answer 1

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

• First you are writing function result listaPerguntas() again, since the same is already ultilizing 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 last in only 1 element.
• The way you’re using arrays: perguntas[1] e respostas[1] you will always lose the first item of the array because arrays start at 0. ex: 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 into an array instead of two.

The solution to your problem is to create a function that lists the questions and a counter to pay between 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’ve helped.