2016-10-27 5 views
1

Он, я пытаюсь изучить java-скрипт, моя идея была поле ввода для чисел. Когда пользователь заполняет число, мой сценарий должен поместить его в абзац или другое текстовое поле. и когда пользователь заполняет другое число в первом поле tekst, он подсчитывает значение 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

спасибо, что это полная помощь – 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 help полностью – mike

+0

есть ли возможность, что вы можете объяснить, как это работает, я не могу полностью его понять? – mike

Смежные вопросы