Avatar billede kgpedersen Nybegynder
18. februar 2005 - 14:22 Der er 23 kommentarer og
1 løsning

problemer med createelement

Jeg har problemer med at få dette script til at virke.

Jeg har fjernet alt andet end det der fejler, for at i ikke skulle alt muligt ligegyldigt kode.

<html>
<head><title>Registrering af pensionsprodukter</title>
<script language='javaScript'>

function newElement(rowNumber) {
var oInput = document.createElement('input');
oInput.name = 'fokus';
oInput.id = 'fokus';
document.body.appendChild(oInput);
}

</script>
</head>

<body>
<form action='/dw/cgi-bin/broker' name='MyForm' id='MyFormId' method='post'>
<script language='javaScript'>
var rowNumber=1;
newElement(rowNumber);

</script>
</form>
</body>
</html>


Jeg har et tilsvarende script hvor de forskellige elementer bliver indsat i en table istedet for bare i body, og der virker det fint.
Hvad mangler der her?

Kistian
Avatar billede roenving Novice
18. februar 2005 - 14:25 #1
Body er ikke færdig-initialiseret på det tidspunkt, hvor koden udføres ...

Prøv at starte den onload:

<body onload="newElement(1);">
Avatar billede roenving Novice
18. februar 2005 - 14:25 #2
-- og så skal inputten vel også smides ind i form-elementet ?-)
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 15:45 #3
Okay, men hvordan kan det være at det her med tables virker.

