JavaScript / HTML5 addEventListener（）無法使用 <select>標簽

Question

我目前正在使用HTML5 / JavaScript / CSS3在畫布上繪圖。 畫布的線寬和重置控件工作正常。 但是，標簽中的顏色選擇控制不是。 在此先感謝您的協助。

<!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>

Answer 1

該語句永遠不會執行。 查看您的控制台以查看

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

引發異常width.onchange沒有功能，但是您正在嘗試執行它。 通過添加事件偵聽器，您不會在on*屬性上創建函數。 而且，您一定不要執行要附加的處理程序- 不能有括號！

相反，只需綁定setWidth函數本身即可：

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

順便說一句，在窗口上的load處理程序是不必要的，當腳本位於主體的底部時，它是在構造了要訪問的主體中的元素之后執行的。

Answer 2

以下代碼是錯誤的：

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

addEventListener()的^第二個參數必須是沒有參數的未執行函數或匿名函數。 哦， width.onchange仍然無法正常工作。

JavaScript / HTML5 addEventListener（）無法使用 <select>標簽

問題描述

2 個解決方案

解決方案1
1 已采納 2013-10-10 22:27:02

解決方案2
0 2013-10-10 22:28:17

JavaScript / HTML5 addEventListener（）無法使用 <select>標簽

問題描述

2 個解決方案

解決方案1 1 已采納 2013-10-10 22:27:02

解決方案2 0 2013-10-10 22:28:17

解決方案1
1 已采納 2013-10-10 22:27:02

解決方案2
0 2013-10-10 22:28:17