CODEWITHSUNDEEP
javascripthtmlcss
Aaron
Aaron

Reputation: 111

JavaScript/HTML5 addEventListener() not working with <select> tag

I'm currently working with drawing on a canvas using HTML5/JavaScript/CSS3. The canvas line width and reset controls are working fine. However, the color selection conrol in the tag is not. Thanks in advance for any assistance.

<!DOCTYPE html>
<html>
<head>
<title>Etch a Doodle</title>
<style type="text/css">
#header
{
    text-align: center;
    font: 22px bold;
    font-family: Verdana, Times, serif;
}

#content
{
    padding-left: 25%;
    padding-top: 20px;
    text-align: center;
    width: 50%;
    display: block;
}

#content canvas {
    border: 1px solid;
    border-color: black;
}

#content span
{
    display: inline;
}
</style>
</head>
<body>

<div id="header">
    Draw to your heart's content!
</div>
<div id="content">
    <canvas id="drawingPad" width="500" height="500"></canvas>
    <br>
    <span>
        Line width (between 1 and 5): <input id="number" type="number" name="quantity"     min="1" max="5" value="1">
        <select id="colorList">
            <option value="red" selected="selected">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select> 
        <input id="reset" type="button" value="Reset"></input>
    </span>
</div>

<script type="text/javascript">
    if(window.addEventListener) {
        window.addEventListener('load', function () {
            // Canvas is the canvas
            // Context is the canvas' context
            // Tool is the 'pen' we are drawing with
            var canvas, context, tool, reset;
            // Line properties
            var width, color;

            // Initializes all the other page's event listeners.
            function init () {    
                canvas = document.getElementById('drawingPad');
                if (!canvas) {
                    return;
                }
                if (!canvas.getContext) {
                    return;
                } 
                context = canvas.getContext('2d');
                if (!context) {
                    return;
                }

                // Creates new 'pen'.
                tool = new pen();

                // Attach the listeners to the canvas.
                canvas.addEventListener('mousedown', ev_canvas, false);
                canvas.addEventListener('mousemove', ev_canvas, false);
                canvas.addEventListener('mouseup', ev_canvas, false);

                // Attach the listener to the reset button.
                reset = document.getElementById('reset');
                reset.addEventListener("click", resetCanvas, false);

                // Attach listener to number input.
                // This is the best way to make sure the
                // width is set on any event.
                width = document.getElementById('number');
                width.addEventListener("change", setWidth, false);
                width.addEventListener("keypress", width.onchange(), false);
                width.addEventListener("paste", width.onchange(), false);
                width.addEventListener("input", width.onchange(), false);

                //Attach listener to the color chooser.
                color = document.getElementById('colorList')
                color.addEventListener("click", setColor, false);
            }

            // The pen has its own listeners within, as well as a variable
            // to check if we are still drawing.
            function pen () {
                var tool = this;
                this.started = false;

                // This starts the pencil drawing.
                this.mousedown = function (ev) {
                    context.beginPath();
                    context.moveTo(ev._x, ev._y);
                    tool.started = true;
                };

                // This function is called every time you move the mouse. Obviously, it only 
                // draws if the tool.started state is set to true (when you are holding down 
                // the mouse button).
                this.mousemove = function (ev) {
                    if (tool.started) {
                        context.lineTo(ev._x, ev._y);
                        context.stroke();
                    }
                };

                // This is called when you release the mouse button.
                this.mouseup = function (ev) {
                    if (tool.started) {
                        tool.mousemove(ev);
                        tool.started = false;
                    }
                };
            }

            // This function determines the mouse position relative to the canvas element.
            function ev_canvas (ev) {
                if (ev.layerX || ev.layerX == 0) { // Firefox
                    ev._x = ev.layerX;
                    ev._y = ev.layerY;
                } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                    ev._x = ev.offsetX;
                    ev._y = ev.offsetY;
                }

                // Call the event handler of the tool.
                var func = tool[ev.type];
                if (func) {
                    func(ev);
                }
            }

            // Clears the canvas of all drawings.
            function resetCanvas() {    
                context.clearRect(0, 0, canvas.width, canvas.height);
            }

            // Sets the width of the line.
            function setWidth() {
                context.lineWidth = parseInt(width.value);
            }

            // Sets the line color.
            function setColor() {
                alert(color.options[color.selectedIndex].value);
                context.strokeStyle = color.options[color.selectedIndex].value;

            }

            init();

        }, false); }
</script>
</body>
</html>

Upvotes: 1

Views: 3694

Answers (2)

StackSlave
StackSlave

Reputation: 10627

The following code is wrong:

width.addEventListener("keypress", width.onchange(), false);
width.addEventListener("paste", width.onchange(), false);
width.addEventListener("input", width.onchange(), false);

addEventListener()'s 2nd argument has to be either an unexecuted Function without a parameter or an Anonymous Function. Oh, and width.onchange would still not work.

Upvotes: 0

Bergi
Bergi

Reputation: 664395

The statement is just never executed. Look into your console to see that

width.addEventListener("keypress", width.onchange(), false);

is throwing an exception - width.onchange is no function, but you're trying to execute it. By adding an event listener you are not creating a function on the on* property. And you must not execute the handlers you are trying to attach - no parentheses!

Instead, just bind the setWidth function itself:

width.addEventListener("change", setWidth, false);
width.addEventListener("keypress", setWidth, false);
width.addEventListener("paste", setWidth, false);
width.addEventListener("input", setWidth, false);

Btw, your load handler on window is unnecessary, when the script is in the bottom of the body it's executed after the elements in the body (which you are accessing) have been constructed.

Upvotes: 1

Related Questions