<!-- saved from url=(0022)http://internet.e-mail -->
<html>
<head><title>Registrering af pensionsprodukter</title><LINK type=text/css rel=stylesheet href="/sasweb/wrc/css/Styles.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="cache-control" content="no-cache">
<META HTTP-EQUIV=\"Cache-Control\" CONTENT=\"no-store\"><META HTTP-EQUIV=\"Pragma\" CONTENT=\"no-cache\"><meta http-equiv="expires" content="fri, 10 apr 1998 20:00:00 gmt">
<script language="javaScript">var prod = new Array(19);
prod[0 ] = '13300 £          Indekskonto ';
prod[1 ] = '13310 £          Indekskonto under udbetaling ';
prod[2 ] = '13400 £          Kapitalpension - arbejdsgiver ';
prod[3 ] = '13450 £          Kapitalpension, privat ';
prod[4 ] = '13700 £          Ratepension, arbejdsgiver ';
prod[5 ] = '13705 £          Rate, arbejdsgiver - tillæg ';
prod[6 ] = '13710 £          Ratepension, under udbetaling ';
prod[7 ] = '13750 £          Ratepension, privat ';
prod[8 ] = '13760 £          Rate, privat fast indskud ';
prod[9 ] = '13770 £          Rate, privat opfyldningsfradrag ';
prod[10 ] = '13780 £          Rate, privat - tillæg ';
prod[11 ] = '13800 £          Selvpensionering ';
prod[12 ] = '71100 £          Kapitalpens. arbejdsgiver, per ';
prod[13 ] = '71150 £          Kapitalpension, privat - per ';
prod[14 ] = '71200 £          Ratepension, arbejdsgiver -per ';
prod[15 ] = '71210 £          Ratepens. u/udb, personale ';
prod[16 ] = '71250 £          Ratepension, privat - per ';
prod[17 ] = '71300 £          Indekskonto - personale ';
prod[18 ] = '71310 £          Indeks u/udbetaling, personale ';
var yn = new Array(2);
yn[0] = '0£Nej';
yn[1] = '1£Ja';
function produktFill(box) {
var b = document.getElementById(box);
for (var i=0;i<prod.length;i++) {
parts=prod[i].split("£");
b.options[i]=new Option(parts[0]+parts[1],parts[0],false,false);
}
}
function YNFill(box) {
var b = document.getElementById(box);
for (var i=0;i<yn.length;i++) {
parts=yn[i].split("£");
b.options[i] = new Option(parts[1],parts[0],false,false);
b.options[0].selected=true; }
}
function valg(box,pvalg) {
var b = document.getElementById(box);
for (var i=0;i<pvalg.length;i++) {
for (var j=0;j<b.options.length;j++) {
if (b.options[j].value == pvalg[i]) {
b.options[j].selected=true;
}
}
}
}
function newElement(rowNumber) {
var oInput = document.createElement("input");
oInput.name = 'fokus'+rowNumber+'_';
oInput.id = 'fokus'+rowNumber;
var oTd = document.createElement("td");
oTd.appendChild(oInput);
var oTdProdukt = document.createElement("td");
var oSelect = document.createElement("select");
oSelect.name = 'produkt'+rowNumber+'_';
oSelect.id = 'produkt'+rowNumber;
oSelect.multiple = true;
oSelect.size = 5;
oTdProdukt.appendChild(oSelect);
var oTdSaldo = document.createElement("td");
var oSelect = document.createElement("select");
oSelect.name = 'saldo'+rowNumber+'_';
oSelect.id = 'saldo'+rowNumber;
oSelect.size = 2;
oTdSaldo.appendChild(oSelect);
var oTdDebet = document.createElement("td");
var oSelect = document.createElement("select");
oSelect.name = 'debet'+rowNumber+'_';
oSelect.id = 'debet'+rowNumber;
oSelect.size = 2;
oTdDebet.appendChild(oSelect);
var oTdKredit = document.createElement("td");
var oSelect = document.createElement("select");
oSelect.name = 'kredit'+rowNumber+'_';
oSelect.id = 'kredit'+rowNumber;
oSelect.size = 2;
oTdKredit.appendChild(oSelect);
var oTdIndbet = document.createElement("td");
var oSelect = document.createElement("select");
oSelect.name = 'indbet'+rowNumber+'_';
oSelect.id = 'indbet'+rowNumber;
oSelect.size = 2;
oTdIndbet.appendChild(oSelect);
var oTr = document.createElement("tr");
oTr.appendChild(oTd);
oTr.appendChild(oTdProdukt);
oTr.appendChild(oTdSaldo);
oTr.appendChild(oTdDebet);
oTr.appendChild(oTdKredit);
oTr.appendChild(oTdIndbet);
return oTr;
}
var rowNumber = 0;
function addNewRow() {
rowNumber++;

var oTable = document.getElementById("thetable");
oTable.tBodies[0].appendChild(newElement(rowNumber));
document.getElementById('fokus'+rowNumber).focus();
produktFill('produkt'+rowNumber);
YNFill('saldo'+rowNumber);
YNFill('debet'+rowNumber);
YNFill('kredit'+rowNumber);
YNFill('indbet'+rowNumber);
}
</script>
</head>
<body>

<form action='/dw/cgi-bin/broker' name='MyForm' id='MyFormId' method='post'>
<br><table id="thetable" size="100%" border=0>
<tr>
<td>Fokuspunkt</td>
<td>Produkt(er)</td>
<td>Gns.Saldo</td>
<td>Gns.Debetsaldo</td>
<td>Gns.Kreditsaldo</td>
<td>Indbetalt år til dato</td>
</tr>
</table>
<br>
<script language="javaScript">
addNewRow();
document.getElementById("fokus1").value="Rate ";valg("produkt1",[13700,13705,13710,13750,13760,13770,13780,71200,71210,71250,71300 ]);valg("saldo1",[1 ]);valg("debet1",[1 ]);valg("kredit1",[0 ]);valg("indbet1",[1 ]);
</script>

</form>
</div>
</body>
</html>
Avatar billede roenving Novice
18. februar 2005 - 15:50 #4
Sikkert fordi tabellen er helt færdig på tidspunktet for kaldet, det er hverken form eller body !-)
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 16:01 #5
Ok, når inputten skal ind i form elementet, er det sådan her jeg gør det ;

var form = document.getElementById("Myform");
form.appendChild(newElement(rowNumber));
Avatar billede roenving Novice
18. februar 2005 - 16:04 #6
Det lyder mærkeligt, for funktionen returnerer jo en tabelrække ?-)
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 16:06 #7
Ikke forstået. Hvordan vil du få den ind i formen?
Avatar billede roenving Novice
18. februar 2005 - 16:08 #8
newElement-funktionen er jo skabt til at lave rækker i en tabel, så du må nok have den tabel ind i formen !-)

