CODEWITHSUNDEEP
javascriptjquery
janavvi
janavvi

Reputation: 19

trouble using append(value) into textbox while clicking a button

Can someone help me figure this out as i'm new to javascript. I tried a simple calculator using jquery. But when i try to append a value into the text box while clicking on it, it does not work. Here is the code snippet.Thanks in advance.

please find the code in https://jsfiddle.net/jananivaish/hwLa72yu/

<body>
    <div class="calc">
        <h1>Calculator </h1>
        <input id="display" name="display" />
        <input id="Result" name="result" />
        <table>
            <tr class="row">
                <td> <button value="7" name="7" class="number" id="seven">7</button> </td>
                <td> <button value="8" name="8" id="eight" class="number">8</button> </td>
                <td> <button value="9" name="9" id="nine" class="number">9</button> </td>
                <td> <button value="+" name="sum" id="sum" class="number">+</button> </td>
            </tr>
            <tr class="row">
                <td> <button value="4" name="4" id="four" class="number">4</button> </td>
                <td> <button value="5" name="5" id="five" class="number">5</button> </td>
                <td> <button value="6" name="6" id="six" class="number">6</button> </td>
                <td> <button value="-" name="sub" id="sub" class="number">-</button> </td>
            </tr>
            <tr class="row">
                <td> <button value="1" name="1" id="one" class="number">1</button> </td>
                <td> <button value="2" id="two" class="number">2</button> </td>
                <td> <button value="3" id="three" class="number">3</button> </td>
                <td> <button value="*" id="mul" class="number"> * </button> </td>
            </tr>
            <tr class="row">
                <td> <button value="0" class="number" name="0" id="zero">0</button> </td>
                <td> <button value="=" id="equal">=</button> </td>
                <td> <button value="dot" class="number" id="dot">.</button> </td>
                <td> <button value="/" id="divi" class="number">/</button> </td>
            </tr>
        </table>
        <button id="clear" class="clear">clear</button>
    </div>
</body>



$(document).ready(function() {
    $(".number").click(function() {
        var value = $(this).val();
        $("#display").append(value);
    });
    $("#equal").click(function() {
        var calc = $("#display").text();
        var answer = eval(calc);
        $("#Result").text(answer);
    });
    $(".clear").click(function() {
        $("#display").text("");
        $("#Result").text("");
    });
});

Upvotes: 0

Views: 144

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

For input tags, according to MDN, the default type is text:

type

The type of control to display. The default type is text, if this attribute is not specified.

In order to get the value of an input type text you need to use jQuery.val().

Moreover, the function eval according to MDN:

The eval() function evaluates JavaScript code represented as a string.

Just for instance, if you write in your display field the string alert('ok') the result will be the execution of the alert function. This may drive you to a clear error (an user may this for malicious purposes). The best way is to avoid at all the eval function or test the content of the string (allowing only digit and math operators). You can do this, just for instance, using a simple regex pattern:

if (!/^[0-9+\-*/ ]*$/.test(calc)) {
   alert('input error');
}

But, again, adding only this test will prevent malicious result but will not assure you a correct result like in:

8 ++ 2

In order to avoid this last point you may use try...catch.

The updated fiddle and the snippet:

$(document).ready(function(){
  $(".number").on('click', function(e) {
    var value = $(this).val();
    $("#display").val(function(idx, val) {
      return val + value;
    });
  });
  $("#equal").on('click', function(e) {
    var calc = $("#display").val();
    if (!/^[0-9+\-*/ ]*$/.test(calc)) {
      $("#Result").val('input error');
      return;
    }
    $("#Result").val(function(idx, val) {
      try {
        return eval(calc);
      } catch(err) {
        return "error"
      }
    });
  });
  $(".clear").click(function(e) {
    $("#display, #Result").val("");
  });
});
h1{color:white;
  text-align:center;
}
#Result, #display{margin-left:25px;
  font-family: Droid Sans Mono;
  background-color:#aaa;
  display: table;
  width:70%;
  height:20px;
  border-radius:5px;
  color: #333;
}
.calc {
  position:relative;
  margin:0 auto;
  width:225px;
  height:300px;
  background-color: #444;
  border-radius: 20px;
  font-family:oxygen;
}
.row{text-align:center;
  position:relative;
}
table{margin-left:50px;
  margin-top:15px;
}
.clear{margin-left:80px;
  margin-top:15px;
  width:50px;
  height:25px;
  border-radius:5px;
}
button{width:25px;
  height:25px;
  border-radius:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<div class="calc">
    <section>
        <h1>Calculator </h1>
        <input id="display" name ="display" />
        <input id="Result" name ="result" />
        <table >
            <tr class="row">
                <td> <button value="7" name= "7" class="number" id ="seven" >7</button> </td>
                <td> <button value="8" name= "8" id="eight" class="number">8</button> </td>
                <td> <button value="9" name= "9" id="nine" class="number" >9</button> </td>
                <td> <button value="+" name= "sum" id="sum" class="number" >+</button> </td>
            </tr>
            <tr class="row">
                <td> <button value="4" name= "4" id="four" class="number">4</button> </td>
                <td> <button value="5" name= "5" id="five" class="number">5</button> </td>
                <td> <button value="6" name= "6" id="six" class="number">6</button> </td>
                <td> <button value="-" name= "sub" id="sub" class="number">-</button> </td>
            </tr>
            <tr class="row">
                <td> <button value="1" name= "1" id="one" class="number">1</button> </td>
                <td> <button value="2" id="two" class="number">2</button> </td>
                <td> <button value="3" id="three" class="number">3</button> </td>
                <td> <button value="*" id="mul" class="number"> * </button> </td>
            </tr>
            <tr class="row">
                <td> <button value="0" class="number" name="0" id="zero">0</button> </td>
                <td> <button value="=" id="equal" >=</button> </td>
                <td> <button value="dot" class="number" id="dot">.</button> </td>
                <td> <button value="/" id="divi" class="number">/</button> </td>
            </tr>
        </table>
        <button id="clear" class="clear">clear</button>
    </section>
</div>

Upvotes: 0

Bjoern
Bjoern

Reputation: 16304

You cannot use append here, since this is used for

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

Since you seem to want to show your "numbers" within an input. use the value of the input.

Your code might look like this then:

[...]
var value = $(this).val() + $("#display").val();
$("#display").val(value);
[...]

Upvotes: 1

Related Questions