How can I make this Javascript code more concise?

Question

fairly new to coding and I'm building out a connect four game. The code I pasted allows me to drag and drop the red & yellow tokens to the cells of the top row of the game board. This works, but before I move on to the next step I would like to know if there is a less "verbose" way that I could have gone about this? A more professional approach?

var dragYellow = document.getElementById("yellowToken1");
var dragRed = document.getElementById("redToken1");   
var dropLoc10 = document.getElementById("10");   
var dropLoc11 = document.getElementById("11");
var dropLoc12 = document.getElementById("12");
var dropLoc13 = document.getElementById("13");
var dropLoc14 = document.getElementById("14");
var dropLoc15 = document.getElementById("15");
var dropLoc16 = document.getElementById("16");

dragYellow.ondragstart = function(evt) {  
    evt.dataTransfer.setData("key", "yellowToken1");
}

dragRed.ondragstart = function(evt) {  
    evt.dataTransfer.setData("key", "redToken1");
}

dropLoc10.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc11.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc12.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc13.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc14.ondragover = function(evt) {    
    evt.preventDefault();                       
} 

dropLoc15.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc16.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc10.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc10.appendChild(myNewElement);                    

}

dropLoc11.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc11.appendChild(myNewElement);                    

}

dropLoc12.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc12.appendChild(myNewElement);                    

}

dropLoc13.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc13.appendChild(myNewElement);                    

}

dropLoc14.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc14.appendChild(myNewElement);                    

}

dropLoc15.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc15.appendChild(myNewElement);                    

}

dropLoc16.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc16.appendChild(myNewElement);                    

}

see sharper · Accepted Answer · 2019-02-15 05:42:48Z

1

Something like:

    var dragYellow = document.getElementById("yellowToken1");
    var dragRed = document.getElementById("redToken1");  
    var dropLoc = [];
    for (i = 10; i < 17; i++) {
        dropLoc[i] = document.getElementById(i.toString());
        dropLoc[i].ondragover = function(evt) {    
            evt.preventDefault();                       
        }
        dropLoc[i].ondrop = function(evt) {                  
            evt.preventDefault();             
            var dropItem = evt.dataTransfer.getData("key");  
            var myElement = document.getElementById(dropItem);   
            var myNewElement = document.createElement("img");   
            myNewElement.src = myElement.src;                   
            dropLoc[i].appendChild(myNewElement);                    

        }
    } 


    dragYellow.ondragstart = function(evt) {  
        evt.dataTransfer.setData("key", "yellowToken1");
    }

    dragRed.ondragstart = function(evt) {  
        evt.dataTransfer.setData("key", "redToken1");
    }

You know the term DRY (Don't Repeat Yourself)? If you find yourself writing names with numbers as suffixes, it's a massive hint to use an array instead!

answered Feb 15, 2019 at 5:42

see sharper

12.2k8 gold badges53 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeff S Over a year ago

I pasted this in for a test and received "Uncaught TypeError: Cannot read property 'appendChild' of undefined at HTMLTableCellElement.dropLoc. (anonymous function).ondrop". It points to this line(dropLoc[i].appendChild(myNewElement);

Jeff S Over a year ago

got it worked out! At someone's suggestion I replaced dropLoc[i].appendChild(myNewElement); with evt.currentTarget.appendChild(myNewElement); and it all works now. Thank you

varun agarwal · Accepted Answer · 2019-02-15 05:44:55Z

1

I'd suggest you add a class to the object's you want to drag and the drop locations. For example: Your drop elements could have a class (let's say drop-location) and you would simply do -

var dropLocs = document.querySelector(".drop-location");

dropLocs.ondragover = function(evt) {    
    evt.preventDefault();                 
}

dropLocs.ondrop = function(evt) {                  
    // Drop logic here
}

Since it's a class selector, you will have to figure out the target object (evt.target) and append the newly created img element to that only.

answered Feb 15, 2019 at 5:44

varun agarwal

1,5098 silver badges10 bronze badges

Comments

Jeff S · Accepted Answer · 2019-02-15 23:29:58Z

for anyone interested, see sharper's code works but I had to change one line

var dragYellow = document.getElementById('yellowToken1');
    var dragRed = document.getElementById('redToken1');  
    var dropLoc = [];
    for (i = 10; i < 17; i++) {
        dropLoc[i] = document.getElementById(i.toString());

        dropLoc[i].ondragover = function(evt) {    
            evt.preventDefault(); 
            console.log('dragging over');                      
        }
        dropLoc[i].ondrop = function(evt) {                  
            evt.preventDefault();             
            var dropItem = evt.dataTransfer.getData('key');  
            var myElement = document.getElementById(dropItem);   
            var myNewElement = document.createElement('img');   
            myNewElement.src = myElement.src;                   
            evt.currentTarget.appendChild(myNewElement);                    
        }
    } 


    dragYellow.ondragstart = function(evt) {  
        evt.dataTransfer.setData('key', 'yellowToken1');
        console.log("dragging");
    }

    dragRed.ondragstart = function(evt) {  
        evt.dataTransfer.setData('key', 'redToken1');
        console.log('dragging');
    }

Collectives™ on Stack Overflow

How can I make this Javascript code more concise?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related