JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<h2 id="test">TEST</h2>

<input type="text" id="amount">

<h3>Total Spend : <span id="total">0</span></h3>

<button id="spendAmount">
Click
</button>

JavaScript

$(function(){

    $('#spendAmount').click(function(){
        // bring stored data 'total'
        chrome.storage.sync.get('total', function(budget){

            // If there is an existing 'total' save it to newTotal
            var newTotal = 0;
            if(budget.total){
                newTotal += parseInt(budget.total);
            }

            // If input 'amount' exists, add it to newTotal
            var amount = $('#amount').val();
            if(amount){
                newTotal += parseInt(amount);
            }

            // test : check if newTotal is stored - worked
            $(function(){
                $('#test').text(newTotal);
            })

            // save the updated value to chrome
            chrome.storage.sync.set({'total':newTotal});

            // let 'total' show 'newTotal'
            $('total').text(newTotal);

            // empty input box
            $('#amount').val('');
        });
    });
});