Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Uncaught TypeError: undefined is not a function

I'm currently working through the JQuery 'Simple Drawing Application' course.

I can't figure out why this isn't working. Here's the chunk of Javascript:

function changeColor(){
    var r = $("#red").val();
    var b = $("#blue").val();
    var g = $("#green").val();
//update new color span
    $("#newColor").css("background-color", "rgb(" +r+ "," +g+ "," +b+ ")");
//When color sliders change
    $("input[type=range]").change(changeColor);
}

$("#addNewColor").click(function(){
    var $newColor = ("<li></li>");
    $newColor.css("background-color", $("#newColor").css("background-color"));
    //append color to the controls ul
    $(".controls ul").append($newColor);
});

The flag is on this line of the second function:

    $newColor.css("background-color", $("#newColor").css("background-color"));

The console log prints out Uncaught TypeError: undefined is not a function (anonymous function) n.event.dispatch. Where is the anonymous function?

5 Answers

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

Paste your html code too. I won't have time to look at it now. Once I get home tonight and if there is still no answer, I will try to help you. By the way, how do you show your code like above?

Łukasz Czuliński
Łukasz Czuliński
8,646 Points

You do 3 backticks followed by the coding language, like ```html. Then paste all your code starting on the next line, then close with three more backticks at the end. Make sure they're the ones from the top left of the keyboard, not the ones beside the " quote symbol. I learned that the hard way.

Here's the heart of the html. Next time I will just post a codepen link so I don't blast a wall of code.

    <div class="controls">
        <ul>
            <li class="red selected"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
        </ul>
        <button id="revealColorSelect">New Color</button>
        <div id="colorSelect">
            <span id="newColor"></span>
            <div class="sliders">
                <p>
                    <label for="red">Red</label>
                    <input id="red" name="red" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="green">Green</label>
                    <input id="green" name="green" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="blue">Blue</label>
                    <input id="blue" name="blue" type="range" min=0 max=255 value=0>
                </p>
            </div>
            <div>
            <button id="addNewColor">Add Color</button>
            </div>
        </div>
    </div>
Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

Sorry for the late response and thanks for the tip on how to paste code. Anyways, I'm looking over your code, and I'm having a hard time trying to figure out what you are trying to do(Well I do, but your code tells me otherwise). You have a function called changeColor(), but I do not see it being called anywhere in your JavaScript or HTML code. However, I do see it being "called" inside the function itself....

function changeColor(){
     // took out the rest of the code
     $("input[type=range]").change(changeColor);
}

I believe what you are looking for is to take this line out $("input[type=range]").change(changeColor); in order to change color when the user changes the value of the sliders.

If you reply with more information, I can try to help you even more.

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Hi Paolo, Thanks for helping out. I've put the entire page up on Codepen so it might be easier. Sorry in advance for the messy code.

I didn't even notice that it was inside it's own function, but the color sliders somehow seem to be working fine despite that.

The only error showing up in the console is on line 44, where I try to apply the new background color I get from the sliders and add it to a new color button. I'm very confused as to why that .css() function isn't working.

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

Nicely done with the UI! Congrats, I like it!!! Anyways, I managed to fix or get around your issue, and I have done it differently, but I'm not sure why your code isn't working since it seems fine to me.

$("#addNewColor").click(function(){
  var $newColor = ("<li style='background-color:" + $("#newColor").css("background-color") + "'></li>");
    //append color to the controls ul
    $(".controls ul").append($newColor);
  $newColor.css("background-color", $("#newColor").css("background-color"));
    //$newColor.click();
});

Also, I commented out $newColor.click(), and I believe it should not belong inside your click function.

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Great! Thanks again for the taking the time to help. Yeah, it seems to work fine without the #newColor.click(). I noticed that while working on it.

I wish I could say that I designed it but I was just simply following along in the TH exercise. I only just started learning JavaScript last week.