Uncaught ReferenceError: updateHead is not defined using jscolor

This is a fairly simple question, I am not quite sure what is wrong (new to this). When I try to run the following on my robot, I always get "Uncaught ReferenceError: updateHead is not defined":

This is for a Robot, using ROS, that is controllable over the internet using ROS plugins for rosbridge_websocket.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    <script type="text/javascript" type="text/javascript">

        var ros = new ROSLIB.Ros({
          url : 'ws://glados-cpr:9090'
        });

        ros.on('connection', function() {
          console.log('Connected to websocket server.');
        });

        ros.on('error', function(error) {
          console.log('Error connecting to websocket server: ', error);
        });

        ros.on('close', function() {
          console.log('Connection to websocket server closed.');
        });

        // Publishing a Topic
        // ------------------

        var base = new ROSLIB.Topic({
          ros : ros,
          name : '/base',
          messageType : 'std_msgs/UInt8'
        });
        var base_val = new ROSLIB.Message({data : 0});

        var elbow = new ROSLIB.Topic({
          ros : ros,
          name : '/elbow',
          messageType : 'std_msgs/UInt8'
        });
        var elbow_val = new ROSLIB.Message({data : 0});

        var wrist = new ROSLIB.Topic({
          ros : ros,
          name : '/wrist',
          messageType : 'std_msgs/UInt8'
        });
        var wrist_val = new ROSLIB.Message({data : 0});

        var head = new ROSLIB.Topic({
          ros : ros,
          name : '/head',
          messageType : 'std_msgs/UInt8'
        });
        var head_val = new ROSLIB.Message({data : 0});

        function UP() {
           elbow_val.data = elbow_val.data + 5;
           elbow.publish(elbow_val);
        }

        function DOWN() {
           elbow_val.data = elbow_val.data - 5;
           elbow.publish(elbow_val);
        } 

        function LEFT() {
           base_val.data = base_val.data + 5;
           base.publish(base_val);
        } 

        function RIGHT() {
           base_val.data = base_val.data - 5;
           base.publish(base_val);
        } 

        function POWER_OFF() {
           base_val.data = 0;
           base.publish(base_val);
           elbow_val.data = 0;
           elbow.publish(elbow_val);
           wrist_val.data = 0;
           wrist.publish(wrist_val);
           head_val.data = 0;
           head.publish(head_val);
        }

        var speech = new ROSLIB.Topic({
            ros : ros,
            name : '/speech',
            messageType : 'std_msgs/String'
        });
        var speech_val = new ROSLIB.Message({data : ""});

        function SAY(){
        speech_val.data = document.getElementById('TEXTBOX_SPEECH').value;
        speech.publish(speech_val);

        var color_head = new ROSLIB.Topic({
            ros : ros,
            name : '/color_head',
            messageType : 'std_msgs/ColorRGBA'
        });
        var cHead_val = new ROSLIB.Message({r:0, g:0, b:0, a:0});

        var color_body = new ROSLIB.Topic({
            ros : ros,
            name : '/color_body',
            messageType : 'std_msgs/ColorRGBA'
        });
        var cBody_val = new ROSLIB.Message({r:0, g:0, b:0, a:0});

        function updateHead(color) {
            cHead_val.r = color.rgb[0];
            cHead_val.g = color.rgb[1];
            cHead_val.b = color.rgb[2];
            color_head.publish(cHead_val);
        }
        function updateBody(color) {
            cBody_val.r = color.rgb[0];
            cBody_val.g = color.rgb[1];
            cBody_val.b = color.rgb[2];
            color_body.publish(cBody_val);
        }

        }

    </script>
    <script type="text/javascript" src="jscolor.js"></script>
</head>
<body>
    <center>
        <h1>GLaDOS Control Centre</h1>
        <img src="/?action=stream" />
        <br>
        <input id="POWER OFF" type="button" value="POWER OFF" onclick="POWER_OFF();" />
        <br>
        <input id="UP" type="button" value="UP" onclick="UP();" />
        <br>
        <input id="LEFT" type="button" value="LEFT" onclick="LEFT();" />
        <input id="RIGHT" type="button" value="RIGHT" onclick="RIGHT();" />
        <br>
        <input id="DOWN" type="button" value="DOWN" onclick="DOWN();" />
        <br>
        <input type="text" id="TEXTBOX_SPEECH">
        <input id="SAY" type="button" value="SAY" onclick="SAY();" />
        <br>
        Head Colour: <input class="color" onchange="updateHead(this.color);" value="0800FF">
        <br>
        Body Colour: <input class="color {onImmediateChange:'updateBody(this);'}" value="FFF82B">
    </center>
</body>

Solution

You're defining the updateHead and updateBody functions inside the SAY function. Due to javascripts function scope they're not available outside of the SAY function.

You need to define them in global/window scope(move them out of the SAY function) to access them like you do.