Klickpunkte werden nicht richtig angezeigt

[Matthiasdk]

Hallo Communety,
Ich habe vor knab einem halben Jahr eine webseite gebaut für ein PC Spiel.
Da habe ich eine idee für eine funktion gehabt das man doch auf die map punkte setzen kann und diese abspeichern lassen kann.
Da ich mit php html und css nicht wirklich weiterkam habe ich mich in js reingehangelt.
Doch nun stehe ich vor einem Problem was seit knapp einem halben Jahr herrscht und zwar ich kann auf das Bild klicken dann erscheint ein Punkt dann klicke ich wieder auf das Bild und der punkt verschiebt sich aber er hinterlässt keinen Punkt.
Kann mir da jemand helfen wo mein Fehler ist.
Ich erstelle die punkte mit einer schleife in einem array wie ihr in den nachfolgenden Skripts denke ich mal besser erkennen könnt wie ich.
Zu mir selbst ich habe nie wirklich js gelernt habe es mir durch googel und anderen sprachen zusammen gedacht und auch Skripts kopiert und abgeändert.

Ich rufe eine Funktion auf die einen wert in ein Formular übergibt.

<script type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
 
   function test(Wert)
{

        
           
   document.getElementById("outputfield").value = Wert;
}
// -->
</script>

<div class=" box north"><a href="include/deff.php" class=" popup_oeffnen" onclick="<?php echo 'test('.$map->Green['56']['ID'].')'; ?>"><?php echo "<img src=img/icons/camp_".$map->Green['56']['owner'].".png>";?><span><?php $map->anzeigen(56) ?></span></a><div class="count"> <?php echo '<script type="text/javascript">countdown('.$map->Green['56']['time'].' )</script>'; ?></div></div>

es öffnet sich per klick ein popup das mit Jquery gemacht ist.

in dem Popup ist ein Formular wo der wert von der Index übergeben wird.

<form action="deff.php" method="GET" name="deff">
    <fieldset>
        <legend>Registieren</legend>
        <input id="outputfield" name="outputfield" type="text" value=""</input>
        <fieldset><legend>Gestellte Deff</legend>
            <label style="margin-left: 15px;">Pfeilwagen<input type="text" class="integer success" value="" id="pfeili" name="pfeil"></label><br>
        <label>&Uuml; Pfeilwagen<input type="text" class="integer success" name="uepfeil"></label><br>
        <label style="margin-left: 43px;" >Baliste<input type="text"  class="integer success"  name="bali"></label><br>
        <label style="margin-left: 28px;">&Umacr; Baliste<input type="text"  class="integer success" name="uebali"></label><br>
        <label style="margin-left: 59px;" >Kata<input type="text" class="integer success" name="kata"></label><br>
        <label style="margin-left: 44px;" >&Umacr; kata<input type="text" class="integer success" name="uekata"></label><br>
        <label style="margin-left: 59px;">Treb<input type="text" class="integer success" name="treb"></label><br>
        <label style="margin-left: 44px;">&Umacr; Treb<input type="text" class="integer success" name="uetreb"></label><br>
        </fieldset>
<?php include 'img.php'; ?>
<a href="javascript:link()" id="send" type="submit" >Absenden</a>
        

        
        
        
</form>

So die aufgerufenen Img.php sieht wie folgt aus diese lädt dann das richtige bilde.

<img id="canvas"  src="../img/left.png"  >
<div class="box2" name="box2" style="background-color: green; width: 10px; position: absolute;     height: 10px; border-radius: 100%;">
    
</div>
<img> 

So und die click.js soll dann jeden mausklick speichern und nachher in die URL packen. Wie gesagt ich habe das strippt abgeändert und geforscht und so kram aber da bleibe ich hängen.

