Søg
Avatar billede NielsErikP Mester
11. oktober 2011 - 11:35 Der er 34 kommentarer og
1 løsning

Hjælp til simpel funktion..!!!!

Hej...
Jeg har ikke en døjt forstand på Javscript, men vil da lige langsom prøve at komme ind i det.
Mit problem består i at jeg vil lave denne funktion så den henter værdien af et input felt og skriver værdien på skærmen..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>
    </title>
   
<script type="text/javascript">

function UdskrivElm(inpId) {
var Id_elm = document.GetElementById['inpId'];
var Id_value = Id_elm.value;
};



</script>   
   
<style type="text/css">
#form_div {
    margin: auto;
    padding-bottom: 25px;
    width:500px;
    height:auto;
    background-color: rgb(170,170,170);
    border: 2px solid gray;
}
.knapstil {
    margin-left:19px;
    background:transparent;
    border:0;
}


</style>
</head>



<body style="background: #800000;">

    <div id="form_div">
        <form  method="post" id="form1" action="/javascript.php">
                <p>
                    <input type="hidden" name="skriv" id="hidden_skriv" value="1">
                    <span>Navn:</span><br>
                    <input type="text" name="navn" id="txt_navn" size="35" > <br>
                    <button class="knapstil" name="submit" type="submit" onclick="UdskrivElm(txt_navn)" value="Send">
                            <img src="billeder/send1.png" onmouseover="this.src='billeder/send1MO.png';" onmouseout="this.src='billeder/send1.png';" ></button>       
               
                </p>
        </form>
    </div>
       
   
</body>
</html>



Håber der er en der kan give lidt hjælp til en "Newbie" indenfor javascript!!
Avatar billede majbom Novice
11. oktober 2011 - 12:29 #1
- der skal ikke ; efter en funktion i javascript

ret dit form-tag til:

<form  method="post" id="form1" action="/javascript.php" onsubmit="UdskrivElm('txt_navn')">


og din funktion til:

function UdskrivElm(inpId) {
   var Id_elm = document.GetElementById(inpId);
   var Id_value = Id_elm.value;

   document.getElementById('output').firstChild.nodeValue = Id_value;
   return false;
}


og sæt:

<div id="output"> </div>


ind hvor du vil have outputtet
Avatar billede iver_mo Nybegynder
11. oktober 2011 - 12:38 #2
splazz, hvad er grunden til at du bruger ".firstChild.nodeValue" i stedet for ".innerHTML"?

Er det mere pro, best prac, vane?
Avatar billede olebole Juniormester
11. oktober 2011 - 15:32 #3
<ole>

@splazz: Faktisk er det rigtig god kodeskik at afslutte en funktion med et semikolon. At man ikke i alle situationer behøver at gøre det, skyldes en - i øvrigt yderst uheldig - feature i java script: semikolon insertion.

Hvergang JS-parseren kommer til slutningen af en linje, og denne ikke er afsluttet med et semikolon, skal parseren selv indsætte et semikolon - hvis den er i tvivl. Derefter skal den prøve at parse linjen igen. Denne feature blev indført for at gøre JS lettere at gå til, men har desværre 'begavet' os med en del andre problemer.

Når man komprimerer sin kode og flytter den op på én linje, kan man derfor ofte løbe ind i problemer med manglende semikolon efter funktioner  *o)

@iver_mo: innerHTML skal man være overordenlig forsigtig med at bruge. Den overskriver det DOM fragment, den bliver brugt på - hvilket bl.a. betyder, man mister alle programmatiske referencer til elementer i fragmentet.

Derfor bruger splazz de standardiserede DOM metoder til at manipulere sidens DOM træ

/mvh
</bole>
Avatar billede olebole Juniormester
11. oktober 2011 - 15:42 #4
Her er et eksempel på, hvad innerHTML kan give af ubehagelige oplevelser:


<script type="text/javascript">
var myBar = null;
function testA() {
    myBar = document.getElementById("bar");
    myBar.style.background = "yellow";
    document.getElementById("foo").innerHTML += "<p>Her er en indsat linje</p>";
}
function testB() {
    // testA har overskrevet foo,
    // så bar er et helt nyt element.
    // myBar refererer derfor ikke længere til bar
    myBar.style.background = "red";
}
</script>

