JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<input id="itemCost"></input>
<button class="calculatebutton">Cash Payment</button>
<input id="total"></input>

CSS

.calculatebutton {
    height: 100px;
    width: 100px;
}

JavaScript

$(document).ready(function (e) {
    $(".calculatebutton").on("click", function () {
        //perform a input type check when i learn rregex
        var answer = 0,
            item_cost = $("#itemCost").val(); // this is a string, NOT a number
        
        // check if you got a number, with your way or criteria
        if(isNaN(item_cost) || item_cost === true || item_cost === ''){  
            $("#total").val("Not a Number here");
            return false; // you didn't
        }
        item_cost = parseFloat(item_cost); // or use parseInt if you want integer
            
        if ($('.calculatebutton').text() === 'Cash Payment'){ // use always === for equality
            answer = item_cost * 0.10;
        } else {
            answer = item_cost * 0.12;
        }
        answer += item_cost;
        $("#total").val(answer);
    })
});