Pass a Value from Button to Text Field in JavaScript

Question

I'm trying to pass a number to a text field on button click. User hits "add to cart" and the 2499 is added to the total already in the text field.

<form name="cart">
    <input id="display" type="text" name="output" size="6" placeholder="0000"/>
<button id="scart" value="Add to Cart" onclick="addCart()" +='2499'"/>

<script type="text/javascript">

var total=""

function addCart(){
    document.getElementById('scart').value;
    total+= document.getElementById('display').value;
    console.log(total);
}

</script>

When learning, I feel that I understand the logic, but don't know the syntax.

Answer 1

You have some errors, your quotes are not matching and you don't have closing button tag. Also, why don't you add 2499 in the code?

How about this:

<form name="cart">
    <input id="display" type="text" name="output" size="6" placeholder="0000"/>
    <button id="scart" value="Add to Cart" onclick="addCart()" > 
    </button>

    <script type="text/javascript">

    var total=""

    function addCart(){
        document.getElementById('scart').value;
        total+= document.getElementById('display').value + 2499;
        console.log(total);
    }

    </script>
</form>

Answer 2

It's not clear what you are trying to do so I made the beginning of a "cart" button where the input is the quantity you want to add to cart.

I then print out the number typed in and the total if you pressed the button more than once.

 <input id="display" type="text" name="output" size="6" placeholder="0000" /> <button id="scart" type="button">Add to cart</button> <script type="text/javascript"> var total = 0; var display = document.querySelector('#display'); var scart = document.querySelector('#scart'); scart.addEventListener('click', function() { var str = display.value; var num = parseInt(str, 10); console.log('You entered the number: ', num); if (!isNaN(num)) { total += num; } console.log('The total is now: ', total); }); </script> 

Answer 3

There are many things that is wrong here:

First, replace + with a good indicator data-value or whatever

<button id="scart" value="Add to Cart" onclick="addCart()" data-value="2499"/>

Second, In your script you should make var total a number not string .

var total = 0;

Finally, your addCart() function.

function addCart() {
    // I see you are trying to get the value of the clicked button so you need to store it as this does not do anything
    // document.getElementById('scart').value;
    var value = document.getElementById('scart').value;
    // Add it to total var;, you need to parseInt it as .value returns string
    total += parseInt(value);
    // put it on display
    document.getElementById('display').value = total;
}

Hope that helps.

Answer 4

I think this is what you want. I made a codepen for you: https://codepen.io/NeilGBK/pen/boGadz?editors=1111

   <form name="cart">
        <input id="display" type="text" name="output" size="6" placeholder="0000"/>   
    </form>
    <button id="scart" onclick="addCart(2499)">Add To Cart</button>

<script>
    function addCart(v){
        document.getElementById('display').value = v
        console.log(v);
        return false;
    }
</script>

I'm passing the number to the function and simply using that to change the value of the input. I'm also logging it to the console