[javascript] Dropdown menu. - Softwareontwikkeling

zaterdag 1 oktober 2005 13:25

Acties:

Verwijderd

Topicstarter

Hey

Ik zit dus met een probleem,

Het betreft Java, ik ben dus bezig met een dropdown menu waarop het volgende moet gecalculeerd moet worden:

De Prijs aan de hand van het aantal slots en de soort public of private moet worden berekend, Tot nu toe bij een 2de opdracht geeft ie een error aan.

Tot zover ben ik tot dit stukje code gekomen, dat is

code:

<script type="text/javascript">
function calculatie()
{
    if(document.form.players.value = "12" && document.form.soort.value = "PUB") 
    { 
        document.form.price.value = "1" 
    }
    else(document.form.players.value = "12" && document.form.soort.value = "PRIV") 
    { 
        document.form.price.value = "2" 
    }
}
}
</script>
</head>

<body>
<form name="form">
  <p>
    <select name="game" id="game" OnChange="calculatie()">
      <option value="AA">America's Army</option>
      <option value="BF1942">Battlefield 1942</option>
      <option value="BFVN">Battlefield Vietnam</option>
      <option value="BF2">Battlefield 2</option>
      <option value="COD">Call of duty</option>
      <option value="DB">Deathball</option>
      <option value="DFBHD">Delta Force: Black Hawk Down </option>
      <option value="FARCRY">Far cry </option>
      <option value="HL">Half life</option>
      <option value="HLCS">Half Life CS 1.6</option>
      <option value="HL2">Half Life 2</option>
      <option value="HLCSS">Half Life 2 CSS</option>
      <option value="IGI">Project IGI 2 - Covert Strike </option>
      <option value="JK2">Jedi Knight 2 </option>
      <option value="JK3">Jedi Knight 3 </option>
      <option value="JOPS">Jointops </option>
      <option value="MOHAA">Medal of Honor Allied Assault </option>
      <option value="NMSO">Mimesis Online </option>
      <option value="NWN">NeverWinterNights</option>
      <option value="OFP">Operation Flashpoint </option>
      <option value="PK">Painkiller </option>
      <option value="Q1">Quake</option>
      <option value="Q2">Quake 2</option>
      <option value="Q3A">Quake 3 Arena</option>
      <option value="TMRS">Ravenshield</option>
      <option value="CCR2">C&amp;C Renegade 2 </option>
      <option value="RTCW">RTCW</option>
      <option value="RTCWET">RTCW - Enemyterritory</option>
      <option value="SOF1">Sof 1</option>
      <option value="SOF2">Sof 2</option>
      <option value="TO">Tacticalops </option>
      <option value="TRB2">Tribes II </option>
      <option value="UTGOTY">Unreal : Tournament</option>
      <option value="UT2003">Unreal : 2003</option>
      <option value="UT2004">Unreal : 2004</option>
    </select>
    <select name="soort" id="soort" OnChange="calculatie()">
      <option value="PUB" selected>Public</option>
      <option value="PRIV">Private</option>
                </select>
    <select name="players" id="players" OnChange="calculatie()">
      <option value="12">12 Players</option>
      <option value="14">14 Players</option>
      <option value="16">16 Players</option>
      <option value="18">18 Players</option>
      <option value="20">20 Players</option>
      <option value="22">22 Players</option>
      <option value="24">24 Players</option>
      <option value="26">26 Players</option>
      <option value="28">28 Players</option>
      <option value="30">30 Players</option>
      <option value="32">32 Players</option>
      
    </select>
  </p>
  <p>
    <input name="price" type="text" id="price">

Ofcourse, hij is nog niet af

Als iemand weet hoe die wel zou gaan werken, en een voorbeeld wil posten, graag

zaterdag 1 oktober 2005 13:42

Acties:

Verwijderd

dit gaat niet werken:

if(document.form.players.value = "12" && document.form.soort.value = "PUB")

a= b = c ?
je zal dat moeten scheiden.

verder:
java != javascript

en je kan verder advies vragen over specifieke fouten maar dit klinkt meer als een script request.

veel succes

zaterdag 1 oktober 2005 13:45

Acties:

crisp

Devver

Pixelated

Ten eerste is dit geen Java maar javascript; ten tweede ben je een 'if' vergeten na je else en gebruik je een toewijzing ipv een vergelijking in je expressies en ten derde kan je beter niet de 'dot'-notatie gebruiken maar de 'lange' notatie om je formelementen te benaderen.
Verder zie ik dat je 2x een zelfde afvraging doet, dat is natuurlijk niet nodig. Ook kunnen oudere browsers moeite hebben met het direct opvragen van de value-property van een select; dat kan je beter via de options collection doen mbv de selectedIndex property.
Als laatste zou ik vanuit je eventhandler alvast een handle naar je form meegeven, dat scheelt weer overbodig lookups. Waarschijnlijk wil je ook meer afvragingen gaan doen in je functie, dus het is handig om dan alvast de waarden van 'players' en 'soort' in een variabele te zetten voordat je afvragingen gaat doen - dat scheelt dan ook weer lookups.

HTML:

1	<select name="soort" onchange="calculatie(this.form)">

JavaScript:

function calculatie(form)
{
  var players_select = form.elements['players'];
  var players = players_select.options[players_select.selectedIndex].value;
  var soort_select = form.elements['soort'];
  var soort = soort_select.options[soort_select.selectedIndex].value;

  if (players == '12')
  {
    if (soort == 'PUB')
    {
        form.elements['price'].value = '1';
    }
    else if (soort == 'PRIV')
    {
        form.elements['price'].value = '2';
    }
  }
}

Als je meerdere afvragingen gaat doen voor bijvoorbeeld de 'players' value dan zou je een switch kunnen gaan gebruiken (de PUB/PRIV afvraging zou ik dan refacturen naar een losse functie).

[ Voor 7% gewijzigd door crisp op 01-10-2005 13:50 ]

Intentionally left blank

zaterdag 1 oktober 2005 13:46

Acties:

Bram77

code:

<script type="text/javascript">
function calculatie()
{
        frm = document.form;
        frm.price.value = (frm.players.value = "12" && frm.soort.value = "PUB")? "1" : "2" ;
}
</script>

En zo? Er stond zowiezo een "}" te veel onderaan je script en je was "if" vergeten na "else" en een sluitingshaakje bij je else if. Bovendien, als je document.form.soort.value maar 2 waarden kan hebben, hoef je er maar 1 te controleren.

[ Voor 57% gewijzigd door Bram77 op 01-10-2005 13:51 ]

zaterdag 1 oktober 2005 13:52

Acties:

Verwijderd

Topicstarter

$_/-\o_$

Bedankt voor de effort. Hij werkt nu en kan 'm gaan aanpassen

zaterdag 1 oktober 2005 14:00

Acties:

Verwijderd

Sowieso is dit geen java, maar javascript. Afgezien van de overeenkomsten in de syntax hebben de talen weinig met elkaar te maken.

Waarden vergelijken doe je niet met =, maar met == omdat een enkel = teken een waarde toewijst, en dat wil je vast niet, in die if constructie. De else klopt sowieso niet, dat gaat iets anders doen dan je verwacht. Met maar 2 mogelijkheden voor "soort" is het sowieso een beetje raar.

Ik zou je willen aanraden om langere (maar minder foutgevoelige) statements gebruiken om de invoervelden te benaderen:

JavaScript:

// niet zo:
document.form.price.value = "1"

// maar zo:
document.forms['form'].elements['price'].value = '1';

En je wilt ook gebruik maken van this, en dus verander je je functie in het volgende.

JavaScript:

