Input Box

punkrock · 25 okt 2008

hey, ik heb iets geschreven in javascript, maar ik vind het nog niet helemaal goed. Met een kleine verandering zou het gemakkelijker zijn: ik vroeg me af of het mogelijk was om ipv. 2 keer een prompt voor de invoer 2 input veldjes waarbij dan als je daar iets in invoert de uitvoer (document.write) daarnaast komt, zonder een button gewoon direct. En als je de invoer dan verandert, verandert de informatie ernaast dan ook onmiddelijk. Dat maakt het programmatje wat flexibeler.
alvast bedankt!

dit is de code van het document:

Code:

<html>

<head>

<script language=javascript>
// scripted by Sam Verstocken
<!--

function start_onclick() 
{

element1 = prompt("Voer het eerste element in (hoofd- en kleine letters!)" , "")
element2 = prompt("Voer het tweede element of zuurrest (vb. SO4 , BrO3 , PO4 etc.) in " , "")
wiki = element2

..HIER HEB IK EEN STUK CODE EVEN WEGGELATEN, OM HET OVERZICHTELIJK TE HOUDEN..

// alert(index1)
// alert(index2)

if ((element1 == "C") && (element2 == "H"))
{
  org = "true"
  if (nnco2 == 2)
    {
    document.write("Deze elementen vormen met de opgegeven oxidatiegetallen geen molecule! Probeer opnieuw")
    }
   else 
    {
   document.write("De waarschijnlijk gevormde <i>koolwaterstof</i> is <b> CH<SUB>4</SUB> </b> of <b> methaan </b>")
         m=mm1 + (nco2*mm2)
          document.write("<br> De molaire massa M van deze molecule is " + m + " gram / mol")
document.write("<br><a href='http://nl.wikipedia.org/wiki/CH4'>Meer informatie</a>")
   }
}
else 
{ 

controle = (og1)*(og2)
dubbelcontrole = absog1 - absog2

if (controle > 0) // deze elementen hebben een OG met zelfde teken
{
   document.write("De elementen " + element1 + " en " + element2 + " zullen waarschijnlijk geen molecule vormen, omdat hun oxidatiegetal hetzelfde teken heeft") 
}

else
{

   if (dubbelcontrole == 0)
   {
         document.write("De waarschijnlijk gevormde <i>anorganische</i> stof is <b>" + element1 + element2 + "</b> of <b> " + name1 + name2 + "</b>")
          m = mm1 + mm2
          document.write("<br> De molaire massa M van deze molecule is " + m + " gram / mol")
          document.write("<br><a href='http://nl.wikipedia.org/wiki/"+element1+wiki+"'>Meer informatie</a>")
   }

   else  // hier komen de 'gewone gevallen'
   {
   
       document.write("De waarschijnlijk gevormde <i>anorganische</i> stof is <b>" + element1 + "<SUB>" + nnco1 + "</SUB>" + element2 + "<SUB>" + nnco2 + "</SUB></b> of <b> " + index1 + name1 + index2 + name2 + "</b>") 
         m = (nco1 * mm1) + (nco2 * mm2)
          document.write("<br> De molaire massa M van deze molecule is " + m + " gram / mol")
 document.write("<br><a href='http://nl.wikipedia.org/wiki/"+element1+nnco1+wiki+nnco2+"'>Meer informatie</a>")   
   }

}
} // C
}

//-->
</script>


</head>

<body bgcolor="#a5a5a5" lang=NL>

<input id=Start type=button value="Start het programma" language=javascript onclick="return start_onclick()"></body>

</html>

Glest · 26 okt 2008

dan moet je je hele structuur omgooien. Het kan wel, maar je kunt geen document.write() meer gebruiken. document.write() start namelijk een nieuw document als de html tag al gesloten is, je krijgt dan dus een leeg document met je output.

Wat je het beste eerst kan doen is de layout maken, dus alle inputs neerzetten en een div ergens waar je het resultaat kwijt kunt. Vervolgens zou ik een functie schrijven die het verwerkt. Gewoon je huidige functie dus, maar dan met

Code:

element1 = document.getElementById('element1').value;
element2 = document.getElementById('element2').value;

in plaats van

Code:

element1 = prompt("Voer het eerste element in (hoofd- en kleine letters!)" , "")
element2 = prompt("Voer het tweede element of zuurrest (vb. SO4 , BrO3 , PO4 etc.) in " , "")

Voor de output moet je document.write() vervangen door iets als dit:

Code:

outputDiv = document.getElementById("outputDiv");
outputDiv.innerHTML = ""; // Leeg outputDiv eerst
outputDiv.innerHTML += "text1<br />";
outputDiv.innerHTML += "text2<br />";
outputDiv.innerHTML += "text3<br />";

Dan moet je natuurlijk wel alle elementen plaatsen met de goede id. Ik zou overigens wel een knopje houden waar op geklikt moet worden, anders kan het dat de data verwerkt wordt terwijl er pas halve data staat.

HTML:

<div style="float: left;">
  <input id="element1" type="text" value="" />
  <input id="element2" type="text" value="" />
  <input type="button" onclick="start_onclick();" />
</div>
<div id="outputDiv" style="float: left;">
  Hier komt het resultaat te staan
</div>
<div style="clear: both;"></div>

punkrock · 26 okt 2008

Je bent heel hard bedankt! :thumb:
Het werkte van de eerste keer perfect
precies zo als ik het wou

Input Box

punkrock

Gebruiker

Glest

Gebruiker

punkrock

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy