JavaScript is een client - side scripting taal die u toelaat om in real-time op gebruikersinvoer reageren. Bijvoorbeeld , kunt u een HTML-formulier dat automatisch wordt bijgewerkt een totale veld als een gebruiker aanpast individuele vermeldingen op het formulier te maken . Om dit te doen , moet je een naam een van de verandering elementen toe te wijzen aan elke vorm element , schrijf een functie die updates de totale en bel de functie iedere keer . Instructies
1 Maak een nieuw HTML-document in Kladblok of een HTML-editor . Voer de HTML- headers in het document : < ! DOCTYPE HTML >
orderformulier <br> < /title > <br> 2 <p> Maak styling voor het invulformulier u zal creëren : . <p> <style> <br> <p> <br> orderformulier { width : 250px ; display: block ; } <br> <p> { Item width : 100px ; float : . links; margin -left : 10px , text-align : . rechts } <br> <p> ingang { width : 50px ; margin -left : 10px ; text-align : . links } <br> <p> totaal { width : 20px ; margin -left : 10px , font-weight : bold ; } <br> <p> < /style > <br> 3 <p> Maak een JavaScript-functie voor toegang tot elk element in het invulformulier en berekenen en weer een totaal : <p> <script> <p> functie totaal <br> ( ) { <br> <p> var totaal = ( parseInt ( document.order.apples.value ) | | 0 ) * 1,05 + ( parseInt ( document.order.oranges.value ) | | 0 ) * 1,10 + ( parseInt ( document.order.pears.value ) | | 0 ) * 0,88 ; <p> document.getElementById <br> ( " totaal " ) . innerHTML = totaal ; <br> <p> < /head > <br> 4 <p> <p> } <p> < /script > <br> Maak de HTML- invoerscherm . Wijs de naam die u gebruikt in de JavaScript-functie aan elk individueel element . Stel de " onchange " evenement voor elke ingang element te berekenen en weer het totaal, wanneer een element verandert : <p> <body> <br> <p> <div class="orderForm"> <br> <p> <form name="order" action="process.php" method="post"> <span class="item"> Appels <br> : 1.05 < /span > < , input type = " text " class = "input " name = " appels " onchange = " totaal ( ) " > <span class="item"> Sinaasappelen <br> : 1.10 < /span > <input type="text" class="input" name="oranges" onchange="total()"> <span class="item"> Peren <br> : 0.88 < /span > ; <input type="text" class="input" name="pears" onchange="total()"> <span class="item"> Totaal <br> : < /span > ; < span class = " totale " Goedkope 5 <p> Sla het HTML- bestand en open het in een browser . Test dat de berekening correct werkt . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/90951.html' >Hoe je JavaScript Call Vanuit een HTML- sjabloon </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/90953.html' >Hoe maak je een JavaScript associatieve array verwijderen </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90786.html" title="Hoe je Java Script gebruiken in Microsoft Office " target="_self">Hoe je Java Script gebruiken i…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90755.html" title="Hoe maak je een boom met behulp van een doek in JavaScript " target="_self">Hoe maak je een boom met behul…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91061.html" title="Hoe te Text Alles Uit een Search Field op een HTML- pagina op Click " target="_self">Hoe te Text Alles Uit een Sear…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90862.html" title="Hoe te Sliding Content maken in jQuery " target="_self">Hoe te Sliding Content maken i…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90804.html" title="Hoe maak je een Polylijn Na een array van String Locaties in Google Maps V3 Draw " target="_self">Hoe maak je een Polylijn Na ee…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90879.html" title="Hoe je JavaScript embedden in Asp.net " target="_self">Hoe je JavaScript embedden in …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91111.html" title="Hoe je een ruimte in stack Fout in JavaScript Repareer " target="_self">Hoe je een ruimte in stack Fou…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91150.html" title="Hoe maak je een Basic Destructor in JavaScript Implementeren " target="_self">Hoe maak je een Basic Destruct…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90908.html" title="Hoe maak je JavaScript te Scroll Advertenties " target="_self">Hoe maak je JavaScript te Scro…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95008.html" title="Hoe kan ik tijd VBA -functies " target="_self">Hoe kan ik tijd VBA -functies </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/85815.html" title="Hoe een Vector Vul C " target="_self">Hoe een Vector Vul C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88862.html" title="Hoe te Element Marges Het gebruik van HTML Programmering " target="_self">Hoe te Element Marges Het gebruik van HT…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95173.html" title="Visual Basic Termen en definities " target="_self">Visual Basic Termen en definities </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/90024.html" title="Hoe de Kortste Woord in Java zoeken " target="_self">Hoe de Kortste Woord in Java zoeken </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87461.html" title="Hoe wilt zien op Volgende en Vorige in ColdFusion " target="_self">Hoe wilt zien op Volgende en Vorige in C…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/96316.html" title="Hoe maak je een Visual Basic project maken met behulp van de Project Naam Creëer " target="_self">Hoe maak je een Visual Basic project mak…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87438.html" title="Wat is Digital Coding ? " target="_self">Wat is Digital Coding ? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89183.html" title="Ik kan niet vinden . APK voor een Android Project " target="_self">Ik kan niet vinden . APK voor een Androi…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
