Reassigning input field, simple calculator with JQuery and JavaScript

Question

I'm trying to build a simple calculator, yet I was wondering how I can reassign the input field. Right now I get the following error-message:


"message": "Uncaught TypeError: res.split is not a function",

Basically I would like to split the string when the equal button is pressed and just show the result in the input field. Just imagine that something like '12-3' is typed in.

$('.equal').on('click', () => {
    let res = ($('.inp').val(value))
    let spl = res.split('-')


    $('.inp').val(spl);

However, as I'm new to jquery and javascript, I don't really understand why I'm getting the error message above.

Thanks so much for reading or even helping a beginner out! For now, only the button '1', '2', '3', '-' and '=' work.

$(document).ready(() => {

let numb1 = '1';


let value="";


$('.1').on('click', () => {
    
    $('.inp').val(value += numb1)
})


let numb2 = '2';



$('.2').on('click', () => {
    
    $('.inp').val(value += numb2)
})

let numb3 = '3';



$('.3').on('click', () => {
    
    $('.inp').val(value += numb3)
})



let minus = '-';

$('.min').on('click', () => {
    
    $('.inp').val(value += minus)
})



$('.equal').on('click', () => {
    let res = ($('.inp').val(value))
    let spl = res.split('-')


    $('.inp').val(spl);

})




});

.grid {
    display: grid;
    border: 2px black solid;
    border-radius: 5px;
    width: 40%;
    height: 60%;
    /*grid-template-columns: 50% 50%;*/
    grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr;
    /*rows come first and then columns*/
    margin: 10px;
    
}

.box {
    width: 60%;
    background-color: lightgray;
    margin: 10px;
    text-align: center;
    border-radius: 5px;
}

.box-gr {
    width: 60%;
    background-color: darkgray;
    margin: 10px;
    text-align: center;
    border-radius: 5px;
}

.inp {
    width: 40%;
    margin: 10px;
    border-radius: 5px;
    
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <link rel='stylesheet' type='text/css' href='/Users/f/Downloads/Calc-project/style-calc.css'>
    <title>Chat-Messenger Window</title>
        <script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous">
        </script>
  </head>

    <body>

    <input class="inp" type="text"/>
    <div class = "grid">



      
      
      <button class="box-gr">(</button>
      <button class="box-gr">)</button>
      <button class="box-gr">%</button>
      <button class="box-gr">CE</button>

      <button class="box 7">7</button>
      <button class="box 8">8</button>
      <button class="box 9">9</button>
      <button class="box-gr">/</button>
      <button class="box 4">4</button>
      <button class="box 5">5</button>
      <button class="box 6">6</button>
      <button class="box-gr">x</button>
      <button class="box 1">1</button>
      <button class="box 2">2</button>
      <button class="box 3">3</button>
      <button class="box-gr min">-</button>
      <button class="box 0">0</button>
      <button class="box">.</button>
      <button class="box equal">=</button>
      <button class="box-gr">+</button>

  
    </div>



   
    </body>

 </html>

$('.inp').val(value) is using to set the value for input, you need to use $('.inp').val() — artanik
– artanik, Commented Jul 31, 2020 at 15:14

nip · Accepted Answer · 2020-07-31 15:56:31Z

1

There are a couple of issues with your code.

let res = ($('.inp').val(value))

When you use the val method with an argument, you are assigning that value to the target element. To get the value of the input, use val without any arguments.

let spl = res.split('-')

Finally, the split method returns an array, not a string. For example, when you split the string "12-3" as per your example, you'd get ["12", "3"].

Edit: Given that you don't take decimals into account, and that its hardcoded for subtraction, this should do:

$('.equal').on('click', () => {
    // Get string from input
    const inputValue = $('.inp').val();
    // Split the string into two numbers
    const numbers = inputValue.split('-');
    // Subtract both numbers
    const result = Number.parseInt(numbers[0]) - Number.parseInt(numbers[1]);
    // Replace the input content by the result
    $('.inp').val(result);
})

This assumes that .inp actually has the value (ie: the "12-3" you mentioned)

edited Jul 31, 2020 at 15:56

answered Jul 31, 2020 at 15:17

nip

1,7071 gold badge12 silver badges21 bronze badges

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

1 Comment

Jenny Over a year ago

thanks for responding. I tried to implement your changes, but can't make it work unfortunately. For now; the output ['12' , '3'] would be just what I want as I would know how to proceed from there. Maybe you could show me, that would be awesome! If not, I understand, no worries.

Collectives™ on Stack Overflow

Reassigning input field, simple calculator with JQuery and JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related