ugrás a tartalomhoz

Beszorultam a Document.removeChild-dal :S

Medve · 2009. Júl. 4. (Szo), 13.32
sziasztok,
Írtam egy tök gagyi honlapot gyakorlásnak.:P
Mindössze annyit tud hogy van egy koordináta rendszer meg egy ürlap ahol be lehet kérni két koordinátát és azokkal a koordinátákkal kirak a progi egy bogyót a koordiátarendszerbe. Eddig jó is az egész csak gondoltam megbonyolítom kicsit.
kiiratom a kooordinátarendzser mellé a pont adatait ey ürlapra amellyen van egy törlés gomb és az elvileg ki kéne törölje az adatokat is meg a bogyót is.Gondoltam erre a document.removeChild parancsot kell használjam de nem igzán akar müködni.

íme a kérdéses honlap:
  1. <html>  
  2. <head>  
  3. <title>Maci játszik 1.</title>  
  4.   
  5. <script type="text/Javascript">  
  6. i=1;  
  7.     function rajzol(x,y){  
  8.         /*A pont adatainak kiírása a koordinátarendszer mellé!*/  
  9.         var pontadatok=document.createElement('FORM');  
  10.         pontadatok.setAttribute('ID','pont'+i);  
  11.         pontadatok.innerHTML="<b>"+i+". pont:</b><br>x:&nbsp;"+x+"<br>y:&nbsp;"+y+"<br>";  
  12.         document.getElementById('pontok').appendChild(pontadatok);  
  13.           
  14.         var torles=document.createElement('INPUT');  
  15.         torles.setAttribute('type','button');  
  16.         torles.setAttribute('VALUE','Törlés');  
  17.         torles.setAttribute('onClick','torol(pont'+i+')');  
  18.         pontadatok.appendChild(torles);  
  19.           
  20.         var hr=document.createElement('HR');  
  21.         hr.setAttribute('style','width:100%;');  
  22.         pontadatok.appendChild(hr);  
  23.           
  24.         /*A pont kirajzolása a koordinátarendszerbe!*/  
  25.         var pont=document.createElement('DIV')  
  26.         pont.setAttribute('style','position:absolute;left:'+(x-2)+'px;top:'+((y-2)*(-1))+'px;width:4px;height:4px;background-color:#000000;');  
  27.         document.getElementById('origo').appendChild(pont);  
  28.           
  29.           
  30.           
  31.         i++;  
  32.     }  
  33.       
  34.     function torol(melyiket){  
  35.         torlendopont=document.getElementById(melyiket);  
  36.         torlendopont.parentNode.removeChild(torlendopont);    
  37.     }  
  38.   
  39. </script>  
  40. </head>  
  41.   
  42. <body>  
  43. <table>  
  44.   
  45.     <form name="adatok">  
  46.     <tr>  
  47.     <td colspan=2 align="left" >A pont koordinátái:</td>  
  48.     </tr>  
  49.       
  50.     <tr>  
  51.     <td align="right" >x:</td>  
  52.     <td align="left" ><input type="text" name="x" size="4"></td>  
  53.     </tr>  
  54.   
  55.     <tr>  
  56.     <td align="right">y:</td>  
  57.     <td align="left" ><input type="text" name="y" size="4"></td>  
  58.     </tr>  
  59.   
  60.     <tr>  
  61.     <td align="left" colspan=2><input type="button" name="ok" value="Rajzold!" onClick="rajzol(x.value,y.value)">   
  62.     </td>  
  63.   
  64.     </tr>  
  65.   
  66.     </form>  
  67. </table>  
  68.   
  69. <div ID='tabla' style="position:absolute;left:200px;top:100px;">  
  70.   
  71. <div ID="pontok" style="position:absolute;left:420px;top:0px;">  
  72.     <p align="left"><b>Pontok:</b></p>  
  73. </div>  
  74.   
  75. <div  ID="koordinatarendszer" style="position:absolute;left:0px;top:0px;width:400px;height:400px;border: 2px ridge white;overflow:hidden;">  
  76.       
  77.     <div ID="origo" style="position:absolute;left:200px;top:200px;width:1px;height:1px;background-color:#000000;">  
  78.         <sup>&nbsp;0</sup>  
  79.         <div style="position:absolute;left:-200px;top:0px;width:400px;height:1px;background-color:#000000;text-align:right">  
  80.         <sup>&nbsp;x</sup>  
  81.         </div>  
  82.         <div style="position:absolute;left:0px;top:-200px;width:1px;height:400px;background-color:#000000;">  
  83.         <sup>&nbsp;y</sup>  
  84.         </div>  
  85.     </div>  
  86. </div>  
  87. </body>  
  88. </html>  
‹ Image nyomtatáshoz CSS - több stíluslap közti váltás ›
 ■
1

egy lehetséges megoldás

kerzo · 2009. Júl. 6. (H), 10.22
Összeütöttem egy lehetséges megoldást. Amikor létrehozod a törlés gombot, akkor ne az egész azonosító nevet add meg, hanem csak a sorszámát. Egyébként ebben volt eredetileg a hiba, mert a kimented torol(pont1) volt torol('pont1') helyett.
Ha így teszel, akkor törlésnél könnnyebb megadni a pont azonosítóját, amit természetesen létre kell hozni (a kódban "potty" néven szerepel).
  1.         var torles=document.createElement('INPUT');    
  2.         torles.setAttribute('type','button');    
  3.         torles.setAttribute('VALUE','Törlés');  
  4. //csak az i változó értékét adjuk át a torol függvénynek   
  5.         torles.setAttribute('onClick','torol('+i+')');   
  6.         pontadatok.appendChild(torles);  
  7.   
  8. ...  
  9.   
  10.         var pont=document.createElement('DIV')    
  11.         pont.setAttribute('style','position:absolute;left:'+(x-2)+'px;top:'+((y-2)*(-1))+'px;width:4px;height:4px;background-color:#000000;');  
  12. //adunk azonosítót a pontnak is  
  13.         pont.setAttribute('id','potty'+i);            
  14.         document.getElementById('origo').appendChild(pont);  
  15.   
  16. ...  
  17.   
  18.     function torol(melyiket){    
  19.         var torlendopont=document.getElementById('pont'+melyiket);    
  20.         torlendopont.parentNode.removeChild(torlendopont);  
  21. //leürítjük a beviteli mezőket  
  22.         document.getElementById('x').value = "";  
  23.         document.getElementById('y').value = "";  
  24. //eltávolítjuk a pottyot a koordináta rendszerből     
  25.         var d = document.getElementById('origo');  
  26.         var olddiv = document.getElementById('potty'+melyiket);  
  27.          d.removeChild(olddiv);  
  28.     }   
És egy kis módosítás a html-be:
  1.     <tr>    
  2.     <td align="right" >x:</td>   
  3. <!-- Adunk id-t az űrlapelemeknek, hogy könnyebb legyen törölni. Persze lehet getElementByName-el is hivatkozni rá -->  
  4.     <td align="left" ><input type="text" id="x" name="x" size="4"></td>    
  5.     </tr>    
  6.     
  7.     <tr>    
  8.     <td align="right">y:</td>    
  9.     <td align="left" ><input type="text" id="y" name="y" size="4"></td>    
  10.     </tr>