<div id="foo">Her er et div
    <div id="bar"> - og her er et mere</div>
</div>

<p>
    <button onclick="testA()">TEST A</button>
    <button onclick="testB()">TEST B</button>
</p>

Avatar billede olebole Juniormester
11. oktober 2011 - 15:48 #5
- eller denne her, som til fulde lever op til W3C's DOM:


<script type="text/javascript">
var myBar = null;
function testA() {
    myBar = document.getElementById("bar");
    document.getElementById("foo").innerHTML += "<p>Her er en indsat linje</p>";
}
function testB() {
    // testA har overskrevet foo,
    // så bar er et helt nyt element.
    // myBar refererer derfor ikke længere til bar
    myBar.value = "noget tekst";
}
</script>

<div id="foo">
    <div>Skriv noget i feltet og klik derefter på de to knapper</div>
    <input id="bar" type="text" value="skriv noget her ...">
</div>

<p>
    <button onclick="testA()">TEST A</button>
    <button onclick="testB()">TEST B</button>
</p>


Læg mærke til, at feltets indhold bliver resat med funktionen testA - og at testB ikke længere kan finde elementet bar
Avatar billede majbom Novice
11. oktober 2011 - 17:58 #6
-> ole - okay, jeg beklager min uvidenhed på området funktioner i JS :s (er det så noget der har noget performancemæssigt at sige med det semikolon?)
Avatar billede olebole Juniormester
11. oktober 2011 - 18:58 #7
Undskyld, jeg kan nu se, jeg var lige hurtig nok på aftrækkeren  =)

Det er ikke så meget ved en function statement:

function foo() {
  // Kode
}

- der opstår problemer, men hvis du ændrer til en function expression:

var foo = function() {
  // Kode
}

- går der meget let ged i den.

Prøv f.eks flg. kode:


var foo = function(v) {
    alert(v);
}

(function() {
    alert("bla");
})();


Parseren vil her opfatte den selvafviklende funktion som argument til foo! Det betyder et helt andet resultat end ventet.

Om man sætter et semikolon eller ej, betyder formodentlig kun ganske marginale forskelle i performance
Avatar billede NielsErikP Mester
11. oktober 2011 - 22:57 #8
Hej...
Nå... I fik jer da lige en disku... ;-)
Splazz, Prøver lige dit forslag i #1... Det der Firstchild. et eller andet, er som russisk for mig ligenu her... Men det bliver forhåbentligt bedre med tiden :-)

Er der evt. en der med lidt fordel for mig vil prøve at forklare mig, hvad oFORM, oTEXT og oTEXTAREA... Er for nogle størrelser på denne side :

    http://www.javascript-coder.com/javascript-form/javascript-get-form.phtml
Avatar billede NielsErikP Mester
12. oktober 2011 - 00:00 #9
Hej..
Splazz...Dit forslag i #1, virker ikke!!!
Hvad gør man lige???
Avatar billede olebole Juniormester
12. oktober 2011 - 00:17 #10
I DOM (Document Object Model) er alt noder. Et HTML element er en ElementNode - en stump tekst er en TextNode. Dvs, at når du har en kode som:


<div id="foo"><div>En eller anden tekst</div></div>


- så består den af en ElementNode med ID'et 'foo'. Den node har en childNode - nemlig det indre div. Det indre div er samtidig foo's firstChild.

Da foo kun indeholder denne ene node, er den samtidig foo's lastChild. Havde foo indeholdt flere childNoder, ville den sidste være foo's lastChild.

Teksten "En eller anden tekst" udgør en TextNode, som er en childNode og firstChild af det indre div. Den er altså foo's firstChild's firstChild.

En TextNode har en property, der hedder nodeValue - og som indeholder selve teksten i noden.

Altså får jeg fat i teksten på denne måde:


var elm = document.getElementById("foo");
var sTxt = elm.firstChild.firstChild.nodeValue;
alert(sTxt);


- og sætter teksten med:


var elm = document.getElementById("foo");
elm.firstChild.firstChild.nodeValue = "Noget nyt";



