0

Apologies if the terminology is off - javascript isn't my thing.

I have a function:

var input = {
    getVal: function () {
        return $(this).attr("data-current-val");
    },
    setVal: function () {
        $(this).attr("data-current-val", $(this).val());
    },
    valHasChanged: function () {
        return $(this).val() !== $(this).attr("data-current-val");
    }
};

As you can see there is some repetition. Firstly, I repeat the data attribute name several times; secondly, I select a jquery object numerous times.

I've tried to remove the repetition. For instance, in respect of the data attribute, by adding node: "data-current-val" at the top and then calling it with this.node in place of the string. That causes an error, as does trying to define and then use the jquery objectin the same way.

Similarly part of the boolean in valHasChanged $(this).attr("data-current-val"), logically could be replaced by this.getVal but that doesn't seem to work either. Where am I going wrong?!

Any help appreciated.

georg
  • 211,518
  • 52
  • 313
  • 390
John Ohara
  • 2,821
  • 3
  • 28
  • 54
  • 2
    What are you trying to achieve? Some context is really needed – thedude May 24 '21 at 11:44
  • The code above is part of a larger solution. It relates to a textbox data changes (the jquery on change method doesn't work as needed). These are just small functions that get, set and compare data from an input. It's really the pattern that I'm trying to get right and understand the reasons certain things aren't working how I think they should. – John Ohara May 24 '21 at 11:52
  • Try `window.input.node`. – bloodyKnuckles May 24 '21 at 12:04
  • @bloodyKnuckles - the link to the other post was really useful, please reinstate it. – John Ohara May 24 '21 at 12:13
  • 1
    [access parent object in javascript](https://stackoverflow.com/questions/1789892/access-parent-object-in-javascript) and [Access parent's parent from javascript object](https://stackoverflow.com/questions/183702/access-parents-parent-from-javascript-object) – bloodyKnuckles May 24 '21 at 12:19
  • input in this case in an object that contains 3 functions as its properties... to be of any real assistance will need to see how/when/from where you're calling the functions in this object. maybe edit your code block to be a snippet and include some sample html and calling javascript – DynasticSponge May 24 '21 at 12:21
  • 1
    You can't use `this.getVal()` in `valHasChanged` if you don't call the method as `input.hasValChanged()`, but with `this` pointing to DOM element (e.g. when using it as an event listener). Just refer to `input.getVal` instead, using `input.getVal.call(this)` instead. Alternatively, don't use an object but store things like the attribute name in a separate `const`. – Bergi May 24 '21 at 13:09
  • When you have a method as a property of an object, `this` refers to the method itself, not the element that it appears you are assuming it is. In other words `$(this)` is the same as `$(input.getVal())` in this case. Pass an argument to replace `this` with the element that these methods apply to. You could also prototype onto jquery: `$.prototype.getVal = function() {}` the `this` inside this function will refer to the element you are expecting it to. Just be careful to not overwrite any jquery methods. – PoorlyWrittenCode May 25 '21 at 01:25

0 Answers0