I'm practicing JavaScript with the jQuery library.
What I want is to create something like a POS Application, but there are things I just can't figure out.
I'd like to, if you enter lays, and then you enter lays again, the output should change to the already appended output to lays * 2.
I'm kind of lost on how to achieve the desired.
What I have so far:
var billoutput = document.getElementById('inputterminal');
var counter = 1;
$('#bill').click(function() {
$("#holder").append(" <span style='padding:10px; margin:5px; color:white; background-color:black; border-radius: 10px;'> " + billoutput.value + " </span> ");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>POS Terminal</h1>
<input id="inputterminal" value="" name="" type="text">
<button id="bill">bill</button> <br>
<div style="margin-top: 20px;" id="holder"></div>You can store the inputs in an array and check whether the array includes the value of the input every time the user clicks the button. If it does not, append the element and push the input's value to the array.
var billoutput = document.getElementById('inputterminal');
var counter = 1;
var words = []
$('#bill').click(function() {
if (!words.includes(billoutput.value)) {
words.push(billoutput.value)
$("#holder").append(" <span style='padding:10px; margin:5px; color:white; background-color:black; border-radius: 10px;'> " + billoutput.value + " </span> ");
}else{
alert("you already entered that!")
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>POS Terminal</h1>
<input id="inputterminal" value="" name="" type="text">
<button id="bill">bill</button> <br>
<div style="margin-top: 20px;" id="holder"></div>