Implement a delete button for a JavaScript calculator

Question

I'm learning JavaScript(jQuery), so I'm working on a scientific calculator. The delete button works fine when I have input such as; sin(cos(tan(. But when I have a repetition of similar input, say; sin(cos(tan(sin(, it removes the first occurrence of sin(. What I want, is to remove the last occurrence of each input (similar or not). I don't want to delete one letter/character at a time either.

The jQuery code is the closest I've gotten to what I want. I'd appreciate any advice on best practices too, since I'm a beginner.

    <script type="text/javascript" charset="utf-8">
      $("document").ready(function (){
        $("#del").click(function (){
          var x = $("#input-field").val();
          var x_len = $("#input-field").val().length;
          var sin_lindex = x.lastIndexOf("sin");
          var cos_lindex = x.lastIndexOf("cos");
          var tan_lindex = x.lastIndexOf("tan");
          
          if (sin_lindex > cos_lindex && sin_lindex > tan_lindex){
            var value = x.replace("sin(", "");
            $("#input-field").val(value)
          }
          else if (sin_lindex < cos_lindex && cos_lindex > tan_lindex){
            var value = x.replace("cos(", "");
            $("#input-field").val(value)
          }
          else if (tan_lindex > cos_lindex && sin_lindex < tan_lindex){
            var value = x.replace("tan(", "");
            $("#input-field").val(value)
          }
        });
        $(".param").on("click", function (){
          if($("#inv").hasClass("outlaw")){
            document.getElementById("input-field").value += $(this).text().slice(0, -2) + "\u2212" + "\u00b9" + "(";
            document.getElementById("input-field2").value += "Math.a" + $(this).text().slice(0, -2) + "(";
          }
          else{
            document.getElementById("input-field").value += $(this).text() + "(";
            document.getElementById("input-field2").value += "Math." + $(this).text() + "((Math.PI/180)*";
          }
        });
      });
    </script>

Ofir Baruch · Accepted Answer · 2021-01-11 11:43:25Z

2

The reason that your code "it removes the first occurrence of" is that you're using the replace() method with a string pattern.

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

Therefore, you should use Regex (regular expression) in order to identify the last occurance of the term. For that consider checking the elaborated explanation in this answer:

Using regex to replace only the last occurrence of a pattern with JS

and then replace all your replace uses with replace regex and it should work.

answered Jan 11, 2021 at 11:43

Ofir Baruch

10.3k2 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bryan Somto Over a year ago

I've found a solution with regex. Thanks.

Bryan Somto · Accepted Answer · 2021-01-11 13:50:31Z

I came up with this solution.

$("#del").click(function (){
              var x = $("#input-field").val();
              var sin_lindex = x.lastIndexOf("sin");
              var cos_lindex = x.lastIndexOf("cos");
              var tan_lindex = x.lastIndexOf("tan");
              
              if (sin_lindex > cos_lindex && sin_lindex > tan_lindex){
                var value = x.replace(/sin\($/g, "");
                $("#input-field").val(value);
              }
              else if (sin_lindex < cos_lindex && cos_lindex > tan_lindex){
                var value = x.replace(/cos\($/g, "");
                $("#input-field").val(value);
              }
              else if (tan_lindex > cos_lindex && sin_lindex < tan_lindex){
                var value = x.replace(/tan\($/g, "");
                $("#input-field").val(value);
              }
            });

Collectives™ on Stack Overflow

Implement a delete button for a JavaScript calculator

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related