-- ellers er der ikke noget galt, bare vent med at sætte scriptet igang, til det element, som skal modtage inputtet er færdigt (lukketagget er skrevet !-)
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 16:13 #9
Nej, jeg er netop ved at omskrive den til ikke at lave det i en tabel, men oprette de forskellige elementer i body istedet, så jeg kan styre layoutet via css.
Avatar billede roenving Novice
18. februar 2005 - 16:15 #10
Du kan da sagtens styre layout med css, selvom du har en tabel ?-)
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 16:23 #11
ja, det ved jeg godt. Men jeg flere muligheder hvis de forskellige elementer ikke står i en tabel
Avatar billede olebole Juniormester
18. februar 2005 - 16:45 #12
<ole>

- og de flere muligheder er ...?!?? Såvidt jeg kan se udfra resten af koden, ser det ud til at være en helt oplagt tabel-løsning.

/mvh
</bole>
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 17:02 #13
Individuel placering af de enkelte elementer (under hinanden mfl.) Det synes jeg personligt er nemmere at styre via css og enkelte elementer.
Avatar billede olebole Juniormester
18. februar 2005 - 17:21 #14
Umiddelbart kunne det lyde som skidt CSS-kode. At placere enkelt elementer via ID-selectors bryder med hele grundtanken i CSS og bør være en absolut undtagelse.

Når man opstiller formularer, gør man det jo som regel i kolonner, hvor tekst og input-elementer skal align'es - og det er netop, hvad tabel-elementet er beregnet til ... og præcis det element, W3C anbefaler til opgaven  :)
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 17:34 #15
Så er der noget jeg har misforstået. Hvordan bruger ellers css ifølge grundtanken.
Alle de steder jeg har læst anbefaler man netop css til at styre layoutet, og holde sig langt væk fra css, hvor det er muligt??

I mit tilfælde er det ikke særligt pænt med en input boks, efterfulgt af en select box med x antal valgmuligheder, og herefter 4 select boxe med 2 muligheder i.

Der ville jeg gerne placere 1. selectbox under inputboxen, og de efterfølgende select boxe 2 og 2 under hinanden.
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 18:03 #16
undskyld ikke holde sog langt væk fra css, men tabeller
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 18:04 #17
det går rigtig godt med stavningen idag
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 19:15 #18
Olebole, er der nogen steder jeg kan læse om grundtanken i css. Jeg har ikke kunnet funde nogen steder, der anbefaler den eller den anden brug?
Avatar billede kgpedersen Nybegynder
18. februar 2005 - 19:22 #19
Roenving, havde du et forslag til hvordan jeg får inputten ind i formen?
Avatar billede roenving Novice
18. februar 2005 - 22:53 #20
<form>
<table id="myFormTable">
</table>
</form>
<script type="text/javascript">
var form = document.getElementById("MyFormTable");
form.appendChild(newElement(rowNumber));
</script>

!-)
Avatar billede roenving Novice
18. februar 2005 - 22:54 #21
-- og som ole skriver findes der ikke noget bedre element til at have tabulerede elementer end en tabel !-)
Avatar billede kgpedersen Nybegynder
19. februar 2005 - 08:24 #22
Ok. Vil du også bruge en tabel hvis du vil placere elementerne under hinanden. f.eks sådan her.

Inputboks

Select box      box2 box3 box4 box5

Smider du et svar så du kan få pointene!
Avatar billede roenving Novice
19. februar 2005 - 13:49 #23
Det kommer an på, om du har behov for at holde dem sammen på en anden måde, end de vil prøve at blive opstillet uden en tabel, for normalt vil select-bokse jo bare være på den linje, de sættes på, og ikke have deres egen linje ...

-- altså nærmest ligesom ord, du skriver i en tekst som denne !-)

-- velbekomme '-)
Avatar billede roenving Novice
19. februar 2005 - 14:24 #24
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester