2017-10-24 6 views
1

Ich versuche eine jQuery-Funktion zu erstellen, die eine Form in die Zeichenfläche druckt, wenn ich darauf klicke. Aber jQuery scheint die Funktion (makeCircle()) nicht aufzurufen. Stimmt etwas nicht mit der Syntax oder etwas, was ich mit der Funktion außerhalb von jQuery zu tun habe?Aufruf einer JS-Funktion in jQuery (mousedown)

HTML Code-

<!DOCTYPE html> 
<html> 
    <canvas id = 'board' height = "600" width = "800" style="border:1px solid black";></canvas> 
      <head> 
     <title> Shape Drawing </title> 
    <div id = "links"> 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script src = "functions.js"></script> 
    <link type = "text/css" rel = stylesheet href="main.css"> 

    </div> 

    </head> 
    <body> 
     <h1 id = "shapes_title"> Shapes:</h1> 
     <div id = "buttons"> 
     <button id = 'Circle' onclick="circleTrue()"> Circle </button> 
     <button id = "Square" onclick ="squareTrue()"> Square </button> 
     <button id = "Triangle" onclick="triangleTrue"> Triangle </button> 
     </div> 
    </body> 
</html> 

Mein JavaScript/jQuery -

var c = document.getElementById("board"); 
var ctx = c.getContext('2d'); 
var circle = true; 
var square = false; 
var triangle = false; 
var shape; 

jQuery(function($) { 
var currentMousePos = {x: -1, y: -1}; 
$(document).mousemove(function(event) { 
    currentMousePos.x = event.pageX; 
    currentMousePos.y = event.pageY; 

}); 

}); 






//making circle true 
function circleTrue() { 
    if(circle = false) { 
     circle = true; 
     square = false; 
     triangle = false; 
    } 
} 
function squareTrue() { 
if(square = false) { 
    circle = false; 
    square = true; 
    triangle = false; 
} 
} 
function triangleTrue() { 
    if(triangle = false) { 
     circle = false; 
     square = false; 
     triangle = true; 
    } 
} 


//making the circle (coord no) 
function makeCircle() { 
if(circle = true){ 
ctx.beginPath(); 
ctx.arc(100, 100, 50, 40, 0, 2*Math.PI); 
ctx.stroke(); 
} 
else{ 
    console.log("You have not selected circle as an object!"); 
} 
} 

$(document).ready(function() { 
//circle color jquery 
$("#Circle").mouseover(function() { 
    $(this).css("color", "green"); 
}); 
$("#Circle").mouseout(function(){ 
    $(this).css("color", 'white'); 
}); 

$("#Square").mouseover(function() { 
    $(this).css("color", "green"); 

}); 
$("#Square").mouseout(function() { 
    $(this).css("color", "white"); 
}); 
$("#Triangle").mouseover(function() { 
    $(this).css("color", "green"); 
}); 
$("#Triangle").mouseout(function() { 
    $(this).css("color", "white"); 
}); 
$("c").mousedown(function() { 
    makeCircle(); 
}); 
}); 
+0

Welche Element verwenden, versuchen Sie, mit "c" zum Ziel? Nimm die Anführungszeichen weg, wenn du versuchst, die oben definierte Variable im Skript – Taplar

+1

'$ (" c ") zu verwenden. Mousedow 'was ist' c'?, Es gibt kein 'c' -Tag in deinem html. –

Antwort

1

Sie verwenden "c" als Selektor, der keine Elemente mit dem Tag-Namen nicht finden. Selbst wenn es ein ID-Selektor war #c, sehe ich keine Elemente mit dieser ID.

Auch innerhalb makeCircle, Sie haben if(circle = true){, die circle === true oder nur circle statt circle = true verwendet werden soll. In der Tat haben Sie eine Reihe von if Aussagen, die so sind.

+0

Ich dachte, das wäre nur eine ID. Muss ich dieses "Board" machen, welches die gleiche ID wie mein HTML-Canvas ist? –

+0

@Slasher: Wenn Sie das Element mit der ID 'board' auswählen wollen, sollte es' # board' sein. – llama

+0

Alternativ können Sie '$ (c)' verwenden, ohne die Anführungszeichen um 'c' –

0

Sie müssen den richtigen Selektor übergeben. Wie Sie Element erhalten mit var c = document.getElementById("board"); müssen Sie c Variable statt String "c" oder verwenden Sie direkt ID #board

var c = document.getElementById("board"); 
 
var ctx = c.getContext('2d'); 
 
var circle = true; 
 
var square = false; 
 
var triangle = false; 
 
var shape; 
 

 
jQuery(function($) { 
 
var currentMousePos = {x: -1, y: -1}; 
 
$(document).mousemove(function(event) { 
 
    currentMousePos.x = event.pageX; 
 
    currentMousePos.y = event.pageY; 
 

 
}); 
 

 
}); 
 

 

 

 

 

 

 
//making circle true 
 
function circleTrue() { 
 
    if(circle = false) { 
 
     circle = true; 
 
     square = false; 
 
     triangle = false; 
 
    } 
 
} 
 
function squareTrue() { 
 
if(square = false) { 
 
    circle = false; 
 
    square = true; 
 
    triangle = false; 
 
} 
 
} 
 
function triangleTrue() { 
 
    if(triangle = false) { 
 
     circle = false; 
 
     square = false; 
 
     triangle = true; 
 
    } 
 
} 
 

 

 
//making the circle (coord no) 
 
function makeCircle() { 
 
if(circle = true){ 
 
ctx.beginPath(); 
 
ctx.arc(100, 100, 50, 40, 0, 2*Math.PI); 
 
ctx.stroke(); 
 
} 
 
else{ 
 
    console.log("You have not selected circle as an object!"); 
 
} 
 
} 
 

 
$(document).ready(function() { 
 
//circle color jquery 
 
$("#Circle").mouseover(function() { 
 
    $(this).css("color", "green"); 
 
}); 
 
$("#Circle").mouseout(function(){ 
 
    $(this).css("color", 'white'); 
 
}); 
 

 
$("#Square").mouseover(function() { 
 
    $(this).css("color", "green"); 
 

 
}); 
 
$("#Square").mouseout(function() { 
 
    $(this).css("color", "white"); 
 
}); 
 
$("#Triangle").mouseover(function() { 
 
    $(this).css("color", "green"); 
 
}); 
 
$("#Triangle").mouseout(function() { 
 
    $(this).css("color", "white"); 
 
}); 
 
$(c).mousedown(function() { 
 
    makeCircle(); 
 
}); 
 
});
<!DOCTYPE html> 
 
<html> 
 
    <canvas id = 'board' height = "600" width = "800" style="border:1px solid black";></canvas> 
 
      <head> 
 
     <title> Shape Drawing </title> 
 
    <div id = "links"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src = "functions.js"></script> 
 
    <link type = "text/css" rel = stylesheet href="main.css"> 
 

 
    </div> 
 

 
    </head> 
 
    <body> 
 
     <h1 id = "shapes_title"> Shapes:</h1> 
 
     <div id = "buttons"> 
 
     <button id = 'Circle' onclick="circleTrue()"> Circle </button> 
 
     <button id = "Square" onclick ="squareTrue()"> Square </button> 
 
     <button id = "Triangle" onclick="triangleTrue"> Triangle </button> 
 
     </div> 
 
    </body> 
 
</html>

Verwandte Themen