Suggestions with JavaScript operators

Question

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>

Well, just make a minimum condition in your substraction function? — Bergi
– Bergi, Commented Dec 11, 2014 at 13:36
Why is your <style> tag outside of the <head> and <body> tags? — Cerbrus
– Cerbrus, Commented Dec 11, 2014 at 13:37

Cerbrus · Accepted Answer · 2014-12-11 13:42:05Z

1

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.

answered Dec 11, 2014 at 13:42

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

6 Comments

cssnewbie Over a year ago

Hi. I have fixed that. But the problem still is the + function. I have changed to number but still not working.

Cerbrus Over a year ago

You won't need the +/- functions if you use the html attributes.

Richard Over a year ago

This is by far the best way. The provided code will do exactly what you asked for. You can test it using "Run code snippet"

cssnewbie Over a year ago

Yes it works, but I need the 2 buttons to work. The + and the - . Please give me any suggestions for that?

Cerbrus Over a year ago

@cssnewbie: You're setting the result like this: document.getElementById("tall").value = total; Where is your element with ID "tall"? It doesn't appear to exist ;-)

|

dfsq · Accepted Answer · 2014-12-11 13:43:52Z

1

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.

edited Dec 11, 2014 at 13:43

answered Dec 11, 2014 at 13:37

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

cssnewbie Over a year ago

So what should I do? I changed the input type to number, but still not working...

Richard · Accepted Answer · 2014-12-11 13:40:05Z

0

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;

answered Dec 11, 2014 at 13:40

Richard

3,3062 gold badges32 silver badges54 bronze badges

1 Comment

cssnewbie Over a year ago

Yes sorry, it should have been Number. U have fixed that, but the problem still is that the + is not working right. I have make the number from "text" to "number".

Collectives™ on Stack Overflow

Suggestions with JavaScript operators

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related