Ich kann nicht herausfinden, warum ich nicht Farben von Buntstiften in JavaScript ändern kann

Question

Ich habe versucht, eine "malen" wie Anwendung mit HTML/CSS und Javascript zu entwickeln. Ich machte eine Funktion, die, wenn Sie auf einen Zeichenstift klicken, die Farbe ändern sollte, die es zeichnet. Ich benutzte Span, um die Buntstifte zu machen. Ich bin ganz neu mit diesem so weiß ich wirklich nicht, wie zu debuggen dieser issue.s

$(document).ready(function() { 

    var ok = false; 
    var clickX = new Array(); 
    var clickY = new Array(); 
    var clickDrag = new Array(); 
    var clickColor = new Array(); 
    var curent_color = '#000000'; 
    var context = document.getElementById('Canvas').getContext("2d"); 
    console.log(context); 


    $('#Canvas').mousedown(function(e) { 
    var mouseX = e.pageX - this.offsetLeft; 
    var mouseY = e.pageY - this.offsetTop; 

    ok = true; 
    addClick(mouseX, mouseY); 
    redraw(); 

    }); 

    $('#Canvas').mousemove(function(e) { 
    var mouseX = e.pageX - this.offsetLeft; 
    var mouseY = e.pageY - this.offsetTop; 

    if (ok != false) { 
     addClick(mouseX, mouseY, true); 
     redraw(); 
    } 
    }); 

    $('#Canvas').mouseup(function(e) { 
    ok = false; 
    }); 
    $('#Canvas').mouseleave(function(e) { 
    ok = false; 
    }); 

    function addClick(x, y, dragging) { 
    clickX.push(x); 
    clickY.push(y); 
    clickDrag.push(dragging); 
    clickColor.push(curent_color); 

    } 

    function redraw() { 
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 

    context.strokeStyle = curent_color; 
    context.globalAlpha = 0.5; 
    context.lineJoin = "round"; 
    context.lineWidth = 20; 

    for (var i = 0; i < clickX.length; i++) { 
     context.beginPath(); 
     if (clickDrag[i] && i) { 
     context.moveTo(clickX[i - 1], clickY[i - 1]); 
     } else { 
     context.moveTo(clickX[i] - 1, clickY[i]); 
     } 
     context.lineTo(clickX[i], clickY[i]); 
     context.closePath(); 
     context.strokeStyle = clickColor[i]; 
     context.stroke(); 

    } 
    } 

}); 

function changeColor(x) { 

    if (x === 1) { 
    curent_color = '#FF0000'; 
    } else if (x === 2) { 
    curent_color = '#E30058'; 
    } else if (x === 3) { 
    curent_color = '#F0540C'; 
    } else if (x === 4) { 
    curent_color = '#F0CF0C'; 
    } else if (x === 5) { 
    curent_color = '#46BA0B'; 
    } else if (x === 6) { 
    curent_color = '#0C2102'; 
    } else if (x === 7) { 
    curent_color = '#0C2151'; 
    } else if (x === 8) { 
    curent_color = '#2067CF'; 
    } else if (x === 9) { 
    curent_color = '#000000'; 
    } else if (x === 0) { 
    curent_color = '#DD78E3'; 
    } 
} 

Answer 1

Sind Sie sicher, dass changeColor (x) eine ganze Zahl ist, die Bereitstellung und keine String-Version des Wertes? Da Sie 3 Gleichheitszeichen (===) verwenden, müssen Wert und Typ gleich sein.

'1' ist eine Zeichenkette 1 eine ganze Zahl

'1' == 1 1 wahr '1' === zurückkehren wird