cercles Insertion sur le clic de souris à l'aide JQuery

-2

Just a commencé à apprendre cette langue aujourd'hui (je suis désolé si cela est une question stupide), mais je suis en train de comprendre comment insérer des cercles sur une page Web. Je trouve ici un exemple de code: http://jsfiddle.net/7xQZ2/ Cependant, lorsque je tente de l'exécuter à partir d'un seul fichier, la partie de script est en cours d'exécution ne pour une raison quelconque. J'ai essayé de changer autour de <body> et <script>. C'est simplement afficher une boîte avec les coordonnées (0,0). Il reste statique et ne change pas lorsque je bouge ma souris.cercles Insertion sur le clic de souris à l'aide JQuery

<!DOCTYPE html> 

<html> 
<head> 
    <h2 id="status2">0, 0</h2> 
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special"> 
    </canvas> 
</head> 

<body> 
    <script> 
     jQuery(document).ready(function(){ 
      $("#special").click(function(e){ 

       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       /* var c=document.getElementById("special"); */ 
       var ctx= this.getContext("2d"); /*c.getContext("2d");*/ 
       ctx.beginPath(); 
       ctx.arc(x, y, 10,0, 2*Math.PI); 
       ctx.stroke(); 
       $('#status2').html(x +', '+ y); 
      }); 
     }) 
    </script> 
</body> 

</html>

Source

2014-07-02 user3085290

Le HTML passe entre les balises body et le script passe entre les balises head. – j08691

wh-pourquoi votre corps est-il contenu dans votre tag ''? – Jnatalzia

Tout d'abord, vous utilisez la bibliothèque jQuery et vous ne l'avez pas incluse. Deuxièmement, vous avez html invalide parce que vous avez des éléments dans . Figure ceux dehors et cela peut fonctionner. –

Vous devez inclure jQuery. Placez cette ligne dans la section head:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

déplacer aussi ce que vous avez dans head à body, et vice versa.

Source

2014-07-02 20:57:47

Veuillez définir une réponse comme acceptée. –

Votre code utilise la bibliothèque jQuery. Assurez-vous de l'inclure avant d'utiliser votre code.

En outre, tous les éléments HTML qui vont être dans votre page doivent être dans la balise corps , pas la tête un.

<!DOCTYPE html> 
<html> 
<body> 
    <h2 id="status2">0, 0</h2> 
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special"> 
    </canvas> 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script> 
     jQuery(document).ready(function(){ 
      $("#special").click(function(e){ 

       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       /* var c=document.getElementById("special"); */ 
       var ctx= this.getContext("2d"); /*c.getContext("2d");*/ 
       ctx.beginPath(); 
       ctx.arc(x, y, 10,0, 2*Math.PI); 
       ctx.stroke(); 
       $('#status2').html(x +', '+ y); 
      }); 
     }) 
    </script> 
</body> 
</html>

Source

2014-07-02 20:59:48 blex

Si vous avez seulement ce que votre HTML

<!DOCTYPE html> 

<html> 
<head> 
    <h2 id="status2">0, 0</h2> 
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special"> 
    </canvas> 
</head> 

<body> 
    <script> 
     jQuery(document).ready(function(){ 
      $("#special").click(function(e){ 

       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       /* var c=document.getElementById("special"); */ 
       var ctx= this.getContext("2d"); /*c.getContext("2d");*/ 
       ctx.beginPath(); 
       ctx.arc(x, y, 10,0, 2*Math.PI); 
       ctx.stroke(); 
       $('#status2').html(x +', '+ y); 
      }); 
     }) 
    </script> 
</body> 

</html>

Alors oui, cela ne fonctionnera pas. Parce que le code que vous utilisez appartient à la bibliothèque jQuery de JavaScript. Ce qui vous oblige à inclure jQuery dans votre code. Ce n'est pas intégré dans chaque navigateur.

Utilisez ce code pour l'ajouter.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Source

2014-07-02 21:00:28

cercles Insertion sur le clic de souris à l'aide JQuery

Répondre

Questions connexes