2017-01-23 4 views
0

Ich frage mich, ob jemand mich auf die richtige Richtung zeigen kann, ich habe eine HTML 5 Canvas, die ich zweimal durchlaufen werde.
Das Problem ist, ich kann auf der ersten Leinwand perfekt in Ordnung, aber nicht die zweite, ich kann nicht auf der zweiten Leinwand zeichnen. Warum und was ist die Lösung?Can not remove on second Leinwand

<% 
      for(int i = 0; i < 2; i++){ 
     %> 

     <%@page contentType="text/html" pageEncoding="UTF-8"%> 
     <!DOCTYPE html> 
     <html> 
      <head> 
       <link rel="stylesheet" type="text/css" href="css/sketchpad.css"> 
       <script src="http://code.jquery.com/jquery.min.js"></script> 
       <script src="js/sketchpad.js"></script> 
      </head> 
      <body onload="init();"> 
       <div id="main-content"> 
        <canvas id="can" width="600" height="400" ></canvas> 
       </div> 
      </body> 
     </html> 

     <% 
     } 
     %> 
+2

ID-Werte für Elemente müssen eindeutig sein. Außerdem hast du deine Schleife um die ganze Seite *, was nicht sehr sinnvoll ist. – Pointy

+0

Vielen Dank für die Antwort, ich habe alle möglichen Wege versucht, einschließlich dem, was Sie gerade vorgeschlagen haben, ohne jede Freude. – Tony

+0

Nun poste diese Versuche dann. – Pointy

Antwort

0

Wie Zipfel erwähnt, werden Looping Sie die gesamte Seite, so dass am besten verändert wird, und auch, bist du zwei verschiedene Leinwände zu schaffen, aber mit der gleichen ID für die und es ist Container. Ich kenne JSP nicht, also müssen Sie wahrscheinlich die Variable i korrigieren, um korrekt ausgegeben zu werden. Aber Sie bekommen die Idee

<%@page contentType="text/html" pageEncoding="UTF-8" %> 
<!DOCTYPE html> 
<html> 

    <head> 
     <link rel="stylesheet" type="text/css" href="css/sketchpad.css"> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="js/sketchpad.js"></script> 
    </head> 

    <body onload="init();"> 

     <% 
     for(int i = 0; i < 2; i++){ 
     %> 

     <div class="canvas-container-<%= i %>"> 
      <canvas class="canvas-<%= i %>" width="600" height="400" ></canvas> 
     </div> 

     <% 
     } 
     %> 

    </body> 

</html> 

einfach Ihre JS erinnern oder wo auch immer Sie die Leinwand zu manipulieren, zu verwenden, um den ‚.canvas-XXX‘ (XXX ist die eindeutige ID aus dem i Variable) anstelle von ‚# kann'.