0

I have two type of call function check_negative_value(). in first type I set the onchange=change_quantity(this)and then call check_negative_value() from there like:

function change_quantity(elem) {
    check_negative_value(elem);
    console.log(elem);
}

and in second type I set the decrement_cart(this) and then call check_negative_value() from there like:

function decrement_cart(elem) {
    const input = $(elem).next('input');
    check_negative_value(input);
    console.log(input);
}

and in check_negative_value() I must use input.value or input.val() !!

function check_negative_value(input){
    if(input.value <= 0){
        alert('not accept value under 1');
        input.value = 1;
    }
}

Or :

function check_negative_value(input){
    if(input.val() <= 0){
        alert('not accept value under 1');
        input.val(1);
    }
}

because each calling function have different element and the result of console.log is this: in jquery call:

r.fn.init [input.input-number.text-center, prevObject: r.fn.init(1)]

in javascript call:

<input class="input-number text-center" type="number" value="-1" min="0" max="1000" onchange="change_quantity(this)">

the html code is :

<div class="input-group-button" onclick="decrement_cart(this)">
    <span class="input-number-decrement">-</span>
</div>
<input class="input-number text-center" type="number" min="0" max="1000"
                                    onchange="change_quantity(this)">
<div class="input-group-button" onclick="increment_cart(this)">
    <span class="input-number-increment">+</span>
</div>```

how can I use input element in check_negative_value() without difference between input.val() and input.value ???

thanks

aref razavi
  • 413
  • 2
  • 12
  • I think you can always use jQuery's val(), if you correctly wrap the element handle in $(), like `$(input).val()` – GrafiCode May 26 '22 at 08:40
  • 1
    Calls to jQuery return jQuery objects. These are different to the Element object in plain JS and have different methods. In your example you need to get the Element object from the jQuery object (`const input = $(elem).next('input').get(0);`) and then pass that to your function. Then the argument will contain a consistent type to use within your function. – Rory McCrossan May 26 '22 at 08:40
  • 1
    @GrafiCode that will break when the Element object is passed to that function, though. – Rory McCrossan May 26 '22 at 08:40
  • @RoryMcCrossan I always get confused when interacting both in vanilla and jquery, but I think it can be handled the same. I tried to reproduce it in this fiddle, it seems to be ok: https://jsfiddle.net/zq1t78c0/ – GrafiCode May 26 '22 at 08:46
  • 1
    @GrafiCode if you initalise jquery with a jquery object, it will not "double-wrap" it, but just use the original. Essentially (pseudo): `$(obj) => return obj == jquery ? obj : $(obj)`. So OP can just do `function check_negative_value(input) { input = $(input); .. /*use input as jquery*/ return input.val() }` – freedomn-m May 26 '22 at 08:52

1 Answers1

2

Neither JavaScript nor jQuery has an input element. input elements are DOM objects provided by the host environment (browser), not the language (JavaScript) or library (jQuery).

The difference you're seeing is the DOM object (with a value property) vs. a jQuery wrapper object around it (with a val method).

how can I use input element in check_negative_value() without difference between input.val() and input.value ???

You can check to see whether what you have is a jQuery wrapper by seeing if it has a jquery property or perhaps more directly in this case if it has a val property:

function check_negative_value(input){
    if (input.jquery) {
        // It's a jQuery wrapper, get the first DOM element it contains from it
        input = input[0];
    }
    if (input.value <= 0){
        alert('not accept value under 1');
        input.value = 1;
    }
}

Side note: val() returns a string (unless the jQuery set is empty), not a number (the value of value is also always a string). Although <= 0 will implicitly convert it, you might consider converting it on purpose as implicit conversion assumes "" should be 0; more in my answer here.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 2
    Note: you're safe to just wrap input inside the function: `function foo(input) { input = $(input); return input.val(); }`. jquery will recognise when it's a DOM node or a jquery object and not double-wrap if it's already a jquery object. There's always a (very minor) overhead to creating jquery objects as any other object (before someone moans about this as they *always* do). – freedomn-m May 26 '22 at 08:49
  • @freedomn-m thanks for explaining this, I always get confused when wrapping and re-wrapping elements handlers in $(), because it in fact never throws error, and gets always managed by jquery. – GrafiCode May 26 '22 at 08:53
  • @freedomn-m - Thanks! So long since I wrote jQuery code. :-) I got called away immediately after posting and realised a few minutes later than I normally go the other way, get the DOM element from the jQuery instance, so I update the answer to do that. – T.J. Crowder May 26 '22 at 11:50