Om DOM
DOM bindinger til JavaScript (nok lidt langhåret ved første øjekast)
Avatar billede olebole Juniormester
12. oktober 2011 - 00:27 #11
document.getElementById staves med lille g. Derudover bør du sikre dig, der står noget i div'et. Det kan du gøre med seler og livrem:

<div id="output">&nbsp;</div>
Avatar billede majbom Novice
12. oktober 2011 - 07:00 #12
-> #9 - der er nu intet som en dejlig uddybende fejlmeddelelse!!!

der skulle have stået &nbsp; i den div'en "output" - præcis som ole har skrevet - exp.dk har lavet det om til et mellemrum i stedet (jeg havde skrevet &nbsp;, men når mån previewer fucker den det op)
Avatar billede NielsErikP Mester
12. oktober 2011 - 12:29 #13
Hej...
Tak Ole, vil prøve at STAVE mig gennem din fremlægning...Håber det er ok, hvis jeg spørger lidt ind til det???
Vil jo mægtigt gerne til at have lidt fat i det javascript, da der jo er nogle ting der ikke kan ordnes med php!!!
Avatar billede NielsErikP Mester
12. oktober 2011 - 12:31 #14
Hej..
Vil lige høre om der evt. kan hjælpes lidt med spørgsmålet i #8:

Er der evt. en der med lidt fordel for mig vil prøve at forklare mig, hvad oFORM, oTEXT og oTEXTAREA... Er for nogle størrelser på denne side :

  http://www.javascript-coder.com/javascript-form/javascript-get-form.phtml
Avatar billede NielsErikP Mester
12. oktober 2011 - 13:06 #15
Hej...

  <div id="foo"><div>En eller anden tekst</div></div>


"Da foo kun indeholder denne ene node, er den samtidig foo's lastChild. Havde foo indeholdt flere childNoder, ville den sidste være foo's lastChild.


Vil det siger at havde "foo" set sådan ud :


  <div id="foo">
      <div>tekst 1</div>
      <div>tekst 2</div>
      <div>tekst 3</div>
     
  </div>



Så havde "tekst 1 = firstchild", "tekst 2 = secondchild" og "tekst 3= lastchild"???
Avatar billede olebole Juniormester
12. oktober 2011 - 15:34 #16
I DOM findes kun first- og lastChild. Du kan få fat i alle DIV'ene med ELEMENT.getElementsByTagName:

var elm = document.getElementById("foo");
var coll = elm.getElementsByTagName("div");
alert(coll[1].nodeName);
alert(coll[1.firstChild.nodeValue]);

Metoden ELEMENT.getElementsByTagName returnerer en nodeList (variablen coll), som minder lidt om et array
Avatar billede majbom Novice
12. oktober 2011 - 20:18 #17
du kan også bruge childNodes, som også er en nodeList...

var elm = document.getElementById('foo');
var coll = elm.childNodes;


-> ole - har du ikke en fejl i sidste linje i din kodestump?
Avatar billede olebole Juniormester
12. oktober 2011 - 20:35 #18
- jo det ka' da vist nok være, der var en fejl!  :D

var elm = document.getElementById("foo");
var coll = elm.getElementsByTagName("div");
alert(coll[1].nodeName);
alert(coll[1].firstChild.nodeValue);

Jeg var også ved at skrive om childNodes collections, men undlod det, idet jeg så for mig, at textNodes i form af white-space ville forvirre. Specielt fordi kun visse browsere tæller white-space i koden med som selvstændige noder.

Når man traverserer en childNodes collection, er man nødt til at spørge på hver enkelt nodes nodeType. Er den 1, er der tale om en elementNode - er den derimod 3, er der tale om en textNode bestående af white-space i koden  =)
Avatar billede olebole Juniormester
12. oktober 2011 - 20:37 #19
njaarhh ... "er den derimod 3, kan der være tale om en textNode bestående af white-space i koden  =)", skulle der nok stå  *o)
Avatar billede NielsErikP Mester
12. oktober 2011 - 22:21 #20
Hej...

#16:
Vil det så sige at :
coll[1].nodeName er lig min Div med "tekst 1" og
coll[2].nodeName = div med "tekst 2" og
coll[1].firstChild.nodeValue = Selve teksten "tekst 1"????

