2016-10-27 7 views
1

私はJavaスクリプトを勉強しようとしています。私の考えは数字の入力フィールドでした。 ユーザーが数字を入力すると、スクリプトは段落または他のテキストフィールドにそれを配置する必要があります。ユーザーが最初のフィールドに他の数字を入力すると、2つの値が一緒にカウントされます。どのようにお互いの価値を追加するには?

はこれが可能ですか?

var number = document.getElementById("getalInput"); 
 
var resultaat = document.getElementById("getalOutput") 
 

 
number.onchange = function() {calculatie()}; 
 

 
function calculatie(){ 
 

 
    resultaat.innerHTML = number.value + " + " + "next value" + " + " + "and so on"; 
 
    resultaat.style.display = 'block'; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="script.js" async></script> 
 
    </head> 
 

 
    <body> 
 

 

 
    <input type="text" id="getalInput"> 
 
    <br> 
 
    <p id="getalOutput"></p> 
 

 

 
    </body> 
 
</html>

+0

あなたはJSを使用して一緒に追加する方法を求めていますか?または文字列を連結しますか? – evolutionxbox

答えて

1

あなたは合計のための変数を導入し、値を合計するためにそれを使用することができます。このような

var number = document.getElementById("getalInput"), 
 
    resultaat = document.getElementById("getalOutput"), 
 
    sum = 0;      // new varaibale 
 

 
number.onchange = calculatie; // assign function directly for the event 
 

 
function calculatie(){ 
 
    sum += +number.value || 0;  // get a number or zero for not number input 
 
    resultaat.innerHTML = sum; 
 
}
<input type="text" id="getalInput"><br> 
 
<p id="getalOutput"></p>

+0

ありがとう、これはverryのヘルプフルです – mike

0

var number = document.getElementById("getalInput"); 
 
    var resultaat = document.getElementById("getalOutput") 
 

 
    number.onchange = function() {calculatie()}; 
 

 
    function calculatie(){ 
 
     if(!resultaat.innerHTML.trim()){ 
 
     resultaat.innerHTML = number.value; 
 
     }else{ 
 
     resultaat.innerHTML += " + " + number.value; 
 
     } 
 
     number.value = ''; 
 
     resultaat.style.display = 'block'; 
 
    }
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="script.js" async></script> 
 
    </head> 
 

 
    <body> 
 

 

 
    <input type="text" id="getalInput"> 
 
    <br> 
 
    <p id="getalOutput"></p> 
 

 

 
    </body> 
 
</html>

+0

ありがとう男verryヘルプフル – mike

+0

あなたはこれがどのように私はそれを完全に理解することはできません説明することができる可能性がありますか? – mike

関連する問題