3

I was recently making a Javascript color converter (Up for Code Review) in which I have two functions that are called when the input is changed (The change event). So to implement this, I had code of the sort:

hexInput.addEventListener("change", function() {
    if (isValidColor(this.value)) {
        // Conversion code
    }  
});

rgbInput.addEventListener("change", function() {
    if (isValidColor(this.value)) {
        // Conversion code
    } 
});

Now following the airbnb style guide, I realized that maybe I could use arrow functions to rephrase these two bindings as they are using anonymous functions. So I changed my code to:

hexInput.addEventListener("change", () => {
    if (isValidColor(this.value)) {
        // Conversion code
    }  
});

rgbInput.addEventListener("change", () => {
    if (isValidColor(this.value)) {
        // Conversion code
    } 
});

However, now when I change the value of my inputs, nothing happens. So to try and find the cause of this issue, I decided to open the chrome JS debugger, and added a few breakpoints to these calls. When I stepped through the code, I found the root of the error: this.value was undefined! So I decided to google up the problem and found this question, which has an answer that states that "[a]rrow function does not have a this or [sic] their own" (The linked duplicate of that question says that arrow functions are not just a shorter syntax for regular functions). So now I don't know what to replace this.value with.

This leads into my question: How do I access the value of an input field inside an arrow Function without using this.value? (Please bear in mind that I am very new to JS)

Here is a code snippet that illustrates the problem I have mentioned above:

(function() {
    window.onload = function() {
        document.getElementById("test").addEventListener("change", () => {
            console.log(this.value);
        });
    }
}());
<input id="test" type="text" />
Arnav Borborah
  • 11,357
  • 8
  • 43
  • 88
  • 2
    There's no reason to use an arrow function in this case. I understand wanting to use the newest thing on the block, but when it actually causes more problems than it solves... don't. – Kevin B Mar 07 '18 at 21:25
  • 1
    **Arrow function is not the new function.** I would recommend you spend your time learning why each is useful, rather than blindly rewriting all of your functions. – mhodges Mar 07 '18 at 21:26
  • 1
    I don't see why this question was downvoted. Even if I didn't know what the answer is saying, I gave my full attempt to find my answer by including my. 1. Research, 2. My attempt to solve the problem through debugging. As someone new to the language, I wouldn't really know what exactly to search for. – Arnav Borborah Mar 07 '18 at 21:27
  • I don't think the question is useful. You're of course free to have your own opinion on that matter – Kevin B Mar 07 '18 at 21:27
  • 1
    @kevin B its useful to the OP? – Jonas Wilms Mar 07 '18 at 21:28
  • For me the question follows the rules, so shouldn't be downvoted because of an own opinion. – Ele Mar 07 '18 at 21:28
  • @JonasW. LOL. by that definition it is impossible for a question to not be useful. – Kevin B Mar 07 '18 at 21:28
  • @kevin b no. Not quite. Homework questions usually dont help the OP. Or duplicate questions if there is already a brilliant answer out there. And opinion based ones overwhelm the OP with endless discussions :) – Jonas Wilms Mar 07 '18 at 21:30
  • Coincidentally, there IS already a brilliant answer to this question out there. Probably a dozen. – Kevin B Mar 07 '18 at 21:30
  • @kevin b then search it and mark it. Downvotes just make everyone sad – Jonas Wilms Mar 07 '18 at 21:31
  • @KevinB I think you're defending your opinion rather than being objective. – Ele Mar 07 '18 at 21:32
  • No, downvotes send a signal to SO such that it can properly sort questions by usefulness/quality. Blindly upvoting everything circumvents this system. – Kevin B Mar 07 '18 at 21:32
  • 3
    Clearly that AirBnB style guide is clueless (again). [You cannot, and you should not, use arrow functions here](https://stackoverflow.com/q/34361379/1048572). – Bergi Mar 07 '18 at 21:34
  • @Ele and, yes, I am defending my opinion, as that's what was directly challenged. Votes are subjective. Opinion based. If they were objective, we wouldn't need them. – Kevin B Mar 07 '18 at 21:36
  • @KevinB before to share the duplicated you were toooo much subjective. Have a good day! – Ele Mar 07 '18 at 21:37
  • @Bergi I get what you're saying. The Airbnb guide is being way too general with its statements (Or it is assuming too much about its users ;-)) So I guess I won't just follow it word for word from now on! – Arnav Borborah Mar 07 '18 at 21:41
  • @KevinB While you are entitled to your opinion, here is my definition of a [useful question](https://stackoverflow.com/help/how-to-ask): A question which shows research effort (I had that since I showed _exactly_ what I searched for and my attempts to solve the problem), a question which is clear (I don't think the title can be any clearer), and a question which has enough context to be answered (Which is essentially the whole body of my post). Now if you feel that any of those parts are not fulfilled, then you may go ahead and keep your downvote. Otherwise it really makes little sense. – Arnav Borborah Mar 07 '18 at 21:45
  • It is a duplicate, there's nothing you could have done that would have made it useful. – Kevin B Mar 07 '18 at 21:46
  • @ArnavBorborah move on and let him think whatever he wants. The question was duplicated (that's right) but a downvote shows how subjective was it granted. – Ele Mar 07 '18 at 22:07

2 Answers2

3

Use the available event param event.target.value:

(function() {
    window.onload = function() {
        document.getElementById("test").addEventListener("change", (e) => {
            console.log(e.target.value);
        });
    }
}());
<input id="test" type="text" />
Ele
  • 33,468
  • 7
  • 37
  • 75
1

Well without context you need scope:

hexInput.addEventListener("change", function() {
   if (isValidColor(hexInput.value)) {
      rgbInput.value = convertHexToRGB(hexInput.value);
      document.body.style.backgroundColor = rgbInput.value;
   }  
});

But i would prefer good code over good looking code, so just ignore the styleguide here :)

Now the codereview part: You could extract the whole logic into a more generalized function, e.g.:

function fromToConverter(from, to, converter){ 
  from.addEventListener("change", function() {
     if (isValidColor(from.value)) {
        to.value = converter(from.value);
      }  
   });
}

So you can do:

fromToConverter(hexInput, rgbInput, convertHexToRGB);
fromToConverter(rgbInput, hexInput, convertRGBToHex);
Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151