Example:
if the main input value like this "1+23+ " then I need to replace the last special character with a new one suppose I click new special characters like minus, multiplication, and divide symbol, etc.
my expected output:
<body>
<input type="text" id="Main">
<input class="ip" type="button" value="1" onclick="Cal(this)">
<input class="ip" type="button" value="2" onclick="Cal(this)">
<input class="ip" type="button" value="3" onclick="Cal(this)">
<input class="ip" type="button" value="+" onclick="Cal(this)">
<input class="ip" type="button" value="-" onclick="Cal(this)">
<input class="ip" type="button" value="*" onclick="Cal(this)">
</body>
<script>
function Cal(btn)
{
document.getElementById("Main").value+=btn.value;
}
</script>
This is what you want. I first test the last character of the input string with a regex detecting special characters, and if there is a special character inside the input and if the value of the button you pressed is a also a special character, I delete the last character from the string. And then at the end the value of the button you pressed is appended to the end of the string.
function cal(btn)
{
let format = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
let input = document.getElementById("Main").value
if(format.test(input.charAt(input.length - 1)) && format.test(btn.value)){
input = input.slice(0, -1)
}
input += btn.value;
document.getElementById("Main").value = input
}<body>
<input type="text" id="Main">
<input class="ip" type="button" value="1" onclick="cal(this)">
<input class="ip" type="button" value="2" onclick="cal(this)">
<input class="ip" type="button" value="3" onclick="cal(this)">
<input class="ip" type="button" value="+" onclick="cal(this)">
<input class="ip" type="button" value="-" onclick="cal(this)">
<input class="ip" type="button" value="*" onclick="cal(this)">
</body>You can edit the regex to meet your exact needs.
1) If last value is not number i.e it is a symbol and current value is also not a number. In short if last value is symbol and current value is also a symbol. In this case you have to remove the last value and append the current value
const display = document.getElementById("Main");
const appendValue = val => display.value += val;
const isNumber = n => !isNaN(parseInt(n));
function Cal(btn) {
const lastValue = display.value.slice(-1);
const currentValue = btn.value;
if (!isNumber(lastValue) && !isNumber(currentValue))
display.value = display.value.slice(0, display.value.length - 1) + currentValue;
else appendValue(currentValue);
}<input type="text" id="Main">
<input class="ip" type="button" value="1" onclick="Cal(this)">
<input class="ip" type="button" value="2" onclick="Cal(this)">
<input class="ip" type="button" value="3" onclick="Cal(this)">
<input class="ip" type="button" value="+" onclick="Cal(this)">
<input class="ip" type="button" value="-" onclick="Cal(this)">
<input class="ip" type="button" value="*" onclick="Cal(this)">2) You only have to append value, if it one of the following:
number.last value is a number.last value is not a number and current value is a numberconst display = document.getElementById("Main");
const appendValue = val => display.value += val;
const isNumber = n => !isNaN(parseInt(n));
function Cal(btn) {
const lastValue = display.value.slice(-1);
const currentValue = btn.value;
if ((!lastValue && isNumber(currentValue)) ||
(isNumber(lastValue)) ||
(!isNumber(lastValue) && isNumber(currentValue))) appendValue(currentValue);
else display.value = display.value.slice(0, display.value.length - 1) + currentValue;
}<input type="text" id="Main">
<input class="ip" type="button" value="1" onclick="Cal(this)">
<input class="ip" type="button" value="2" onclick="Cal(this)">
<input class="ip" type="button" value="3" onclick="Cal(this)">
<input class="ip" type="button" value="+" onclick="Cal(this)">
<input class="ip" type="button" value="-" onclick="Cal(this)">
<input class="ip" type="button" value="*" onclick="Cal(this)">