Avatar billede andersmd Nybegynder
23. maj 2008 - 18:44 Der er 11 kommentarer

If med flere betingelser + function uden event og uden knap

Hej eksperter!
Jeg er ved at prøve at lave en slags hjemmeside i html/javascript, der kan regne rumfanget af en kasse ud.
Så der er 4 input-boxe, og den skulle gerne kunne regne den sidste ud hvis du skriver noget i tre af dem. F.eks. skriver de tre sider, så den regner rumfanget ud.
Så den skriver resultatet i den sidste input-box med det samme man har udfyldt de tre andre felter uden at man skal trykke på en knap.

Min kode ser sådan her ud:

<script language="javascript">
  var vSideA=0
  var vSideB=0
  var vSideC=0
  var vVolume=0

  function funCalculate_abc()
  {
  vSideA=document.fBoxCalculate.inSideA.value*1
  vSideB=document.fBoxCalculate.inSideB.value*1
  vSideC=document.fBoxCalculate.inSideC.value*1
  vVolume=vSideA*vSideB*vSideC*1
  funScreenWrite()
  }
  function funScreenWrite()
  {
  document.fBoxCalculate.inSideA.value=vSideA
  document.fBoxCalculate.inSideB.value=vSideB
  document.fBoxCalculate.inSideC.value=vSideC
  document.fBoxCalculate.inVolume.value=vVolume
  }

  if (document.fBoxCalculate.inSideA && document.fBoxCalculate.inSideB && document.fBoxCalculate.inSideC)
  {
  funCalculate_abc()
  }
</script>

Men kan ikke få det til at virke.

Kan nogen hjælpe mig???
Avatar billede w13 Novice
23. maj 2008 - 18:48 #1
Hvad går galt i koden?

Husk i øvrigt at afslutte kommandolinjer med semikolon ;

Og du kan skrive:
  var vSideA=0
  var vSideB=0
  var vSideC=0
  var vVolume=0
som:
  var vSideA=vSideB=vSideC=vVolume=0;

Og for at gøre:
<script language="javascript">
lidt mere uptodate, kan du bruge:
<script type="text/javascript">

:)
Avatar billede olebole Juniormester
23. maj 2008 - 18:58 #2
<ole>

- og så ville jeg nok 'sexe' det lidt op  =)

<script type="text/javascript">
  function funCalculate_abc(oF)
  {
  var vSideA=oF.inSideA.value*1;
  var vSideB=oF.inSideB.value*1;
  var vSideC=oF.inSideC.value*1;
  oF.inVolume.value=vSideA*vSideB*vSideC;
  }

  if (document.fBoxCalculate.inSideA && document.fBoxCalculate.inSideB && document.fBoxCalculate.inSideC)
  {
  funCalculate_abc(document.fBoxCalculate);
  }
</script>

/mvh
</bole>
Avatar billede olebole Juniormester
23. maj 2008 - 19:01 #3
- men jeg forstår heller ikke, hvorfor scriptet ikke skulle virke. Prøv at vise noget mere kode  =)
Avatar billede andersmd Nybegynder
23. maj 2008 - 19:24 #4
OK. Nu har jeg prøvet at lave koden om. Men det virker stadig ikke.

Koden er sådan her:

<html>
<head>
  <title>Kasse</title>
</head>
<body>
  <form name="fBoxCalculate">
  <table>
    <tr>
      <td rowspan="11"></td>
      <td>Side a:</td>
      <td><input name="inSideA"></td>
    </tr>
    <tr>
      <td>Side b:</td>
      <td><input name="inSideB"></td>
    </tr>
    <tr>
      <td>Side c:</td>
      <td><input name="inSideC"></td>
    </tr>
    <tr>
      <td>Rumfang:</td>
      <td><input name="inVolume"></td>
    </tr>
  </table>
  <button name="ButtonBoxReset" type="reset">Nulstil</button>
  </form>
  <script type="text/javascript">
    function funCalculate_abc(oF)
    {
    var vSideA=oF.inSideA.value*1;
    var vSideB=oF.inSideB.value*1;
    var vSideC=oF.inSideC.value*1;
    oF.inVolume.value=vSideA*vSideB*vSideC;
    }
   
    if (document.fBoxCalculate.inSideA && document.fBoxCalculate.inSideB && document.fBoxCalculate.inSideC)
    {
    funCalculate_abc(document.fBoxCalculate);
    }
  </script>

</body>
</html>

Når man åbner siden står der et nul i sidste input-box og hvis man skriver tre tal i de tre andre boxe sker der ikke noget.
Avatar billede w13 Novice
23. maj 2008 - 19:27 #5
Nej, for der er jo ikke noget, der kører funktionen.

<html>
<head>
  <title>Kasse</title>
</head>
<body>
  <form name="fBoxCalculate">
  <table>
    <tr>
      <td rowspan="11"></td>
      <td>Side a:</td>
      <td><input name="inSideA" onkeyup="function funCalculate_abs(this.form)"></td>
    </tr>
    <tr>
      <td>Side b:</td>
      <td><input name="inSideB" onkeyup="function funCalculate_abs(this.form)"></td>
    </tr>
    <tr>
      <td>Side c:</td>
      <td><input name="inSideC" onkeyup="function funCalculate_abs(this.form)"></td>
    </tr>
    <tr>
      <td>Rumfang:</td>
      <td><input name="inVolume"></td>
    </tr>
  </table>
  <button name="ButtonBoxReset" type="reset">Nulstil</button>
  </form>
  <script type="text/javascript">
    function funCalculate_abc(oF)
    {
    var vSideA=oF.inSideA.value*1;
    var vSideB=oF.inSideB.value*1;
    var vSideC=oF.inSideC.value*1;
    oF.inVolume.value=vSideA*vSideB*vSideC;
    }
   
    if (document.fBoxCalculate.inSideA && document.fBoxCalculate.inSideB && document.fBoxCalculate.inSideC)
    {
    funCalculate_abc(document.fBoxCalculate);
    }
  </script>

