Append dynamic div just once and a JSFiddle issue

Question

This code is doing everything I want the first time a table node is clicked (image is added etc). However, when a second node is clicked the choices appear again, but twice and so on. Is there a way for me to append the elements just once. I have created a fiddle of the problem. It is working in Chrome, but not on the JSFiddle itself. Perhaps I am doing something incorrectly. http://jsfiddle.net/Inkers/NyxCu Thanks.

    <html>
 <head>
    <meta name = "viewport" content="width=device-width, height= device-height, initial-scale=1.0, maximum-scale=1.0"/>
    <meta charset=UTF-8"/>
    <title>Whatever it is going to be</title>
      <script type="text/javascript" charset="utf-8" src="fiddle.js"></script>
 </head>

    <body>
  <h3>Create a new table</h3>
  <div id="holdTable">
    <form id="chartInput">
        <label for="taskname">Task</label>
        <input id="taskname" type="text" placeholder="Blah blah"><br>

        <label for="days">How many days</label>
        <input id="days" name="days" type="number" min="1" max="7"><br>

        <label for="times">How many times a day</label>
        <input id="times" name="times" type="number" min="1" max="4"> <br>

        <input id="createChart" type="button" value="Make the table" onClick="makeChart();"> <br>

    </form>
    </div>
   </body>
</html>



     var makeChart = function () {
var table = document.createElement('table'),
    taskName = document.getElementById('taskname').value,
    header = document.createElement('th'),
    numDays = document.getElementById('days').value, //columns
    howOften = document.getElementById('times').value, //rows
    row,
    r,
    col,
    c;

header.innerHTML = taskName;
table.appendChild(header);

header.innerHTML = taskName;
table.appendChild(header);

function addImage(col) {
    var img = new Image();
    img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
    col.appendChild(img);
    img.onclick = function () {
        var myImages = new Array();
        myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
        myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
        for (var i = 0; i < myImages.length; i++) {
            var allImages = new Image();
            allImages.src = myImages[i];

            var my_div = document.createElement("div");
            my_div.id = "showPics";
            document.body.appendChild(my_div);
            var newList = document.createElement("ul");
            newList.appendChild(allImages);
            my_div = document.getElementById("showPics");
            my_div.appendChild(newList);
            my_div.style.display = 'block';

            allImages.onclick = function (e) {
                img.src = e.target.src;
                my_div.style.display = 'none';
            };
        }
    };
};
for (r = 0; r < howOften; r++) {
    row = table.insertRow(-1);
    for (c = 0; c < numDays; c++) {
        col = row.insertCell(-1);
        addImage(col);
    }
}
document.getElementById('holdTable').appendChild(table);
};

Take out the onload wrapper from jsfiddle and it will append. http://jsfiddle.net/NyxCu/2/ — Fabrício Matté, Jan 05 '13 at 02:30

The Alpha · Answer 1 · 2013-01-05T02:51:16.117

1

Is there a way for me to append the elements just once ?

Yes. Just put following line at the end of your function, so it'll work only once

img.onclick = function() {
    // other code
    img.onclick=null;
}

Example1.

Or maybe you want this for the button

var makeChart = function() {
    // other code
    document.getElementById('createChart').onclick=null;
}

Example2

edited Jan 05 '13 at 02:51

answered Jan 05 '13 at 02:35

The Alpha

143,660
29
287
307

1

Thanks very much Sheikh Heera. That solves the problem of creating the table twice. However, within the table I also have an img.onclick event which brings up the images that the user can fill into the different nodes. When two nodes are clicked it appears twice. Is there a way for me to my_div append just the first time a node is clicked? – Inkers Jan 05 '13 at 02:48
1

WELCOME, I've updated my answer for both `image.onclick` and the `button.onclick`. – The Alpha Jan 05 '13 at 02:54
Thanks again. The img.onclick=null; doesn't seem to be stopping the div from appearing twice when a second separate node is clicked. Maybe I'm doing something incorrectly? – Inkers Jan 05 '13 at 03:06
OK so the issue, as per question, is largely resolved in that the div only appears once per click and hides/shows onclick. For a lot of people the solution may be obvious but, for those learning it was mainly down to the order or my code, variables etc. In solving that issue I have thrown up a new one (learning Javascript is frustrating isn't it?). You can see the new problem and updated code here http://stackoverflow.com/questions/14172370/passing-image-array-values-and-changing-image-source-onclick. – Inkers Jan 05 '13 at 13:55
It's really very hard to understand what you are trying to do. I didn't get it at all. Maybe it would be better if you can explain what is your goal. – The Alpha Jan 05 '13 at 15:02

Append dynamic div just once and a JSFiddle issue

1 Answers1

Is there a way for me to append the elements just once ?

Linked