CODEWITHSUNDEEP
javascriptobjectevent-handlingcloneelement
Thomas Bengtsson
Thomas Bengtsson

Reputation: 399

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

Upvotes: 1

Views: 454

Answers (2)

glassblowerscat
glassblowerscat

Reputation: 89

You are adding your eventListener to a variable called box, which you set at the top of your function. At the time you set this variable, your cloned box does not exist, so it is not included in the querySelectorAll that creates the box variable, and is therefore not getting the eventListener.

I haven't examined your code in great detail, but I would imagine you could simply re-set box in the cloneSelected function after your myContent.appendChild.

Upvotes: 0

Eponyme Web
Eponyme Web

Reputation: 976

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++;            
    }
}

Upvotes: 1

Related Questions