JS - 結合兩個函數的值

Question

如何合併兩個函數的輸出以對兩個值執行一些操作？

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

，然後你的標記：

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