JS - 2つの関数の値を結合する

Question

2つの関数の出力を組み合わせて2つの値に対していくつかの演算を行うにはどうすればよいですか？

<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に表示しますか？

おかげ

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

、その後、あなたのマークアップのために：あなたはちょうど自分自身のJavaScriptの変数にxとyの値を格納しないのはなぜ

<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>