How to make an input field onclick

Question

what I want is to make an input field appear on some kind of popup where the user can input a number between 0-x where x is the current level of a variable. Once the user inputs a number, that number gets added to a different variable. This would be much like transferring money in a videogame. I don't have any code for this but it would be awesome if you could help.

Answer 1

This may help you get started. I created a clickable label that opens a popover with an input field and a button for submission.

I'm using jQuery and Bootstrap.

JSFiddle: https://jsfiddle.net/Ravvy/xjz6ok62/

HTML:

<label>Money: $</label>
<label data-toggle="popover" title="Add Money" data-placement="bottom" id="moneyLabel">0.00</label>

JavaScript:

$(document).ready(function() {
    var content = '<input id="moneyInput"></input>' + 
                  '<button id="moneyButton" ' +
                  'onclick="addMoney()">Add</button>';
    $('#moneyLabel').popover({content: content, html: true});  
});

function addMoney() {
    var currentAmount = parseFloat($('#moneyLabel').text());
    var addedAmount = parseFloat($('#moneyInput').val());
    var total = currentAmount + addedAmount;
    $('#moneyLabel').text(total);
}