#11:

Ved at indsætte "&nbsp" i div'en, skriver den godt nok det ud jeg taster i Inputfeltet, men det ligesom bare lige kommer frem og forsvinder ligeså hurtigt igen.. Kan man ikke få det til at blive stående fremme???
Avatar billede olebole Juniormester
12. oktober 2011 - 23:50 #21
nodeName svarer til tagName, og vil for alle tre være DIV.

Ligesom arrays er indeks for det første element i en collection, 0:


var elm = document.getElementById("foo");
var coll = elm.getElementsByTagName("div");
alert(coll[0].firstChild.nodeValue);  // Returnerer: tekst 1
alert(coll[1].firstChild.nodeValue);  // Returnerer: tekst 2
alert(coll[2].firstChild.nodeValue);  // Returnerer: tekst 3

Avatar billede NielsErikP Mester
15. oktober 2011 - 22:40 #22
Hej...
Tusind tak for din iføring i lidt javascript <ole></bole>....

Også tak til dig Splazz for dit indlæg i #1...  Kunne nu aldrig få udskriften til at blive stående fremme på skærmen.

Vil i venligst begge lægge et svar!!!
Avatar billede olebole Juniormester
15. oktober 2011 - 22:54 #23
Ellers tak, jeg samler som bekendt ikke. Det må være splazz' points  =)
Avatar billede majbom Novice
16. oktober 2011 - 06:48 #24
hvad mener du med at få udskriften til at blive stående fremme?

virker det?
Avatar billede NielsErikP Mester
16. oktober 2011 - 14:20 #25
Hej...
Nej, det fungerer ikke, Efter "&nbsp" skrtiver den godt nok noget ud på skærmen....
Men det kun lige "Blinker" frem og forsvinder igen, sådan at der ingen udskrift står på skærmen...

Er der ikke noget der hedder "dokument.write", skal jeg bruge det istedet???
Avatar billede majbom Novice
16. oktober 2011 - 16:50 #26
har du et link? for det lyder underligt...

document.write har ikke noget at gøre her...
Avatar billede NielsErikP Mester
16. oktober 2011 - 17:30 #27
Hej..
Nej, jeg har ingen link, det er bare en oprettet form, for at prøve at studere lidt javascript på den... Form koden er i #0..
Og min funktion ændret efter din og ole's foreskrift...
Altså, når jeg skriver i input feltet og trykker knappen "Send"..
Popper det bare frem og forsvinder igen!!!!
Avatar billede majbom Novice
16. oktober 2011 - 17:49 #28
noget kunne tyde på at din form bliver submittet - så du lige når at se værdien inden siden reloader...

kan du ikke smide hele din kode på pastebin.com og ligge et link?
Avatar billede olebole Juniormester
16. oktober 2011 - 18:15 #29
Hvis formen ikke skal submittes, kan du prøve med:

<form  method="post" id="form1" action="/javascript.php" onsubmit="return false">
Avatar billede majbom Novice
16. oktober 2011 - 20:01 #30
-> ole - den kalder jeg funktionen i onsubmit - og funktionen returnerer false, så burde den da ikke submitte?
Avatar billede olebole Juniormester
16. oktober 2011 - 20:24 #31
Arrhhh ... formen lå og puttede sig i et PRE element! Resultatet af kaldet skal returneres til formen:


<form  method="post" id="form1" action="/javascript.php" onsubmit="return UdskrivElm('txt_navn')">

Avatar billede majbom Novice
16. oktober 2011 - 20:26 #32
nååh ja sq da - return foran funktionskaldet - den smuttede :s
Avatar billede olebole Juniormester
16. oktober 2011 - 20:30 #33
*o)
Avatar billede NielsErikP Mester
16. oktober 2011 - 22:57 #34
Hej...
10-4..NU funger det bare med det "return";

Tak ole og Splazz

Her er pointene!!!
Avatar billede majbom Novice
17. oktober 2011 - 08:29 #35
tfp :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 1 03/02/202614:19 03/02/202618:42
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
28/0311:18 DENVER DVB-tMPEG-4 HD TUNER Af ole falsted i Fjernsyn & projektorer
White papers
Flere white papers »