Result of a function as a parameter of other function

Question

I was reading about callback functions and it seems easy but I still don't know how to do, what I want to.

I have a form where you put weight and height and depending of these variables, it prints some amount. But there is also third variable, let's say width, and if width is less than 50, I want it to print this amount plus 30.

I think the function width is wrong, but I can't solve it. Could you help?

 document.getElementById('submit').addEventListener('click', result); function result() { let weight = document.getElementById('weight').value; let height = document.getElementById('height').value; let width = document.getElementById('width').value; document.getElementById('result').innerHTML = weightAndHeight(weight, height); } function weightAndHeight(weight, height) { if (weight <= 50) { if (height < 20) { return '100'; } else if (height >= 20 && height < 100) { return '200'; } } } function width(width, weightAndHeight) { if (width < 50) { weightAndHeight += 30; } }

 Weight: <input type="number" id="weight" /><br/> Height: <input type="number" id="height" /><br/> Widht: <input type="number" id="width" /><br/> <button type="button" id="submit">Calculate</button> <span id="result"></span>

Answer 1

function result() {
    let weight = document.getElementById('weight').value;
    let height = document.getElementById('height').value;
    let width = document.getElementById('width').value;
    const weightAndHeight = weightAndHeight(weight, height);
    document.getElementById('result').innerHTML = width(weight, weightAndHeight);
} 

If to make some extra efforts, you can use function chaining . In this case object should be created with all required functions. Each function should return this . Finally you can get something like:

class SizeCalculator {
    constructor() {
        this.size = 0;
    }
    weightAndHeight(weight, height) {
        .... // update this.size
        return this;
    }
    width(width) {
        .... // update this.size
        return this;
    }
    length(length) {
        .... // update this.size
        return this;
    }
}

let size = new SizeCalculator()
    .weightAndHeight(weight, height)
    .width(width)
    .length(length)
    .size;

More detailed is below: https://medium.com/backticks-tildes/understanding-method-chaining-in-javascript-647a9004bd4f - good explanation about method chaining and callbacks

Answer 2

 document.getElementById('submit').addEventListener('click', result); function result() { let weight = document.getElementById('weight').value; let height = document.getElementById('height').value; let width = document.getElementById('width').value; document.getElementById('result').innerHTML = fnc2(width, fnc1(weight, height)); } function fnc1(weight, height, width) { if (weight <= 50) { if (height < 20) return 100; else if (height >= 20 && height < 100) return 200; }else return 0; } function fnc2(width, val) { if (width < 50) return val + 30; return val; }

 Weight: <input type="number" id="weight" /><br/> Height: <input type="number" id="height" /><br/> Widht: <input type="number" id="width" /><br/> <button type="button" id="submit">Calculate</button> <span id="result"></span>