Search code examples
javascriptobjectevent-handlingcloneelement

Javascript - cloned element not responding to click

I have a problem when I have cloned an element, that element doesn't respond to onclick. I want to remove the class 'selected' for that element and other cloned element. I can still add and remove that class on the original element but not the cloned one. When you press 't' you clone the selected object(s). Them in turn should be selected and unselected on mouseclick.

I know there are some similar questions out there but they all use jquery which I'm not interested in of helped by.

I have a fiddle with the whole code here: http://jsfiddle.net/oveht2zr/

HTML:

<!doctype html>
    <html>
    <head>
        <title>Sandbox</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>

    <body id="content">
        <h1>My Sandbox</h1>

        <div id="box1" class="box">
        </div>

        <script src="js/main.js"></script>
    </body>
</html>

Affected JS:

let myContent = document.querySelector('#content');
let box = document.querySelector('.box');

let z = 2;

function cloneSelected() {
    let all = document.querySelectorAll('.selected');
    let i;

    for (i = 0; i < all.length; i++) {
        let clone = all[i].cloneNode(true);
        clone.style.top = Math.floor(Math.random() * browserHeight) + 'px';
        clone.style.left = Math.floor(Math.random() * browserWidth) + 'px';
        clone.setAttribute('id', 'box' + z);
        clone.style.zIndex = z;
        myContent.appendChild(clone);
        z++;            
    }
}

document.addEventListener('keydown', function(event) {
    let key = event.key;

    switch(key) {
        case 'e':
            circle();
            break;
        case 'q':
            resizeUp();
            break;
        case 'w':
            resizeDown();
            break;
        case 'r':
            changeColor();
            break;
        case 't':
            cloneSelected();
            break;
    }

    box.style.top = (browserHeight / 2) - (boxHeight / 2) + 'px';
    box.style.left = (browserWidth / 2) - (boxWidth / 2) + 'px';
});

Regards

Solution

  • In your cloneSelected function you should subscribe the clone to the click

    function cloneSelected() {
    let all = document.querySelectorAll('.selected');
    let i;

    for (i = 0; i < all.length; i++) {
        let clone = all[i].cloneNode(true);
        clone.style.top = Math.floor(Math.random() * browserHeight) + 'px';
        clone.style.left = Math.floor(Math.random() * browserWidth) + 'px';
        clone.setAttribute('id', 'box' + z);
        clone.style.zIndex = z;
        clone.addEventListener('click', function(event) {
            if (clone.classList.contains('selected')) {
                event.target.classList.remove('selected');
            } else {
                event.target.classList.add('selected');
            }})
        myContent.appendChild(clone);
        z++;            
    }
}