CODEWITHSUNDEEP
javascriptoperators
cssnewbie
cssnewbie

Reputation: 41

Suggestions with JavaScript operators

I am trying to make a application with JavaScript.

The app should have a plus, a minus button, and a clear button. In the middle there should be an input where a number will appear.

The app will start off with 1000 and plus will increase by 1000, the minus button will decrease it by 1000, and the clear button will reset the application. The minimum number in the app should be 1000.

I have figured out most but the plus button is not working as it should and I cannot get the app to have 1000 as minimum, it just continues into minus.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Application</title>
</head>
<style>
    #application{
        margin-top: 300px;
        margin-left: 300px;
    }
    input[type=button]{
        cursor: pointer;
        padding: 10px 30px;
        border-radius: 1px;
        font-size: 2.5em;
    }
    input[type=text]{
        padding: 10px 30px;
        border-radius: 1px;
        text-align: center; 
        font-size: 2.5em;
    }
</style>
<body>
    <section id="application">
        <input id="substraction" type="button" value="-" onclick='substraction();'/>
        <input id="number" value="1000" type="text">
        <input id="addition" type="button" value="+" onclick='addition();'/>
        <input type="button" value="Clear" onclick='clearText();'/>
    </section>
    <script>
    function substraction(){
        document.getElementById("tall").value -= 1000;
    }
    function addition(){
        var numb = document.getElementById("number").value;
        var add = 1000;
        var total = number + add;
        document.getElementById("tall").value = total;
    }
    function clearText(){
        document.getElementById("number").value = "1000";
    }
    </script>
</body>

Upvotes: 1

Views: 47

Answers (3)

dfsq
dfsq

Reputation: 193291

In Javascript + is also a string concatenation operator. If at least one of the operands is a String then the result is going to be a String also. You need to cast to Number type explicitly, because input value is always of a String type, even if it looks like a number "1000":

function addition() {

    var number = Number(document.getElementById("number").value);
    var add = 1000;

    var total = number + add;
    document.getElementById("tall").value = total;
}

Also instead of var numb you probably want var number.

Upvotes: 1

Cerbrus
Cerbrus

Reputation: 72937

Just use a number <input> instead:

function clearText(){
    document.getElementById("myNumber").value = 1000;
}
<input id="myNumber" type="number" step="1000" min="1000" max="1000000" value="1000">
<input type="button" value="Clear" onclick='clearText();'/>

This way, you can just use the step, min, and max attributes to specify the behavior of the input.

Upvotes: 1

Richard
Richard

Reputation: 3296

In addition to the other answer, you're doing document.getElementById("tall").value = total; but no element with id "tall" exists. Perhaps it should be "number"?

In order to implement the minimum use the following code in subtract:

var number = Number(document.getElementById("number").value);
if(number - 1000 >= 1000)
    document.getElementById("tall").value -= 1000;

Upvotes: 0

Related Questions