检查是否相同的文本已经被输入两次或更多

Question

我正在用jQuery库练习JavaScript。
我想创建一个类似于的POS应用程序但有些事我就是想不明白。
我想，如果你输入lays，然后你再次输入lays，输出应该改变为已经附加到lays * 2的输出。
我有点迷失在如何实现预期的。
目前为止我做了什么:

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>

Answer 1

可以将输入存储在数组中，并在用户每次单击按钮时检查该数组是否包含输入的值。如果不是，则追加该元素并将输入值压入数组。

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>