Результат функции как параметр другой функции

Question

Я читал о функциях обратного вызова, и это кажется простым, но я все еще не знаю, как это сделать, что я хочу.

У меня есть форма, в которой вы указываете вес и рост в зависимости от этих переменных, он печатает некоторое количество. Но есть и третья переменная, скажем, ширина, и если ширина меньше 50, я хочу, чтобы она напечатала это значение плюс 30.

Я думаю, что ширина функции неверна, но я не могу ее решить,Не могли бы вы помочь?

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

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>

Answer 2

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);
} 

Если приложить дополнительные усилия, вы можете использовать функция цепочки . В этом случае объект должен быть создан со всеми необходимыми функциями. Каждая функция должна возвращать this. Наконец, вы можете получить что-то вроде:

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;

Более подробно ниже: https://medium.com/backticks-tildes/understanding-method-chaining-in-javascript-647a9004bd4f - хорошее объяснение цепочки методов и обратных вызовов