Need to Shrink Functions

Question

I'm doing a system related to recycled material. I pay to the person who brings the material, and there are 12 kinds of recycled material.

I need to shrink the functions of the buttons to be more friendly.

This is my modal

this is my script

user_4476484 · Answer

JavaScript functions are able to return other functions. In this case, to generate the button callbacks you want, you can use this. The concept of passing functions to other functions is called "higher order functions." In your case, you can try this:

function myFunctionFactory(material, precio) {
    return function () {
        if (document.getElementById('material1').value == '') {
            document.getElementById('material1').value = material;
            document.getElementById('precio1').value = precio;
            document.getElementById('peso1').readOnly = false;
            document.getElementById('peso1').focus();
        } else if (document.getElementById('material2').value == '') {
            document.getElementById('material2').value = material;
            document.getElementById('precio2').value = precio;
            document.getElementById('peso2').readOnly = false;
            document.getElementById('peso2').focus();
        } else if (document.getElementById('material3').value == '') {
            document.getElementById('material3').value = material;
            document.getElementById('precio3').value = precio;
            document.getElementById('peso3').readOnly = false;
            document.getElementById('peso3').focus();
        } else {
            document.getElementById('material4').value = material;
            document.getElementById('precio4').value = precio;
            document.getElementById('peso4').readOnly = false;
            document.getElementById('peso4').focus();
        }
    };
}

and you could even reduce it further like this, but I didn't want to change too much:

function myFunctionFactory(material, precio) {
    return function () {
        for (i of [1, 2, 3, 4]) {
            if (document.getElementById(`material${i}`).value == '') {
                document.getElementById(`material${i}`).value = material;
                document.getElementById(`precio${i}`).value = precio;
                document.getElementById(`peso${i}`).readOnly = false;
                document.getElementById(`peso${i}`).focus();
                break;
            }
        }
    };
}

With this code, myFunctionFactory is a function that returns another function. If you call myFunctionFactory('1 PET', 1.5), then it will return a callback function that uses '1 PET' and 1.5 in the right places, and still has no arguments.

You can use it in the html code like this:

That will help you reduce the size of the JavaScript code a lot. For the HTML, I highly recommend looking into a standard framework like React, Vue, or Angular (there are a lot). Web design frameworks can take a bit of time and effort to learn, but they are powerful and can help make your code simpler and easier to work with once you understand them.

Need to Shrink Functions

1 Answers