CODEWITHSUNDEEP
jqueryif-statement
user3765050
user3765050

Reputation: 1

Changing a <p> text depending from a changing value using jquery

I want to make a different text appearing everytime the value I get from my <input> changes. 

$(function($) {

            $(".knob").knob({
                change : function (value) {
                    console.log("change : " + value);
                },
                release : function (value) {
                    console.log(this.$.attr('value'));
                    console.log("release : " + value);
                    var x = value;
                    if( 1 <= x <= 20){
                        document.getElementById("PARAGRAPH").innerHTML = "From 1 to 20";}
                    if ( 21 <= x <= 41){
                        document.getElementById("PARAGRAPH").innerHTML = "From 21 to 41";}
                    if ( 41 <= x <= 61){
                        document.getElementById("PARAGRAPH").innerHTML = "From 41 to 61";}
                    if ( 61 <= x <= 81){
                        document.getElementById("PARAGRAPH").innerHTML = "From 61 to 81";}
                    if ( 81 <= x <= 100){
                        document.getElementById("PARAGRAPH").innerHTML = "From 81 to 100";}
                },
                cancel : function () {
                    console.log("cancel : ", this);
                },
                format : function (value) {
                    return value + '%';
                },})}

In my index.html I obviously have <p id="PARAGRAPH"></p> which is supposed to change everytime my value changes. The problem is that the only thing appearing is the string "From 81 to 100", even if my value is 35.

Upvotes: 0

Views: 60

Answers (4)

Vikram
Vikram

Reputation: 720

Try this Code

$(function($) {

        $(".knob").knob({
            change : function (value) {
                console.log("change : " + value);
            },
            release : function (value) {
                console.log(this.$.attr('value'));
                console.log("release : " + value);
                var x = value;
                if( 1 <= x <= 20){
                    document.getElementById("PARAGRAPH").innerHTML = "From 1 to 20";}
                else if ( 21 <= x <= 41){
                    document.getElementById("PARAGRAPH").innerHTML = "From 21 to 41";}
                else if ( 41 <= x <= 61){
                    document.getElementById("PARAGRAPH").innerHTML = "From 41 to 61";}
                else if ( 61 <= x <= 81){
                    document.getElementById("PARAGRAPH").innerHTML = "From 61 to 81";}
                else if ( 81 <= x <= 100){
                    document.getElementById("PARAGRAPH").innerHTML = "From 81 to 100";}
            },
            cancel : function () {
                console.log("cancel : ", this);
            },
            format : function (value) {
                return value + '%';
            },})}

Upvotes: 0

Hannes Schneidermayer
Hannes Schneidermayer

Reputation: 5727

Your if statement is true multiple times, so the last one remains! Also, your conditions are logically wrong.

Use && for multiple comparisons!

Change it to this else if block:

if (x >= 1 && x <= 20) {
    document.getElementById("PARAGRAPH").innerHTML = "From 1 to 20";
} else if (x >= 21 && x <= 40) {
    document.getElementById("PARAGRAPH").innerHTML = "From 21 to 41";
} else if (x >= 41 && x <= 60) {
    document.getElementById("PARAGRAPH").innerHTML = "From 41 to 61";
} else if (x >= 61 && x <= 80) {
    document.getElementById("PARAGRAPH").innerHTML = "From 61 to 81";
} else if (x >= 81 && x <= 100) {
    document.getElementById("PARAGRAPH").innerHTML = "From 81 to 100";
}

Else-if will stop if one condition is true. Using your method, all conditions are true for value 1. And "From 81 to 100" is the last one, so you will see this. All the other strings get inserted, too - but in a fraction of a second, so you just don't recognize it.­

Upvotes: 0

Julie
Julie

Reputation: 29

You should use keyup instead of change and test if the input is an integer (or a float). You also need to use && .Here is a fiddle with an example: http://jsfiddle.net/6r95X/

$('#myIn').on( "keyup", function(){
    x = $('#myIn').val();
    // test if x is an integer
    if (x == parseInt(x)){
        if (1 <= x && x <= 20) {
            $("#res").html("From 1 to 20");
        } else if (21 <= x && x <= 41) {
            $("#res").html("From 21 to 41");
        } else if (41 <= x && x <= 61) {
            $("#res").html("From 41 to 61");
        } else if (61 <= x && x <= 81) {
            $("#res").html("From 61 to 81");
        } else if (81 <= x && x <= 100) {
            $("#res").html("From 81 to 100");
        }else{
            $("#res").html("More than 100");
        }
    }else{
        $("#res").html("Error: not an integer");
    }
});

Upvotes: 1

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

You need to use && to check if value is inside a given interval

left <= val && val <= right

Otherwise you will always get true, because what you have now is equivalent to

(left <= val) <= right;
//boolean converted to a number is always <= right

for example 1 <= 2; //true and true <= 10; //true

This seems to work for me http://jsfiddle.net/q2E9s/

$('.knob').knob({
    release: function(val) {
        var mark = $.grep([0, 20, 40, 60, 80], function(mark){
            return mark + 1 <= val && val <= mark + 20;
        })[0]; //find left mark
        $('#PARAGRAPH').html('From ' + (mark + 1) + ' to ' + (mark + 20) );
    }
});

Upvotes: 1

Related Questions