Search code examples
javascriptinputcalculatoroperator-keyword

JavaScript - How to prevent multiple operator inputs? (addition & subtraction)

How do you prevent inputs of more than one operator?

Like to add validation if I press + it will show operation and if I press - since the last character is + should replace it.

And if the last character is + then I press + again, it should not append another plus like ++.

Here is the code:

function ins(val) {
    document.getElementById("txtField").value += val
}

function clr() {
    document.getElementById("txtField").value = ""
}

function solve() {
    let x = document.getElementById("txtField").value
    let y = eval(x)
    document.getElementById("txtField").value = y
}
body {
    background-color: whitesmoke;
    text-align: center;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h2>Add & Sub by CJ</h2>
        <input type="text" id="txtField" readonly>
        <br>
        <input type="button" value="1" onclick="ins('1')">
        <input type="button" value="2" onclick="ins('2')">
        <input type="button" value="3" onclick="ins('3')">
        <br>
        <input type="button" value="4" onclick="ins('4')">
        <input type="button" value="5" onclick="ins('5')">
        <input type="button" value="6" onclick="ins('6')">
        <br>
        <input type="button" value="7" onclick="ins('7')">
        <input type="button" value="8" onclick="ins('8')">
        <input type="button" value="9" onclick="ins('9')">
        <br>
        <input type="button" value="0" onclick="ins('0')">
        <br>
        <br>
        <input type="button" value="-" onclick="ins('-')">
        <input type="button" value="+" onclick="ins('+')">
        <input type="button" value="Clear" onclick="clr()">
        <input type="button" value="=" onclick="solve()">

        <br>
    </body>
</html>

Solution

  • You also can try this:)

    function ins(val) {
    let str = document.getElementById("txtField").value;
    let size = document.getElementById("txtField").value.length-1;
    if(val!=='+'&&val!=='-'){
       document.getElementById("txtField").value += val
    }else{
      if(size>-1){
        if(document.getElementById("txtField").value.charAt(size)!=='+' && document.getElementById("txtField").value.charAt(size)!=='-'){
          document.getElementById("txtField").value += val
        }else {
          if(val==='-'){
            if(document.getElementById("txtField").value.charAt(size)==='+'){
              document.getElementById("txtField").value=str.substring(0,size)+val
            }
          }else{
            if(document.getElementById("txtField").value.charAt(size)==='-'){
              document.getElementById("txtField").value=str.substring(0,size)+val
            }
          }
        }  
      }
    }
}

function clr() {
    document.getElementById("txtField").value = ""
}

function solve() {
    let x = document.getElementById("txtField").value
    let y = eval(x)
    document.getElementById("txtField").value = y
}
    body {
    background-color: whitesmoke;
    text-align: center;
}
    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h2>Add & Sub by CJ</h2>
        <input type="text" id="txtField" readonly>
        <br>
        <input type="button" value="1" onclick="ins('1')">
        <input type="button" value="2" onclick="ins('2')">
        <input type="button" value="3" onclick="ins('3')">
        <br>
        <input type="button" value="4" onclick="ins('4')">
        <input type="button" value="5" onclick="ins('5')">
        <input type="button" value="6" onclick="ins('6')">
        <br>
        <input type="button" value="7" onclick="ins('7')">
        <input type="button" value="8" onclick="ins('8')">
        <input type="button" value="9" onclick="ins('9')">
        <br>
        <input type="button" value="0" onclick="ins('0')">
        <br>
        <br>
        <input type="button" value="-" onclick="ins('-')">
        <input type="button" value="+" onclick="ins('+')">
        <input type="button" value="Clear" onclick="clr()">
        <input type="button" value="=" onclick="solve()">

        <br>
    </body>
</html>