probleem 2 nieuw javascript

[JeroenE]

Nieuw probleempje in verband met deze topic.

var circle = new Array();
function Circle(cleft,ctop) {
this.cleft = cleft;
this.ctop = ctop;
};
document.writeln("<button onClick='setCircles();'>Nieuwe cirkels</button>");
function setCircles() {
if (document.images.length == "") {
circle[0] = new Circle(150,150);
} else {
var new_circles = prompt("Hoeveel nieuwe cirkels?","9");
for (var n = 1; n < new_circles; n++) {
var circleleft = 100 + n * 50;
var circletop = n * 50;
circle[n] = new circle(circleleft,circletop);
};
};
document.writeln("<button onClick='setCircles();'>Nieuwe cirkels</button>");
for (var i = 0; i < circle.length; i++) {
document.writeln("<img src='circle.gif' style='position:absolute'>");
document.writeln("<form><input value='125' style='position:absolute;border:0px' size='1'></form>");
document.images[i].style.left = circle[i].cleft;
document.images[i].style.top = circle[i].ctop;
document.forms[i].style.left = circle[i].cleft + 20;
document.forms[i].style.top = circle[i].ctop + 50;
};
};

Bij het laden van de pagina staat er een knop "nieuwe cirkels". Als je erop klikt komt er een cirkel op de juiste plaats : 150 px van links en 150 px van boven.
Er staat ook een nieuwe knop die eigenlijk hetzelfde is als de oorspronkelijke, maar als je erop klikt krijg je een foutmelding "regel 1 teken 1 object wordt verwacht".

Hoe kan dat, terwijl de eerste knop wel correct werkt.

Een tweede vraag is hoe het komt dat de cirkel wel op de juiste plaats terecht komt, en de input in de form niet.

Greetz : Jeren.

 

[Egel]

Je kunt document.writeln alleen tijdens het laden/opbouwen van de pagina gebruiken. Als:
a<script>document.writeln('b')</script>c

circle[n] = new Circle(circleleft,circletop);
Je kunt beter geen variabelen op hoofdletter mengen

De style.position staat in de input, terwijl die in de form hoort.

var circle = new Array();

function Circle(cleft,ctop) {
 this.cleft = cleft;
 this.ctop = ctop;
 };

document.writeln("<button onClick='document.location.reload();'>Nieuwe cirkels</button>");

var new_circles = prompt("Hoeveel nieuwe cirkels?","9");

for (var n = 0; n < new_circles; n++) {
 var circleleft = 100 + n * 50;
 var circletop = n * 50;
 circle[n] = new Circle(circleleft,circletop);
 };

for (var i = 0; i < circle.length; i++) {
 document.writeln("<img src='circle.gif' style='position: absolute' alt='" + i + "'>");
 document.writeln("<form style='position: absolute;'><input style='border: 0px' value='" + i +"' size='1'></form>");
 document.images[i].style.left = circle[i].cleft;
 document.images[i].style.top = circle[i].ctop;
 document.forms[i].style.left = circle[i].cleft + 20;
 document.forms[i].style.top = circle[i].ctop + 50;
 };

Ik heb even de i aan de alt en input toegevoegd zodat je ziet welke bij elkaar horen. Ben benieuwd wat dit gaat worden.


Vr.Gr. Egel.

 

[JeroenE]

Dank je wel voor de (voor mij) nieuwe informatie.

Op welke manier zou ik dan cirkels, alsook inputs, kunnen toevoegen bij de reeds bestaande?
want daar heb ik voorlopig nog het raden naar.

Greetz : Jeren.

 

[Egel]

Op welke manier zou ik dan cirkels, alsook inputs, kunnen toevoegen bij de reeds bestaande?

Dat kan met .innerHTML , bv:

<div id="ff">Inhoud: </div>

var html = '<b>Voorbeeld</b>'
document.getElementById('ff').innerHTML += html;

Je herschrijft dan de inhoud van een tag, in het voorbeeld wordt het: Inhoud: Voorbeeld


Grtz, Egel.

 

[JeroenE]

We zullen dat direct doen (proberen zal wel beter uitgedrukt zijn).

Greetz : Jeren.

 

[JeroenE]

Perfect gelukt. :thumb:
Ik heb er zelfs (met spieken naar een script dat een klok rond je muis laat zweven) voor kunnen zorgen dat de nieuwe cirkels mooi verdeeld worden rond de eerste en dat de onderste cirkel gelijk is aan circle[1].
Ik laat deze topic, ook al zijn de twee probleempjes opgelost, met de status onopgelost, want er komen zeker nog vragen omtrent dit in opbouw zijnde script.

Greetz : Jeren.

 

[JeroenE]

Nieuwe vraag die eigenlijk niet bij javascript hoort, maar wel bij de ontwikkeling van deze presentatie.

Kan ik in de style van een pagina, zoals ik input position absolute kan geven, hetzelfde doen met image?

Greetz : Jeren.

 

[Egel]

Ja. Bv:

<style>
 img { position: absolute;}
 form { position: absolute;}
</style>

Mooier is het met een class:

<style>
 .naamvdclass { position: absolute;}
 .naamvdclass input { border: 0px;}
</style>

<img class="naamvdclass" src="circle.gif" ...>
<form class="naamvdclass"><input ...></form>

Vr.Gr. Egel.

 

[JeroenE]

En weer komen we aan een porbleempje.

Ik heb de het volgende :

function setIboProps(num) {
	document.getElementById("plan").innerHTML += "<img src='circle.gif' name='img" + num + "'>" +
// krijgt de naam img + num omdat er in de html al andere images aanwezig zijn (de button)
// die het geheel niet doen kloppen als je de cirkels aanspreekt met images[num]
	"<form><input value='125'></form>";
	document.img[num].style.left = circle[num].cleft;
	document.img[num].style.top = circle[num].ctop;
	document.forms[num].style.left = circle[num].cleft + 12;
	document.forms[num].style.top = circle[num].ctop + 42;
};

Als ik die functie aanroep, dan krijg ik de volgende foutmelding :

"document.img is leeg of geen object" tewijl die toch bestaat?

Wat zit er mis? Ik ben er zeker van dat het te maken heeft met het adresseren naar die img, maar geraak er niet wijs uit hoe het wel moet.

Eigenaardig genoeg werkt hetzelfde wel als ik een knop maak die niet verandert en echt in de html beschreven wordt als button, en niet met een image.

Greetz : Jeren.

 

[Egel]

Is num een getal? (bv 12)

name='img" + num + "' maakt dan name='img12' en dat is niet gelijk aan img[12]

Misschien document.getElementById('img' + num).style.left = enz?

Of document.images[num] zoals de document.forms[num]


Vr.Gr. Egel.

 

[JeroenE]

Dat dacht ik al.

Thx, ga het proberen.

Greetz : Jeren.

 

[JeroenE]

Het werkt al.

:thumb:

Greetz : Jeren.

 

[Egel]

document.images[num]

zou ook nog kunnen als de images gelijk opgaan met de forms.


Grtz, Egel.

 

[JeroenE]

Eerst was het zo, maar doordat de 'knop' eigenlijk een image is met een onclick-event, is dat niet meer zo.

Greetz : Jeren.