Looking for a script that copies input value 1 to input 2 on button click and add +1 to sets text box.

b = document.getElementById('tussenstand').value;
var theTotal1 = b;

$(document).on("click", "#button1", function(){
    theTotal1 = Number(theTotal2) 
    $('#eindstand').val(theTotal2);        
});
$('#eindstand').val(theTotal2);

<script src=".9.1/jquery.min.js"></script>
<input id="tussenstand"></input>
<input id="eindstand"></input>
<input id="sets"></input>

<button id="button1">click</button>

Looking for a script that copies input value 1 to input 2 on button click and add +1 to sets text box.

b = document.getElementById('tussenstand').value;
var theTotal1 = b;

$(document).on("click", "#button1", function(){
    theTotal1 = Number(theTotal2) 
    $('#eindstand').val(theTotal2);        
});
$('#eindstand').val(theTotal2);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="tussenstand"></input>
<input id="eindstand"></input>
<input id="sets"></input>

<button id="button1">click</button>

Thanks in advance.

• javascript
• jquery

• 1 Where is theTotal2 being set? What exactly are you trying to achieve. Even given your code it's not clear at all. – Rory McCrossan Commented Apr 14, 2015 at 14:44
• Why you're adding click event in both html and javascript? – jcubic Commented Apr 14, 2015 at 14:44
• oh sorry was not necessary i see it now. @jcubic – Joran Dob Commented Apr 14, 2015 at 14:47
• @RoryMcCrossan im trying to copy the value from input 1 to input 2 and to get the script adding +1 to a value in input 3 on button click – Joran Dob Commented Apr 14, 2015 at 14:50
• where do you want to add +1? to the input 1 or just need +1 text as value of sets textbox? – Shaunak Shukla Commented Apr 14, 2015 at 14:52

5 Answers 5

I think this will do it.

$(document).on("click", "#button1", function(){
    var total = document.getElementById('tussenstand').value;
    $('#eindstand').val(total);    
    var sets = parseInt($('#sets').val()); 
    $('#sets').val( (sets || 0) + 1);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="tussenstand"></input>
<input id="eindstand"></input>
<input id="sets"></input>

<button id="button1" onclick="">click</button>

$('#button1').click(function(){
    $('#eindstand').val($('#tussenstand').val());
    $('#sets').val(Number($('#sets').val())+1);    
});

check here : jsfiddle

Edited as you mented

The code below should work. There are several issues that will help you in the future. In the HTML the function that is triggered via the onclick will interfere with the jQuery onclick. You may want to remove it.

onclick="bereken();

The way that you have your code the b variable is not declared.

b=document.getElementById('tussenstand').value;

The way that the jQuery onclick is written should have a narrower scope (not the document). The way that it is now every time you click any were in the document it fires. I changed this:

$(document).on("click", "#button1", function(){ 

to this:

$("#button1").on("click", function() {

The full edited code is here.

var count = 0;
$("#button1").on("click", function(){    

    if ( typeof b === 'number') {
        count++;

        $("#eindstand").val(b);
        $("#sets").val(count);
    }    
});

Look at the JQuery API Documentation for the .on() method. The function doesn't take the target as a parameter, but as the caller object! EDIT: well, it would actually still work the other way around, but that makes event delegation. Only do that if you know what you're doing. I prefer changing this:

$(document).on("click", "#button1", function(){ ... });

into this:

$("#button1").on("click", function() { ... });

Which in vanilla JS would be:

document.getElementById("button1").addEventListener("click", function() { ... });

Next, you shouldn't need to define variables outside of your function, and naming variables with numbers in them is a bad practice. Try to make the names as clear as possible.

Now that this is clear, here's how I'd write it:

$("#button1").on("click", function() {
    $("#eindstand").val($("#tussenstand").val());
    $("#sets").val(parseInt($("#sets").val())+1);    
});

To achieve that use:

$(function() { //on DOM ready
  
  $('#button1').click(function(){ //Attach event
    
    //Get value safe - can use parseFloat() too:
    val1 = parseInt($('#tussenstand').val());
    val2 = parseInt($('#eindstand').val());
    sets = parseInt($('#sets').val());
    
    //Make sure we are using integers:
    if (isNaN(val1) || isNaN(val2) || isNaN(sets)) return;
    
   //Add
    $('#eindstand').val(val1 + val2);
    
    //Increment:
    $('#sets').val(sets+1);
  
  });

});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="tussenstand"  type='number' />
<input id="eindstand" value='0' type='number' />
<input id="sets" value='0' type='number' />

<button id="button1">click</button>