2 Replies - 145 Views - Last Post: 19 May 2019 - 01:17 PM

#1 tarun1980   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 19-May 19

How to give unique ids to changing divs?

Posted 19 May 2019 - 02:26 AM

I want to give each div a unique id but the first displayed divs are replaced by totally different divs on click; so I am unable to give ids to each div. I want that divs should remain same and only the values should change on click. Presently the ids that I have given are removed when next values are displayed on click. How can I achieve that? Thanks for your suggestions.
<button id="btnNext" onclick="showOptions();"> Options </button>

<div id="container"> </div>

 var antonyms = [

    {
        question: "soft",

        options: ["dark", "white", "heavy", "hard", "down", "pretty", "butter", "cotton"],

        answer: "hard"
    },

    {
        question: "beautiful",

        options: ["pretty", "ugly", "handsome", "wonderful", "up", "high", "cheerful", "black"],

        answer: "ugly"

    }

    ]


    function showOptions(q)

    {

    let qHtml = '<div class="option">' + q.question + '</div>';

    qHtml += q.options.map(o => '<div class="option">' + o + '</div>').join("");

    return qHtml;

    }


    let container = document.getElementById("container");

    let button = document.getElementById("btnNext");

    let qIdx = 0;

    container.innerHTML = showOptions(antonyms[qIdx]);

    button.addEventListener("click", function()


    {

        qIdx += 1;

        if (qIdx < antonyms.length)

            container.innerHTML = showOptions(antonyms[qIdx]);

        else

            button.disabled = true;

    });


   $('#container div').each(function(eq, el) {

    el = $(el);

    if (typeof(el.attr('id')) === "undefined") {

        el.attr('id', 'box-' + eq);

    }

   });
:code:

This post has been edited by modi123_1: 19 May 2019 - 08:42 AM
Reason for edit:: In the future please use the [code] tag button in the editor


Is This A Good Question/Topic? 0
  • +

Replies To: How to give unique ids to changing divs?

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5417
  • View blog
  • Posts: 14,328
  • Joined: 18-April 07

Re: How to give unique ids to changing divs?

Posted 19 May 2019 - 09:43 AM

Why are you replacing the whole div instead of just changing the contents of the div? Do know you can also read and write attributes to an element in Javascript too. So you could read the ID attribute, replace it and then set the ID attribute of the new element. Or better yet, don't replace the entire element, just its contents. You can do that using innerHTML.

Not much magic here. :)
Was This Post Helpful? 1
  • +
  • -

#3 kutchbhi   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 5
  • Joined: 18-December 10

Re: How to give unique ids to changing divs?

Posted 19 May 2019 - 01:17 PM

            container.innerHTML = showOptions(antonyms[qIdx]);

Above sets the html of the whole container element. It Doesn't append , nor change one child element of container.

What you need to do: As already mentioned find 'id' of div in sequence, then use html() method to change the whole html of only one child div. Like this:
[code]('#adiv').html(newHTML)[code]

[code]qIdx += 1;[code]
Arrays start from 0. Your code above changes qIdx to 1 before 0th element is processed. This line should come at end of function.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1