Question

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");
            document.getElementById('topRight2').style.display = "none";
            document.getElementById('topRight3').style.display = "block";
        }
        function dragLeftdropRight3(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Left");
            document.getElementById('topRight3').style.display = "none";
            document.getElementById('topRight4').style.display = "block";
        }
        function dragLeftdropRight4(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Left");
            document.getElementById('topRight4').style.display = "none";
            document.getElementById('topRight5').style.display = "block";
        }
        function dragLeftdropRight5(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Left");
            document.getElementById('topRight5').style.display = "none";
            document.getElementById('topRight1').style.display = "block";
        }







        function dragRightdropLeft1(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topLeft1').style.display = "none";
            document.getElementById('topLeft2').style.display = "block";
        }
        function dragRightdropLeft2(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topLeft2').style.display = "none";
            document.getElementById('topLeft3').style.display = "block";
        }
        function dragRightdropLeft3(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topLeft3').style.display = "none";
            document.getElementById('topLeft4').style.display = "block";
        }
        function dragRightdropLeft4(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topLeft4').style.display = "none";
            document.getElementById('topLeft5').style.display = "block";
        }
        function dragRightdropLeft5(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topLeft5').style.display = "none";
            document.getElementById('topLeft1').style.display = "block";
        }







        function dragRightdropRight1(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topRight1').style.display = "none";
            document.getElementById('topRight2').style.display = "block";
        }
        function dragRightdropRight2(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topRight2').style.display = "none";
            document.getElementById('topRight3').style.display = "block";
        }
        function dragRightdropRight3(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topRight3').style.display = "none";
            document.getElementById('topRight4').style.display = "block";
        }
        function dragRightdropRight4(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topRight4').style.display = "none";
            document.getElementById('topRight5').style.display = "block";
        }
        function dragRightdropRight5(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Right");
            document.getElementById('topRight5').style.display = "none";
            document.getElementById('topRight1').style.display = "block";
        }

If you want to see the code in action, you can see the full HTML code at http://thomaswd.com/chopsticks. I am trying to make a chopsticks game using HTML and javascript.

Thanks!

Answer 1

well for starters if you have a function

 function some_meaningful_name(ev, hand, toNone, toBlock) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData(hand);
            document.getElementById(toNone).style.display = "none";
            document.getElementById(toBlock).style.display = "block";
        }

you can call it like

some_meaningful_name('Left', 'topRight5', 'topRight1');

then, most likely if you put all those strings in arrays, you can probablly just generate all the combos you need with a for loop