JS-объединение значений из двух функций

Как объединить выходные данные двух функций для выполнения некоторых операций над двумя значениями?

<div class="grid">
  <h2>Adjust the level</h2>
 <input 
        type="range" 
        name="points" 
        min="0" 
        max="10"
        step="1"
     onChange="xLevel(this.value)">
  <input 
        type="range" 
        name="points" 
        min="0" 
        max="10"
        step="1"
     onChange="yLevel(this.value)">
  <div id="output">
    <p id="x"></p>
    <p id="y"></p>
  </div>
</div>

И JS:

var output = document.getElementById("output");

var xout = document.getElementById("x");

var yout = document.getElementById("y");

function xLevel(newVal) {
  xout.innerHTML = newVal;
}
function yLevel(newVal) {
  yout.innerHTML = newVal;
}

Так как же объединить два значения, x и y, например. умножить их и отобразить в еще одном div?

Спасибо

1 ответ

  1. Сохраните новые значения в их собственных переменных в области верхнего уровня, а затем управляйте ими в отдельной функции.

    var output = document.getElementById("output");
    
    var xout = document.getElementById("x");
    
    var yout = document.getElementById("y");
    
    var multout = document.getElementById('mult');
    
    var xval;
    var yval;
    
    function xLevel(newVal) {
      xout.innerHTML = newVal;
      xval = parseInt(newVal, 10); // casts it to a number
      updateMultiplier();
    }
    function yLevel(newVal) {
      yout.innerHTML = newVal;
      yval = parseInt(newVal, 10); // casts it to a number
      updateMultiplier();
    }
    function updateMultiplier() {
      multout.innerHTML = yval * xval;
    }
    

    а потом для вашей разметки:

    <div class="grid">
      <h2>Adjust the level</h2>
     <input 
            type="range" 
            name="points" 
            min="0" 
            max="10"
            step="1"
         onChange="xLevel(this.value)">
      <input 
            type="range" 
            name="points" 
            min="0" 
            max="10"
            step="1"
         onChange="yLevel(this.value)">
      <div id="output">
        <p id="x"></p>
        <p id="y"></p>
        <p id="mult"></p>
      </div>
    </div>