Chopsticks game using HTML and JavaScript

Is there any way to simplify this code with loops or anything? I'm a beginner at JavaScript and my code is horrible. Please don't tell me to convert to jQuery or anything.

```
function dragLeftdropLeft1(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft1').style.display = "none";
document.getElementById('topLeft2').style.display = "block";
}
function dragLeftdropLeft2(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft2').style.display = "none";
document.getElementById('topLeft3').style.display = "block";
}
function dragLeftdropLeft3(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft3').style.display = "none";
document.getElementById('topLeft4').style.display = "block";
}
function dragLeftdropLeft4(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft4').style.display = "none";
document.getElementById('topLeft5').style.display = "block";
}
function dragLeftdropLeft5(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topLeft5').style.display = "none";
document.getElementById('topLeft1').style.display = "block";
}
function dragLeftdropRight1(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");
document.getElementById('topRight1').style.display = "none";
document.getElementById('topRight2').style.display = "block";
}
function dragLeftdropRight2(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Left");

Abstract out the parts that are common to all of your functions. For instance:

function processEvent(evt, hideElem, showElem) {
    evt.preventDefault();
    document.getElementById(hideElem).style.display = "none";
    document.getElementById(showElem).style.display = "block";
    evt.dataTransfer.getData("Left");  //not sure why you were calling this, but I'll leave it in
}

Then you can implement your other functions like:

function dragLeftdropLeft1(ev) {
    processEvent(ev, 'topLeft1', 'topLeft2');
}

// and so on...

Note that if the nodes you are showing and hiding are adjacent in the DOM and one of them is the source of the event, you could probably rewrite the whole thing to work using a single function that takes advantage of event.target and element.nextSibling.

...or convert to jQuery :p.

StackExchange Code Review Q#21218, answer score: 6