JS - ユーザーの入力に応じてテキストを変更してください

Question

まず、ご迷惑をおかけして申し訳ございませんが、私は実際にJavascriptに慣れていません。

私は、ユーザーが書いた内容に応じてテキストを変更するスクリプトを探しています。私が探しているもの：

• 1つのテキストに対して3つの入力（A、B、C）があります。
• "テキスト" は、A、BおよびCの添加を示すであろう
• 例：入力AはC私はいくつかのスクリプトを持って10.テキスト= 18

であり、Bが5で、3準備ができて、それは

function ShowPointsNeeded(text){ 
 
document.getElementById("result").innerHTML =text; }

#result { 
 
    height:50px; 
 
    width:50px; 
 
    border:1px solid #999; 
 
    font-size:25px; 
 
    text-align:center; 
 
    margin-left:15px; 
 
}

<div id="text"> 
 
<input id="slide" type="text" value="" 
 
onchange="ShowPointsNeeded(this.value);" /> 
 
</div> 
 
<div id="result"></div>

..スクリプトの唯一の「骨」だ - >それは少しボックスに入力の内容を示す、ただ基本的なスクリプトです。さて、私は3つの入力とそれらの追加を示す小さなボックスがありたいと思います。

ありがとうございます！

Answer 1

ShowPointsNeeded()が呼び出されるたびに、すべての入力値を合計する必要があります。このためにreduce（）を使用することができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script> 
 
function ShowPointsNeeded(){ 
 
    document.getElementById("result").innerHTML = $('input').toArray().reduce((acc,cur) => acc + Number(cur.value), 0); 
 
} 
 
</script> 
 

 
    <div id="text"> 
 
<input id="slide1" type="text" value="" 
 
onchange="ShowPointsNeeded();" /> 
 
<input id="slide2" type="text" value="" 
 
onchange="ShowPointsNeeded();" /> 
 
<input id="slide3" type="text" value="" 
 
onchange="ShowPointsNeeded();" /> 
 
</div> 
 
<div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>

Answer 2

すべての入力の合計を計算したいなら、あなたは、論理以下使用することができます：テキストからの変換のための

function ShowPointsNeeded(){ 
 
      //while doing calculation you have to consider all textboxes every time, 
 
      //so you have to derive a way to get all your related textboxes at once, 
 
      //e.g. : i have use name attribute to make all input boxes relate to each 
 
      //other. 
 
      var allInputs = document.getElementsByName("numbers"); 
 
      var sum=0.0; 
 
      for(var i=0;i<allInputs.length;i++){ 
 
       if(allInputs[i].value.length>0) 
 
       sum= sum+parseFloat(allInputs[i].value); 
 
       //parsing float because user can input decimals as well 
 
      } 
 
      document.getElementById("result").innerHTML=sum; 
 
     }

 <div id="text"> 
 
     <input id="slide" type="text" value="" name="numbers" 
 
     onchange="ShowPointsNeeded();" /> 
 
     <input id="slide" type="text" value="" name="numbers" 
 
     onchange="ShowPointsNeeded();" /> 
 
     <input id="slide" type="text" value="" name="numbers" 
 
     onchange="ShowPointsNeeded();" /> 
 
     </div> 
 
     <div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>

Answer 3

のJavaScript​​機能を番号：

入力の場合

function ShowPointsNeeded() { 
 
    var values = []; 
 
    var elements = document.getElementsByTagName('input'); 
 

 
    for (var i = 0; i < elements.length; i++) { 
 
    values.push(elements[i].value); 
 
    } 
 

 
    var sum = values.reduce(sumElements, 0); 
 

 
    var resultElement = document.getElementById("result"); 
 
    resultElement.innerHTML = sum; 
 
} 
 

 
function sumElements(total, num) { 
 
    return Number(total) + Number(num); 
 
}

<div id="text"> 
 
    <input type="text" value="" onchange="ShowPointsNeeded(this);" /> 
 
    <input type="text" value="" onchange="ShowPointsNeeded(this);" /> 
 
    <input type="text" value="" onchange="ShowPointsNeeded(this);" /> 
 
</div> 
 
<div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>

id属性を必要としません。