</body>
</html>
Avatar billede andersmd Nybegynder
23. maj 2008 - 19:40 #6
Nice :D Nu virker det. Hvis man altså skriver:
onkeyup="funCalculate_abc(this.form)"

Hvem skal så ha pointene???

Men forstår stadig ikke helt hvad oF gør???
Avatar billede andersmd Nybegynder
23. maj 2008 - 19:48 #7
Nu har jeg prøvet at lave det sådan at man også kan skrive i SideA, SideB og Rumfanget, men så virker det ikke igen.

Nu ser koden sådan her ud:

<html>
<head>
  <title>Kasse</title>
</head>
<body>
  <form name="fBoxCalculate">
  <table>
    <tr>
      <td rowspan="11"></td>
      <td>Side a:</td>
      <td><input name="inSideA" onkeyup="funCalculate_abc(this.form)"></td>
    </tr>
    <tr>
      <td>Side b:</td>
      <td><input name="inSideB" onkeyup="funCalculate_abc(this.form)"></td>
    </tr>
    <tr>
      <td>Side c:</td>
      <td><input name="inSideC" onkeyup="funCalculate_abc(this.form)"></td>
    </tr>
    <tr>
      <td>Rumfang:</td>
      <td><input name="inVolume" onkeyup="funCalculate_abc(this.form)"></td>
    </tr>
  </table>
  <button name="ButtonBoxReset" type="reset">Nulstil</button>
  </form>
  <script type="text/javascript">
    function funCalculate_abc(oF)
    {
    var vSideA=oF.inSideA.value*1;
    var vSideB=oF.inSideB.value*1;
    var vSideC=oF.inSideC.value*1;
    oF.inVolume.value=vSideA*vSideB*vSideC;
    }
        function funCalculate_abV(oF)
    {
    var vSideA=oF.inSideA.value*1;
    var vSideB=oF.inSideB.value*1;
    var vVolume=oF.inSideC.value*1;
    oF.inSideC.value=vVolume/vSideA/vSideB;
    }
   
    if (document.fBoxCalculate.inSideA && document.fBoxCalculate.inSideB && document.fBoxCalculate.inSideC)
    {
    funCalculate_abc(document.fBoxCalculate);
    }
       
    else if (document.fBoxCalculate.inSideA && document.fBoxCalculate.inSideB && document.fBoxCalculate.inVolume)
    {
    funCalculate_abV(document.fBoxCalculate);
    }
  </script>
Avatar billede w13 Novice
23. maj 2008 - 19:50 #8
oF modtager referencen this.form, dvs. en reference til form'en.

Jeg og Olebole kan vel dele. Jeg opretter hermed et svar - så skal Olebole oprette et svar og så kan du give os point herunder.
Avatar billede olebole Juniormester
23. maj 2008 - 22:08 #9
- og et herfra ... men kun en trediedel til mig, please  =)
Avatar billede roenving Novice
24. maj 2008 - 13:51 #10
Tjah, man kan jo lege meget med det, f.eks. sådan, hvor jeg har lavet det til en blur-ting, da uhensigtsmæssige alertsd ellers ville dukke op i tide og utide !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Kasse</title>
</head>
<body>
  <form name="fBoxCalculate">
  <table>
    <tr>
      <td rowspan="11"></td>
      <td>Side a:</td>
      <td><input name="inSideA" onblur="this.value=this.value.replace(/[^\d.]/g,'');funCalculate(this)"></td>
    </tr>
    <tr>
      <td>Side b:</td>
      <td><input name="inSideB" onblur="this.value=this.value.replace(/[^\d.]/g,'');funCalculate(this)"></td>
    </tr>
    <tr>
      <td>Side c:</td>
      <td><input name="inSideC" onblur="this.value=this.value.replace(/[^\d.]/g,'');funCalculate(this)"></td>
    </tr>
    <tr>
      <td>Rumfang:</td>
      <td><input name="inVolume" onblur="this.value=this.value.replace(/[^\d.]/g,'');funCalculate(this)"></td>
    </tr>
  </table>
  <button name="ButtonBoxReset" type="reset">Nulstil</button>
  </form>
  <script type="text/javascript">
    var touched = [], fields = ["inSideA","inSideB","inSideC","inVolume"];
    function funCalculate(elm){
      oF = elm.form;
      for(i=0;4>i;i++){
        touched[i] = touched[i] || elm == oF[fields[i]];
      }
      var val = [], touch = 0;
      var noVals = 0, missing = -1;
      for (i=0;4>i;i++){
        touch += touched[i] ? 1 : 0;
        if((val[i] = +oF[fields[i]].value) == 0){
          noVals++;
          missing = i;
        }
      if(3>touch)
        return;
      if(noVals>1 || noVals == 0)
        alert("Der skal angives præcis 3 værdier af de 4 mulige !-)");
      else{
        switch(missing){
          case 3:
            oF[fields[3]].value = val[0]*val[1]*val[2];
            break;
          default:
            val[missing] = 1;
            oF[fields[missing]].value = val[3]/(val[0]*val[1]*val[2]);
        }
      }
    }
  </script>

</body>
</html>
Avatar billede roenving Novice
24. maj 2008 - 14:01 #11
Ups, der forsvandt en tuborg ved kopieringen, indsæt den ca. midt i:

...
          missing = i;
        }
      }//<-- her !-)
      if(3>touch)
        return;
      if(noVals>1 || noVals == 0)
...
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