CODEWITHSUNDEEP
javascriptjqueryhtml
lisarko8077
lisarko8077

Reputation: 307

jQuery click event on button doesn't assign the value to a variable

I'm coding a calculator and I'm trying to get the "." that is the value assigned to a button. When click on the button I want to put the value of the button in a variable and then I show it in the content of a div.

For numbers I retrieve the result but for "." not happen.

Here is the link to my codepen work: [javascript calculator][1]

$('button').click(function(){
    input = $(this).val();

    if (!isNaN(eval(input)) || input === "."){
      console.log("input: "+input);
      current += input;
      log = current;
      result += input;
    $("#answer").text(current);
    $("#history").text(result);
    }
});

Upvotes: 3

Views: 1932

Answers (3)

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

Note: to not ruin your journey while learning js, I considered to just fix what you are asking, not to correct everything that can go wrong ;)

consider this jsfiddle: https://jsfiddle.net/hakeero/cw82r1se/3/

this is what I've ended up writing and making the program 'display' both numbers and the floating point in the textbox.

    $('button').click(function(){
    input = $(this).text();

    if (input || input === "."){
      console.log("input: "+input);
      current += input;
      log = current;
      result += input;
    $("#answer").text(current);
    $("#history").text(result);

    }
});

notes about the solution:

1- for simplicity, I've only added buttons for just 1 and 2.

2- to properly read the button text, you need to simply use the jquery method text()

input = $(this).text();

3- I've skipped to call eval on every input in your original code, since it will not work if you try to evaluate the floating point ., will leave it to you to think about another fix ;)

hope this helps.

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281784

Value is only associated with input elements, So .val() will not give you the value attribute of button. But since a button value is an attribute you need to use the .attr() method in jquery. This should do it

<script type="text/javascript">
   $('button').click(function(){
    input = $(this).attr("value")

    if (input === "." || !isNaN(eval(input))){
      console.log("input: "+input);
      current += input;
      log = current;
      result += input;
    $("#answer").text(current);
    $("#history").text(result);
    }
});
</script>


$('button').click(function(){
        var input = $(this).attr("value")
    
        if ( input === "." || !isNaN(eval(input))){
          console.log("input: "+input);
          
        }
  });

 
It is failing for you because when you test `!isNan(eval(input))` where `input = "."` your code breaks. change it to `if ( input === "." || !isNaN(eval(input))){` 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value = ".">Hello</button>

Upvotes: 3

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18997

Problem: Since button element is not of type input you will not be able to get its value by just using .val() on the element.

Solution: Use .attr on the button to get the data in the value attribute

 input = $(this).attr('value');

Upvotes: 1

Related Questions