function calculatie(theForm) {
    if (theForm.elements['players'].value == '12' && theForm.elements['soort'].value == 'PUB') {
        theForm.elements['price'].value = '1';
    }
    else if (theForm.elements['players'].value == '12' && theForm.elements['soort'].value == 'PRIV') {
        theForm.elements['price'].value = '2';
    }
}

Ik heb verder geen idee waarom je wilt dat er niets gebeurt als het players element een andere value heeft dan 12.

En daarbij komt nog weer een probleem, select velden hoor je niet op deze manier uit te lezen. Dat wordt dus:

JavaScript:

function calculatie(theForm) {
   var thePlayers = theForm.elements['players'];
   var theSoort = theForm.elements['soort'];
   var thePrice = theForm.elements['price'];

   if (thePlayers.options[thePlayers.selectedIndex].value == '12' && theSoort.options[theSoort.selectedIndex].value == 'PUB') {
      thePrice.value = '1';
   }
   else if (thePlayers.options[thePlayers.selectedIndex].value == '12' && theSoort.options[theSoort.selectedIndex].value == 'PRIV') {
      thePrice.value = '2';
   }
}

De onchange attributen moet je dan ook iets aanpassen, namelijk zo:

code:

1	onchange="calculatie(this.form);"

Je code is dus een beetje een zooitje. Dat is vragen om problemen.

zaterdag 1 oktober 2005 16:59

Acties:

crisp

Devver

Pixelated

Cheatah: you read my mind

Over refacturing: ik neem aan dat bij een ander aantal spelers ook een andere prijs hoort; dit is dan een logische constructie in het geval dat vanuit het aantal spelers niet direct de prijs berekend kan worden:

JavaScript:

function calculatie(form)
{
  var players_select = form.elements['players'];
  var players = players_select.options[players_select.selectedIndex].value;

  switch (players)
  {
    case '12':
      setPrice(form, '1.00', '2.00');
      break;
    case '14':
      setPrice(form, '1.10', '2.20');
      break;
    case '16':
      setPrice(form, '1.20', '2.40');
      break;
    case '18':
      setPrice(form, '1.30', '2.60');
      break;
    case '20':
      setPrice(form, '1.40', '2.80');
      break;
    default:
      setPrice(form, '', '');
  }
}

function setPrice(form, PUB_price, PRIV_price)
{
  var soort_select = form.elements['soort'];
  var soort = soort_select.options[soort_select.selectedIndex].value;
  var price_field = form.elements['price'];

  switch (soort)
  {
    case 'PUB':
      price_field.value = PUB_price;
      break;
    case 'PRIV':
      price_field.value = PRIV_price;
      break;
    default:
      price_field.value = '';
  }
}

Note dat ik ook defaults zet in het geval je ook een initiele optie ala 'Maak een keuze' zou hebben zonder value.
In mijn voorbeeld is de prijs echter weer te berekenen vanuit het aantal spelers met een simpele formule, dus zou deze constructie weer niet echt logisch zijn

Intentionally left blank

zaterdag 1 oktober 2005 21:30

Acties:

Bram77

D'r is zo'n beetje niets goed aan de oorspronkelijk code geloof ik ...

de "=" / "==" zag ik nog over het hoofd.

zaterdag 1 oktober 2005 21:46

Acties:

Verwijderd

Topicstarter

Ja Bedankt en vooral Crisp

Ik was nu zover dat ik het script zo heb gemaakt dat Gameprijzen, Traffic p maand en playerlijst zodoende heb aangepast, alleen het probleem bij de keus "geen dedicated server" eerst 0 aangaf, maar klikken op een andere optie waarvan de waarde 127 bijv was zette die 'm niet terug op 0 na keus Geen Gameserver. Collega van mij heeft het opgelost, dat krijg je als je te lang op dingen staart

en gelukkig kan ik de laatste knop Bestel button toe gaan voegen.

[ Voor 3% gewijzigd door Verwijderd op 01-10-2005 21:46 ]