Avatar billede nopper Praktikant
22. oktober 2011 - 10:30 Der er 22 kommentarer og
1 løsning

Try it yourself i html5

Jeg er igang med lære html5, og vil nu gerne lave det samme som i w3schools, hvor man kan prøve og se resultatet på samme side. Kan man det i html5?.
Avatar billede DeeDawg Nybegynder
22. oktober 2011 - 11:03 #1
Du er nødt til at bruge en form for scripting. Om det så er ASP, PHP, JavaScript eller lign., er jo op til dig. HTML5 kan kun bruges til at opsætte siden - ikke funktionaliteten af den. (Med få undtagelser ;P)
Avatar billede nopper Praktikant
22. oktober 2011 - 11:29 #2
Har du evt. en henvisning til et php eksempel.
Avatar billede olebole Juniormester
22. oktober 2011 - 14:40 #3
<ole>

Kan du ikke bare skrive din kode i en editor og afprøve den i en browser?

Hvis du har i sinde at lave et site, hvor andre kan teste deres kode, så vent til du selv kan kode. Der findes oceaner af sites om webkode, der er skrevet med tvivlsomme kompetencer på området. Det, vi har brug for, er artikler/tutorials, der er skrevet af folk, der ved, hvad de skriver om ... helt ned i detaljen!

Et rigtig godt eksempel på et site med bunker af forvrøvlede artikler/tutorials er w3schools.com, som er proppet med udeladelser, mangler og alvorlige fejl. Ofte er der 4-6 fejl pr. side - hvilket er skræmmende på sider med så mange reklamer og så lidt indhold! Der er f.eks. ikke mange sites, der har skabt så meget forvirring og så mange misforståelser omkring, hvad Ajax er - og ikke er.

Hvis det er sådan en 'service', du ønsker at lave, så giv WWW og HTML5 en chance og lad være  *o)

/mvh
</bole>
Avatar billede nopper Praktikant
22. oktober 2011 - 17:12 #4
olebole Prøv lige at læse mit spørgsmål igen. Jeg tror du har misforstået det. Kik evt. her: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_email
Avatar billede DeeDawg Nybegynder
22. oktober 2011 - 21:30 #5
Ole har forstået dit spørgsmål. Han fortæller dig bare, at du nok skal starte med noget mere simpelt, hvis du er nybegynder.

Hvis du følger en tutorial om et emne der er på et mere avanceret plan end dig selv, vil du højst sandsynligt ikke lære noget af det.

Så lyt til Ole, og vent indtil du er klar til at udvikle det du efterspørger, og er i stand til selv at regne ud hvordan. :)
Avatar billede nopper Praktikant
22. oktober 2011 - 22:02 #6
Jeg kan ikke forstå de kommentarer I kommer med. Jeg spørger bare om, når jeg modificere et eksempel i venstre side og får vist det modificerede resultatet i højre side. Det er jo ikke et spørgsmål om min viden, men et spørgsmål om hvordan jeg løser dette problem.
Altså jeg mangler en skabelon til den side jeg henviser til.
Avatar billede olebole Juniormester
23. oktober 2011 - 00:56 #7
Hvad er det, du ikke kan? Lægge et TEXTAREA ved siden af et DIV - eller at skrive den linje kode, der flytter indholdet fra TEXTAREA til DIV?
Avatar billede nopper Praktikant
23. oktober 2011 - 08:18 #8
Jeg arbejder med denne kode, som ikke virker:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Niels Orla Pedersen" />

    <title>Unavngivet 3</title>
</head>

<body>
<script type="text/javascript">
myeditor = document.getElementById('rte').contentWindow.document;

function LoadData(obj)
{
alert(document.getElementById(obj).value);
myeditor.body.innerHTML= document.getElementById(obj).value;
}
</script>
<form action="" method="post" onSubmit="doCheck('mybox');">
<textarea name="textareabox" id="mybox">This is a <b>bold</b> sample textarea</textarea>
<br />
<input type="button" id="btnLoad" onsubmit="LoadData('textareabox')" value="Send">

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

Er der noget jeg mangler?.
Avatar billede nopper Praktikant
23. oktober 2011 - 08:59 #9
olebole
Jeg kan ikke skrive den kode, som flytter indholdet fra textarea til div.
Avatar billede DeeDawg Nybegynder
23. oktober 2011 - 14:21 #10
Avatar billede olebole Juniormester
23. oktober 2011 - 18:31 #11
Hvis du bruger den kode, du viser i #8, får du JavaScript fejl. Læs, hvad de fortæller dig
Avatar billede nopper Praktikant
23. oktober 2011 - 19:30 #12
Jeg kan se at det er variablen rte, som det er galt med. Det er ikke en, kode jeg selv har lavet. Den har jeg fundet her http://corpocrat.com/2008/07/28/iframe-innerhtml-value-from-textarea/.

