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:

<html>
<head>
<title>Maci játszik 1.</title>

<script type="text/Javascript">
i=1;
	function rajzol(x,y){
		/*A pont adatainak kiírása a koordinátarendszer mellé!*/
		var pontadatok=document.createElement('FORM');
		pontadatok.setAttribute('ID','pont'+i);
		pontadatok.innerHTML="<b>"+i+". pont:</b><br>x:&nbsp;"+x+"<br>y:&nbsp;"+y+"<br>";
		document.getElementById('pontok').appendChild(pontadatok);
		
		var torles=document.createElement('INPUT');
		torles.setAttribute('type','button');
		torles.setAttribute('VALUE','Törlés');
		torles.setAttribute('onClick','torol(pont'+i+')');
		pontadatok.appendChild(torles);
		
		var hr=document.createElement('HR');
		hr.setAttribute('style','width:100%;');
		pontadatok.appendChild(hr);
		
		/*A pont kirajzolása a koordinátarendszerbe!*/
		var pont=document.createElement('DIV')
		pont.setAttribute('style','position:absolute;left:'+(x-2)+'px;top:'+((y-2)*(-1))+'px;width:4px;height:4px;background-color:#000000;');
		document.getElementById('origo').appendChild(pont);
		
		
		
		i++;
	}
	
	function torol(melyiket){
		torlendopont=document.getElementById(melyiket);
		torlendopont.parentNode.removeChild(torlendopont);	
	}

</script>
</head>

<body>
<table>

	<form name="adatok">
	<tr>
	<td colspan=2 align="left" >A pont koordinátái:</td>
	</tr>
	
	<tr>
	<td align="right" >x:</td>
	<td align="left" ><input type="text" name="x" size="4"></td>
	</tr>

	<tr>
	<td align="right">y:</td>
	<td align="left" ><input type="text" name="y" size="4"></td>
	</tr>

	<tr>
	<td align="left" colspan=2><input type="button" name="ok" value="Rajzold!" onClick="rajzol(x.value,y.value)"> 
	</td>

	</tr>

	</form>
</table>

<div ID='tabla' style="position:absolute;left:200px;top:100px;">

<div ID="pontok" style="position:absolute;left:420px;top:0px;">
	<p align="left"><b>Pontok:</b></p>
</div>

<div  ID="koordinatarendszer" style="position:absolute;left:0px;top:0px;width:400px;height:400px;border: 2px ridge white;overflow:hidden;">
	
	<div ID="origo" style="position:absolute;left:200px;top:200px;width:1px;height:1px;background-color:#000000;">
		<sup>&nbsp;0</sup>
		<div style="position:absolute;left:-200px;top:0px;width:400px;height:1px;background-color:#000000;text-align:right">
		<sup>&nbsp;x</sup>
		</div>
		<div style="position:absolute;left:0px;top:-200px;width:1px;height:400px;background-color:#000000;">
		<sup>&nbsp;y</sup>
		</div>
	</div>
</div>
</body>
</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).

        var torles=document.createElement('INPUT');  
        torles.setAttribute('type','button');  
        torles.setAttribute('VALUE','Törlés');
//csak az i változó értékét adjuk át a torol függvénynek 
        torles.setAttribute('onClick','torol('+i+')'); 
        pontadatok.appendChild(torles);

...

        var pont=document.createElement('DIV')  
        pont.setAttribute('style','position:absolute;left:'+(x-2)+'px;top:'+((y-2)*(-1))+'px;width:4px;height:4px;background-color:#000000;');
//adunk azonosítót a pontnak is
        pont.setAttribute('id','potty'+i);  		
        document.getElementById('origo').appendChild(pont);

...

    function torol(melyiket){  
        var torlendopont=document.getElementById('pont'+melyiket);  
        torlendopont.parentNode.removeChild(torlendopont);
//leürítjük a beviteli mezőket
	    document.getElementById('x').value = "";
	    document.getElementById('y').value = "";
//eltávolítjuk a pottyot a koordináta rendszerből	
		var d = document.getElementById('origo');
		var olddiv = document.getElementById('potty'+melyiket);
		 d.removeChild(olddiv);
    }
És egy kis módosítás a html-be:

    <tr>  
    <td align="right" >x:</td> 
<!-- Adunk id-t az űrlapelemeknek, hogy könnyebb legyen törölni. Persze lehet getElementByName-el is hivatkozni rá -->
    <td align="left" ><input type="text" id="x" name="x" size="4"></td>  
    </tr>  
  
    <tr>  
    <td align="right">y:</td>  
    <td align="left" ><input type="text" id="y" name="y" size="4"></td>  
    </tr>