ich denke mal das ich es mega kompliziert mache und es wahrscheinlich mit jquery einfacher gehen würde aber da ich ka von jquery habe und nicht wirklich plan von js nur so bissel hänge ich halt bedingt fest

            function linkClick() {
                document.getElementById('clicked').value = ++clicks;
                
            }




            document.addEventListener("DOMContentLoaded", init, false);

            function init()
            {
                var canvas = document.getElementById("canvas");
                canvas.addEventListener("mousedown", getPosition, false);
                
            }
            
            function points(){
                
            }
            
            var clicks = 0;
            var x = new Number();
            var y = new Number();
            function getPosition(event)
            {

                var canvas = document.getElementById("canvas");

                if (event.x != undefined && event.y != undefined)
                {
                    x[clicks] = event.x;
                    y[clicks] = event.y;
                }
                else // Firefox method to get the position
                {
                    ++clicks
                    x[clicks] = event.clientX + document.body.scrollLeft +
                            document.documentElement.scrollLeft;
                    y[clicks] = event.clientY + document.body.scrollTop +
                            document.documentElement.scrollTop;
                }
                
               x[clicks] -= canvas.offsetLeft;
                y[clicks] -= canvas.offsetTop;
                
                x[clicks] -= popup.offsetLeft;
               // y[clicks] -= popup.offsetTop;
                y[clicks] += 20;
                x[clicks] += 5;
                
                               for (var i = 1; i <= clicks; i++) {
                          
                          
                document.getElementsByClassName("box2")[0].style.left = x[i]+"px";
                document.getElementsByClassName("box2")[0].style.top = y[i]+"px";
                 //      alert(x[i]+","+y[i]);   
                 
                }
                url();

                
            }
             var test = "url?x1="+x[1]+"&y1="+y[1];
            var dl = 2;
            function url() {
              
               if (clicks > 1){
                for (dl; dl <= clicks; dl++){
              test = test+"&x"+dl+"="+x[dl]+"&y"+dl+"="+y[dl];
            }
        }else{
            var pfeili;
              pfeili = document.getElementById("pfeili").value;
       var uepfeili;
        uepfeili = document.getElementById("uepfeil").value;
        var bali;
            bali = document.getElementById("bali").value;
        var uebali;
            uebali = document.getElementById("uebali").value;
        var kata;
            kata = document.getElementById("kata").value;
        var uekata;
            uekata = document.getElementById("uekata").value;
        var treb;
         treb = document.getElementById("treb").value;
        var uetreb;
            uetreb = document.getElementById("uetreb").value;
             test = "?pfeili="+pfeili+"&uepfeili="+uepfeil+"&bali="+bali+"&uebali="+uebali+"&kata="+kata+"&uekata="+uekata+"&treb="+treb+"&uetreb="+uetreb+"&x1="+x[1]+"&y1="+y[1];
        }
            }
    function link() {
       
            
            
    document.getElementById("send").href = test;
    } 

So wie kriege ich hin das bei jedem click auf das Bild ein punkt an der position bleibt und dieser erst verschwindet wen das Formular abgeschickt wird rein praktisch will ich noch das man auswählen kann welche farbe der punkt hat und dieser dann in einem extra array ist aber damit habe ich noch nicht angefangen ist also momentan unwichtig

[monolith]

Kannst du bitte Debugging betreiben und das Problem weiter eingrenzen? Mit den einzelnen Codeteilen möchte ich ungern arbeiten.

[Matthiasdk]

Ich habe das ganze mal auf meine webseite gestellt damit ihr es sehen könnt

link http://buendi.de/wvw/

Hier ein Bild wie ihr zur Funktion kommt, bei klicken des umrandeten Symbols auf dem Bild:
diese seite ist prinzipiel noch nicht online es fehlt noch so einiges
das ist nur eine vorab Version und wie ihr dan sehen werdet verschwindet der punkt jedes mal wieder er soll aber da bleiben so das man sie nacher sehen kann die ganzen punkte
ich hoffe ihr könnt an dem beispiel sehen was ich meine


ich habe mal ein neues script mit jquery erstellt

<img id='left' src='img/left.png' />


<script type="text/javascript">
    var klick = 0;
    var x = new Array;
    var y = new Array;
    $(document).bind('click', function () {
        // Add a click-handler to the image.
        $('#left').bind('click', function (ev) {
            var $img = $(ev.target);

            var offset = $img.offset(); // Offset 
            var xMargin = ($img.outerWidth() - $img.width()) / 2;
            var yMargin = ($img.outerHeight() - $img.height()) / 2;
  
            
             x[klick] = (ev.clientX + xMargin) - offset.left;
             y[klick] = (ev.clientY + yMargin) - offset.top;
             
          //  alert('clicked at x: ' + x[klick] + ', y: ' + y[klick]);
            klick++;
        });
    });
    
$('#left').click(function() {
    $("<div>", {
        id: "test",
        css: {
            "height": '10px',
            "width": '10px',
            "left": x+'px',
            "top": y+'px',
            "background": "yellow",
            "position": "absolute"
        }
    }).appendTo('#left');
  
 
});
</script> 

ich habe das problem das ich ka habe wie ich die boxen in das bild bekomme wie ich das img ansteuere