Xtykutl

I have a website that has loads of questions. When you click the question, you get the answer. My code looks a little like this:

$(document).on('click','#panel1question1',function(){

    if (oneone % 2 == 0) {

        $(this).html(answerarraylvl1_js[2]);

        oneone++;

        console.log(oneone);}

        else {

        $(this).html(questionarraylvl1_js[2]);

        oneone++;

        console.log(oneone);

        }



});

The problem is that I can have upto 75 questions displayed.

I don't want to have to copy and paste a snippet for each of those div elements. It's going to generate a massive file. I also don't want to have a toggle variable for each question. I'd end up with a lot of variables.

I do however, have naming conventions. Is there a way to say : do this code for panelxquestiony and specify x and y?

EDIT: A little more detail. The code is supposed to run this site (http://ticktockmaths.co.uk/ticktockquestions/index.php?id=1&sid=5 -> practise questions). The user gets some questions (from an array) and they can click to see an answer (from an array).

The user will be able to add questions to the screen (up to a maximum of about 20).

I want every question to have a on click listener. So the next question would need to have the following code.

$(document).on('click','#panel1question2',function(){

    if (oneone % 2 == 0) {

        $(this).html('<strong>2. </strong>' + answerarraylvl1_js[3]);

        oneone++;

        console.log(oneone);}

        else {

        $(this).html('<strong>2. </strong>' + questionarraylvl1_js[3]);

        oneone++;

        console.log(oneone);

        }



});

I was wondering if I could do something like

$(document).on('click','#panel1questionN',function(){

    if (oneone % 2 == 0) {

        $(this).html('<strong>N. </strong>' + answerarraylvl1_js[N+1]);

        NN++;

        console.log(NN);}

        else {

        $(this).html('<strong>N. </strong>' + questionarraylvl1_js[N+1]);

        NN++;

        console.log(NN);

        }



});

for N where N is the number of questions the user has asked for

While you do need to store the question's id in the question element somehow (edit: or determine it inside the click handler), using lots of ids with running numbers is a waste.

Here's example code where the id and the current state is stored in the question element's dataset. When the questions element is clicked, a single handler function reads the state and index, changes the state, then sets the text accordingly:

const questionarraylvl1_js = ["Question 1", "Question 2", "Question 3"];

const answerarraylvl1_js = ["Answer 1", "Answer 2", "Answer 3"];



// add click handler

$(document).on("click", "#questions span", function () {

  // question index

  var i = $(this).data("index");

  // question? (or answer?)

  var is_q = $(this).data("is_q");

  // change it

  is_q = !is_q;

  // set new text

  $(this).html(is_q ? questionarraylvl1_js[i] : answerarraylvl1_js[i]).data({ is_q });

});



// build question HTML

questionarraylvl1_js.forEach((q, i) => {

  // store index and id in element

  var $q = $("<span>").text(q).data({ index: i, is_q: true });

  $(questions).append($("<p>").append($("<strong>").text(i + 1 + ". ")).append($q));

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="questions"></div>

So use data attributes to determine what is clicked. You can than use that attribute to get the number.

$(document).on('click','[data-num]',function (){

  var button = $(this);

  var num = +button.data("num")

  console.log(num)

  button.text(num)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-num="1">Button</button>

<button data-num="2">Button</button>

<button data-num="3">Button</button>

<button data-num="4">Button</button>

<button data-num="5">Button</button>

You can simply use a for loop:

for(let i=0; i<questions.length; i++){

  $(this).html(questions[i]+answers[i])

}

Here, I'll suppose questions and answers are array of html elements containing questions and answers respectively.

However, we don't know if this answer will satisfy your question because of insufficient query from the post. But I hope, it will be a little help at least for you to go in advance.

As per your update, I can think that you want to achieve like this:

$(document).on('click','.panel1questionN',function(){

 // giving a common class ^^ instead

   var NN = $(this).index(); // if you have parent element

   // var NN = $(this).index(this); // if buttons are anywhere

   // but be sure this class only exists for such buttons only

    if (oneone % 2 == 0) {

        $(this).html('<strong>' + NN + '</strong>' + answerarraylvl1_js[NN+1]);

        NN++;

        console.log(NN);}

        else {

        $(this).html('<strong>' + NN + '</strong>' + questionarraylvl1_js[NN+1]);

        NN++;

        console.log(NN);

        }



});

But I'm still not sure if you want to achieve like this. Please let us know if you need anything further that could be a help for you.

Make two delegate event bindings, and toggle a class to control which one executes.

$(document).on('click','#panel1question1:not(.answer)',function(){

  $(this).addClass('answer').html(answerarraylvl1_js[2]);

});



$(document).on('click','#panel1question1.answer',function(){

  $(this).removeClass('answer').html(questionarraylvl1_js[2]);

});