Jeg kan ikke se, hvad rte står for. Kan du tænke dig til, hvad det er?.
Avatar billede olebole Juniormester
23. oktober 2011 - 19:42 #13
Når dette kaldes:

myeditor = document.getElementById('rte').contentWindow.document;

- eksisterer iframen jo slet ikke i dokumentet. Den bliver først 'født' efter scriptet.

Begynd med at flytte scriptet ned under iframen
Avatar billede nopper Praktikant
23. oktober 2011 - 20:02 #14
Samme resultat, men skal iframen have et navn.
Avatar billede olebole Juniormester
23. oktober 2011 - 21:20 #15
Nej, den kode, du skrev ovenfor, kræver en iframe med id="rte" (ikke et navn) - men du har jo slet ikke nogen iframe i koden  =)
Avatar billede nopper Praktikant
23. oktober 2011 - 21:39 #16
Her min kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Niels Orla Pedersen" />

    <title>Unavngivet 3</title>
</head>

<body>

<form action="" method="post" onSubmit="doCheck('mybox');">
<textarea name="textareabox" id="mybox">This is a <b>bold</b> sample textarea</textarea>
<br />
<input type="button" id="btnLoad" onsubmit="LoadData('textareabox')" value="Send">
</form>
<iframe id="rte"></iframe>
<script type="text/javascript">
myeditor = document.getElementById('rte').contentWindow.document;

function LoadData(obj)
{
alert(document.getElementById(obj).value);
myeditor.body.innerHTML= document.getElementById(obj).value;
}
</script>

</body>
</html>
Avatar billede olebole Juniormester
23. oktober 2011 - 22:09 #17
Der findes ikke en onsubmit handler på en knap - brug onclick i stedet. Derudover skal du medsende textarea'ets id - ikke dets name - onclick="LoadData('mybox')".

Hvis du vil afprøve HTML5 koder, skal du dog først loade et HTML5 dokument i din iframe
Avatar billede nopper Praktikant
24. oktober 2011 - 09:03 #18
Javasript er en svær ting. Jeg har prøvet et utal af muligheder med dit råd, men kan ikke få det til at virke. Følgende kode giver en alert box:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Niels Orla Pedersen" />

    <title>Unavngivet 3</title>
</head>

<body>

<form action="" method="post" onclickt="doCheck('mybox');">
<textarea name="textareabox" id="mybox">This is a <b>bold</b> sample textarea</textarea>
<br />
<input type="button" id="btnLoad" onclick="LoadData('mybox')" value="Send">
</form>
<iframe id="rte" src="java2.html">
  Dette er en test
</iframe>

<script type="text/javascript">
myeditor = document.getElementById('rte').contentWindow.document;

function LoadData(obj)
{
alert(document.getElementById(obj).value);
myeditor.body.innerHTML= document.getElementById(obj).value;
}
</script>

</body>
</html>

Mit html dokument bliver ikke loadet
Avatar billede nopper Praktikant
24. oktober 2011 - 09:05 #19
Forkert document her det rigtige:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Niels Orla Pedersen" />

    <title>Unavngivet 3</title>
</head>

<body>

<form action="" method="post" onclick="doCheck('mybox');">
<textarea name="textareabox" id="mybox">This is a <b>bold</b> sample textarea</textarea>
<br />
<input type="button" id="btnLoad" onclick="LoadData('mybox')" value="Send">
</form>
<iframe id="rte" src="java2.html">
 
</iframe>

<script type="text/javascript">
myeditor = document.getElementById('rte').contentWindow.document;

function LoadData(obj)
{
alert(document.getElementById(obj).value);
myeditor.body.innerHTML= document.getElementById(obj).value;
}
</script>

</body>
</html>
Avatar billede olebole Juniormester
24. oktober 2011 - 13:28 #20
Dokumentet i iframen når ikke at loade færdig, før du prøver at definere dets dokument. Prøv at skrive koden sådan:


<script type="text/javascript">
myeditor = document.getElementById('rte').contentWindow;

function LoadData(obj) {
    myeditor.document.body.innerHTML= document.getElementById(obj).value;
}
</script>


I øvrigt er det god kodeskik i JavaScript at flytte første curly bracket op på linje med din function statement - og gøre det samme med if/else-udtryk, løkker o.lign. Ellers kan du i uheldige tilfælde få uventede resultater  ;o)
Avatar billede nopper Praktikant
24. oktober 2011 - 14:03 #21
Den sidder lige i øjet. Tusind tak for hjælpen. Skriv et svar du har virkelig fortjent de point.
Avatar billede olebole Juniormester
24. oktober 2011 - 14:09 #22
Ellers tak, jeg samler ikke points. Læg selv et svar og accepter det, så tråden lukkes
Avatar billede nopper Praktikant
24. oktober 2011 - 14:22 #23
Endnu engang tak for hjælpen
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