Adding div elements to an array on button click

Question

The page I am working on contains a div element with the id "exam", a button with the id of "copy" and a second button with the id "array". The div element contains the text "Exam 1" and when the "copy" button is clicked, this div is duplicated each time the button is clicked. The "array" button is supposed to add each of these "exam" divs to an array and use the alert function to display the length of the array. I can't figure out how to go about having these div elements added to an array when the button is clicked.

Here is the HTML I have so far (this also includes Javascript and CSS):

<html>
    <head>
        <title>Exam 1 Tanner Taylor</title>
        <style type="text/css">
            #exam {
                border: 2px double black;
            }
        </style>
    </head>

    <body>
        <div id="exam">
        Exam 1
        </div>
        <input type="button" id="copy" value="Make Copy" onclick="copy()" >
        <input type="button" id="array" value="Get Array" onclick="makeArray()">
    </body>

    <script type = "text/javascript">
            var TTi = 0;
            var TToriginal = document.getElementById("exam");
            function copy() {
                var TTclone = TToriginal.cloneNode(true);
                TTclone.id = "exam";
                TToriginal.parentNode.appendChild(TTclone);
            }

            function makeArray() {
                var TTexam[];
                for(var TTindex = 0; TTindex < TTexam.length; ++TTindex) {

                }
            }   
        </script>
</html>

There's more to it, but I removed the parts that didn't actually deal with this problem. As you can see, I've started the makeArray() function, but wasn't really sure where to go from there, I feel like this is the function I need the most help with. Any suggestions?

var TTexam[]; is a syntax error, should be var TTexam = [];, and you create that array everytime you click the button, so when trying to iterate over the array on the next line, it's empty ? — adeneo
– adeneo, Commented Sep 27, 2014 at 1:22
Ah ok, so to prevent the array from being recreated every time the button is clicked could I just declare the array outside the function? — user2932587
– user2932587, Commented Sep 27, 2014 at 1:35

JME · Accepted Answer · 2014-09-27 01:35:57Z

I would add a class name to the exam div and use getElementsByClassName() to get all the divs with that class.

HTML:

<body>
    <div id="exam" class="exam">
        Exam 1
    </div>
    <input type="button" id="copy" value="Make Copy" onclick="makeCopy()" />
    <input type="button" id="array" value="Get Array" onclick="makeArray()" />
</body>

JS:

var TTi = 0;
var TToriginal = document.getElementById("exam");

function makeCopy() {
    console.log('copy');
    var TTclone = TToriginal.cloneNode(true);
    TToriginal.parentNode.appendChild(TTclone);
}

function makeArray() {
    var TTexam = document.getElementsByClassName("exam");
    alert(TTexam.length);
    for(var TTindex = 0; TTindex < TTexam.length; ++TTindex) {
        console.log(TTexam[TTindex]);        
    }
}

You can replace the alert() and console.log() with whatever business logic you want.

Check out a working fiddle at http://jsfiddle.net/JohnnyEstilles/w6fdm5th/.

matthias_h · Accepted Answer · 2014-09-27 02:16:32Z

Some suggestions and something you maybe can proceed from: First, id-attributes should be unique, so it'd be better to use classnames:

<div class="exam">Exam 1</div>
<input type="button" id="copy" value="Make Copy" onclick="copy()">
<input type="button" id="array" value="Get Array" onclick="makeArray()">

For the script:

var TTexam = [];

function copy() {
   var TToriginal = document.getElementsByClassName("exam")[0];
   var TTclone = TToriginal.cloneNode(true);
   TToriginal.parentNode.appendChild(TTclone);
}

function makeArray() {
   alert(TTexam.length);
   for (var TTindex = 0; TTindex < document.getElementsByClassName("exam").length;     TTindex++)
   {
     TTexam.push(document.getElementsByClassName("exam")[TTindex]);
   }
   alert(TTexam.length);
}

That's just for starters. TTexam is an array defined global, just in case it should be accessible for both functions. But question is really what exactly you want to do - if you want to generate the array only once when you finished adding divs or if it should be possible to generate a new array containing all divs each time you click 'Get Array'. Then the array should be defined in the makeArray()-function.
To avoid having the same divs as doubles in the array in case of global definition, it would e.g. be possible to add a data-attribute with a counter to each newly created div and, when creating the array a second time, only add the new ones. Or it would be possible to add each new div to the array when it's added using TTexam.push(TTclone); in the copy()-function.

Collectives™ on Stack Overflow

Adding div elements to an array on button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related