Problemer med et javascript

Husk at navne i javascript er case sensitive. Du har sat name på din radio lig med Cpu men dit script refererer til cpu - det er ikke det samme objekt! :)

undskyld jeg spørger men hvad mener du med min radio?

Ahhh jeg har fundet ud af det men nu siger den bare Error: 'Cpu' is undefined??? det giver ingen mening

I øvrigt tror jeg du får problemer med at referere dine kontroller som du gør. Det er vist kun med id-attributten at du får adgang til objektet på den måde du gør nu.

Dette er blot til inspiration, men du kunne lægge prisen af den enhed man vælger over i value på selve radio-kontrollen, for så kan du bare kalde beregn med this i stedet for en numerisk værdi som peger på en anden kontrol (mhp. at gøre koden mere generisk og lettere at vedligeholde). Nogenlunde således:

function beregn(obj) {
  samletpris += this.value;   
  obj.form.totalpris.value=samletpris
}   

og så i din form have kode der ser nogenlunde således ud:

<tr>
<td width="15%"><input type="radio" value="10" name="Cpu" onclick="beregn(this)"></td>
<td width="65%">Intel pentium 4 2.8 Ghz</td>
<td width="20%">10</td>
</tr>

Jaaaamen, jeg var jo lige ved at uddybe ;)

Nu har jeg fået den til at skrive noget den skriver 'NaN' men der kommer ikke noget tal hvad kan det have noget at gøre med?

Har du opdateret sitet (så jeg kan følge med i sourcen :))?

NaN kommer typisk fordi du prøver at regne med noget som ikke er en numerisk værdi...

sorry den skulle være oppe nu

Først og fremmest vil jeg gerne rette en fejl jeg kom til at lave i det første script, nemlig at der ikke skal stå:

samletpris += this.value;

men

samletpris += obj.value;

da det jo er obj der er det aktuelle objekt (altså radio-button der er blevet valgt).

Prøv så at rette det igen til dette:

samletpris += parseInt(obj.value);

eller hvis der kan forekomme kommatal, så til dette:

samletpris += parseFloat(obj.value);

Og lidt safetykode (for os der ikke tror på at vi kan skabe perfekte rammer til hver en tid ;)):

function beregn(obj) {
  if(obj) {
    samletpris += this.value;   
    obj.form.totalpris.value=samletpris
  }
}

ja okay det hjalp faktisk men den bliver bare lagt til og skriver 010203010 alt efter hvor mange gange man trykker på dem alt efter om man ændre mening. jeg har 2 spørgsmål nu.

1) kan det lade sig gøre at ændre det så den opdaterer prisen så der kommer til at stå et beløb?

2) når man ser bekræftelsen på det man har bestilt kan det lade sig gøre at der også kommer til at stå hvad produktet er?

Og til os der har for travlt: så må vi bare gøre det om igen :|

function beregn(obj) {
  if(obj) {
    samletpris += parseFloat(obj.value);   
    obj.form.totalpris.value=samletpris
  }
}

den bliver pludset nu kan det laves så det bare bliver opdateret eks.
cpu1 viser den 10
hvis man så vælger cpu2 viser den 20
osv.

og at det først er når man vælger rammene at det bliver pludset.

Ja, den nemme mulighed fik jeg jo lige ødelagt for dig, ved at smide en anden værdi i din value. Jeg vil umiddelbart anbefale en anden strategi, nemlig at value indeholder en id og at du så holder produkt og pris (og hvad du ellers kunne finde på at tilføje af information senere) i et objekt som du så stopper i et array (så der kan være mange produkter :)).

Du kan lave et objekt såleds:

function Product(id,price,text) {
  this.id = id;
  this.price = price;
  this.text = text;
}

og oprette det således:

var objProduct = new Product(10,10,'Intel Pentium 4 2.8 GHz');

og dem kan du så til at starte med stoppe i et array, således:

var objProducts = new Array(
  new Product(1,10,'Intel Pentium 4 2.8 GHz'),
  new Product(2,20,'Intel Pentium 4 3.0 GHz'),
  new Product(3,30,'Intel Pentium 4 3.2 GHz'),
);

Din HTML kunne så se således ud

<tr>
  <td width="15%"><input type="radio" value="1" name="Cpu" onclick="beregn(this)"></td>
  <td width="65%">Intel pentium 4 2.8 Ghz</td>
  <td width="20%">10</td>
</tr>
<tr>
  <td width="15%"><input type="radio" value="2" name="Cpu" onclick="beregn(this)"></td>
  <td width="65%">Intel pentium 4 3.0 Ghz</td>
  <td width="20%">20</td>
</tr>

og beregn-scriptet:

function beregn(obj) {
  if(obj) {
    // find produktet
    var objProduct = null;
    for(var i = 0; i < objProducts.length; i++) {
      if(objProducts[i].id == obj.value) {
        objProduct = objProducts[i];
      }
    }
    if(objProduct) {
      samletpris += parseFloat(objProduct.price);   
      obj.form.totalpris.value = samletpris
    }
  }
}

Det kan godt være du skal have separate totaler for de enkelte grupper, således du kun tildeler værdien og ikke inkrementerer som nu. Eksempel:

function beregn(obj) {
  if(obj) {
    if(obj.name=="Cpu") cpupris += parseFloat(obj.value);   
    if(obj.name=="Ram") rampris += parseFloat(obj.value);   
    if(obj.name=="GraphicCard") grafikpris += parseFloat(obj.value);   
    samletpris = cpupris + rampris + grafikpris;
    obj.form.totalpris.value = samletpris;
  }
}

GRRRRRMMFFF! Naturligvis UDEN inkrementering!

function beregn(obj) {
  if(obj) {
    if(obj.name=="Cpu") cpupris = parseFloat(obj.value);   
    if(obj.name=="Ram") rampris = parseFloat(obj.value);   
    if(obj.name=="GraphicCard") grafikpris = parseFloat(obj.value);   
    samletpris = cpupris + rampris + grafikpris;
    obj.form.totalpris.value = samletpris;
  }
}

skal det erstattes istedet for:
function beregn(obj) {
  if(obj) {
    // find produktet
    var objProduct = null;
    for(var i = 0; i < objProducts.length; i++) {
      if(objProducts[i].id == obj.value) {
        objProduct = objProducts[i];
      }
    }
    if(objProduct) {
      samletpris += parseFloat(objProduct.price);   
      obj.form.totalpris.value = samletpris
    }
  }
}

den siger der er en fejl i:

var objProducts = new Array(
  new Product(1,10,'Intel Pentium 4 2.8 GHz'),
  new Product(2,20,'Intel Pentium 4 3.0 GHz'),
  new Product(3,30,'Intel Pentium 4 3.2 GHz'),
);

Det er det sidste komma...

yes det fandt jeg ud af, der kommer en fejl med rampris is undefined i linie 30...

Mht. erstatning, så skal du jo beslutte dig for om det er den objektbaserede strategi du vil benytte dig af (jeg ville selv foretrække den, men det er jo ikke ensbetydende med at der er den mest hensigtsmæssige for dig).

Array'et og den sidste funktion du postede hører sammen. Hvis du vil bruge den sidste version, så skal du rette den til at se således ud:

function beregn(obj) {
  if(obj) {
    // find produktet
    var objProduct = null;
    for(var i = 0; i < objProducts.length; i++) {
      if(objProducts[i].id == obj.value) {
        objProduct = objProducts[i];
      }
    }
    if(objProduct) {
      if(obj.name=="Cpu") cpupris = parseFloat(objProduct.price);   
      if(obj.name=="Ram") rampris = parseFloat(objProduct.price);   
      if(obj.name=="GraphicCard") grafikpris = parseFloat(objProduct.price);   
      samletpris = cpupris + rampris + grafikpris;
      obj.form.totalpris.value = samletpris
    }
  }
}

Dertil skal det nævnes at du så skal have 3 globale variable mere ved navnene:
cpupris
rampris
grafikpris

(erklæres sammen sted som samletpris).

kan du ikke kigge på koden på siden og se om den skal se sådan ud?

Når du så har fået dette op og køre med objekterne, og du er rigtig snedig, så kan du jo bruge dine objekter til at generere siden med produkterne for dig.

Den kan vi dog lige tage bagefter :)

Du mangler at erklære cpupris, rampris og grafikpris...

hvorledes vil du have det gjordt?

bare lige under det sted hvor du erklærer samletpris...

ahhh ;)

...og så skal du jo bare have oprettet de andre produkter i array'et objProducts :)

jeg har oprattet ramne nu men kan ikke lige få det til at virke

jo det var ikke noget alligevel

Husk id'erne skal i value-attributten på radio-knappen - det er koblingen fra kontrollen til produktet ;)

yes du snakkede noget om bekraftelsessiden

tror du det kunne lade sig gøre at lave en bekræftelseside hvor der i stedet for tal for hardwaren kommer til at stå nave?

hmmm... ja, jeg havde faktisk en forventning om at du ville vise den i bunden sammen med indtastning af adressen, men det er ok. Den kan godt laves med det array som du har fået flikket sammen nu.

Teknikken er så bare at du lægger hele det nuværende indhold af din form (men ikke selve form-tag'et), dvs. produktlisten hvor man vælger hvilke komponenter der skal i computeren og indtastningsfelterne i en div, som du så kan skjule når man skal have bekræftigelsen. Bekræftigelsessiden lægger du så i et andet div, som vises når tid er...

På bekræftigelsessiden vises hvilke radio-kontroller der er valgt ved at gennemløbe dem og se om checked er sand. Den kontrol som er valgt har jo et id i value-feltet som du kan bruge til at hente tekst og pris ud med og vise til brugeren. Nogenlunde således:

<form>
  <div id="selectionform">
    <!-- hele den nuværende formular med radio-kontroller og adresseformular -->
    <!-- HUSK at form-tag IKKE skal med herind! -->
  </div>

  <div id="confirmation">
    <div id="compilation">&nbsp;</div>
    <input type="submit" name="accepter" value="Accepter">
  </div>
</form>

Det div der hedder compilation skal indeholde de linier som bliver genereret ud fra de valgte komponenter fra første side. Flg. funktion finder de relevante produkter:

function listProducts() {
  function generateProdLine(id) {
    // find produktet
    var objProduct = null;
    for(var i = 0; i < objProducts.length; i++) {
      if(objProducts[i].id == obj.value) {
        objProduct = objProducts[i];
      }
    }
    if(objProduct) {
      var strProdLine = "<tr><td>" + objProduct.text + "</td>"
                      + "<td>" + objProduct.price + "</td></tr>";
      return strProdLine;
    }   
  }

  var strHTML = "<table>";
  var cpuprods = document.forms[0].elements["Cpu"];
  var ramprods = document.forms[0].elements["Ram"];
  var gfxprods = document.forms[0].elements["GraphicCard"];
  for(var i = 0; cpuprods.length; i++) {
    if(cpuprods[i].checked) {
      strHTML += generateProdLine(cpuprods[i].value);
      break;
    }
  }
  for(var i = 0; ramprods.length; i++) {
    if(ramprods[i].checked) {
      strHTML += generateProdLine(ramprods[i].value);
      break;
    }
  }
  for(var i = 0; gfxprods.length; i++) {
    if(gfxprods[i].checked) {
      strHTML += generateProdLine(gfxprods[i].value);
      break;
    }
  }
  strHTML += "</table>";
}

Til at skifte mellem de to lag skal du så bruge knap (du skal nok ændre teksten på den du har i øjeblikket og lave den om til en normal button i stedet for en submit.
OnClick-eventet på den knap skal så kalde flg. kode:

function changePage(pageid) {
  if(pageid == 1) {
    document.getElementById("selection").style.display = "block";
    document.getElementById("confirmation").style.display = "none";
  }
  else if(pageid == 2) {
    document.getElementById("selection").style.display = "none";
    document.getElementById("confirmation").style.display = "block";
  }
}

Til sidst skal du så have lavet et stylesheet som starter med at skjule confirmation:

<style type="text/css">
  #confirmation { display:none; }
</style>


hmmm... lad os se hvormeget af dette du kan få til at fungere... :)

Ja hmmm det siger jeg også jeg er stået af... jeg er ikke sikker på at jeg vil kunne få dette her til at virke med min nuværende viden...

øjeblik... (eller lidt længere :))

okay

Tror du at du kan gennemskue og se fidusen i dette og selv udvide med layout til side 2?


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

<head>
<meta http-equiv="Content-Language" content="da">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Computer</title>
<style type="text/css">
    #confirmation { display:none; }
</style>
<script type="text/javascript">
samletpris=0
cpupris=0
rampris=0
grafikpris=0

function Product(id,price,text) {
  this.id = id;
  this.price = price;
  this.text = text;
}
   
var objProducts = new Array(
  new Product(1,10,'Intel Pentium 4 2.8 GHz'),
  new Product(2,20,'Intel Pentium 4 3.0 GHz'),
  new Product(3,30,'Intel Pentium 4 3.2 GHz'),
  new Product(4,10,'512 DDR3200'),
  new Product(5,20,'1024 DDR3200'),
  new Product(6,30,'2048 DDR3200'),
  new Product(7,10,'ASUS AX850XT 256 MB GDDR3'),
  new Product(8,20,'ATI RADEON 9200 128 MB DDR SDRAM'),
  new Product(9,30,'GeForce 6800 GT 256 MB GDDR3') 
);

// lav en funktion på objProducts-array'et, så den kan kaldes direkte derpå
objProducts.findProduct = function(id) {
  // find produktet
  for(var i = 0; i < this.length; i++) {
    if(this[i].id == id)
      return this[i];
  }
  return null;
}

function beregn(obj) {
  if(obj) {
    // find produktet
    var objProduct = objProducts.findProduct(obj.value);
    if(objProduct) {
      if(obj.name=="Cpu") cpupris = parseFloat(objProduct.price);   
      if(obj.name=="Ram") rampris = parseFloat(objProduct.price);   
      if(obj.name=="GraphicCard") grafikpris = parseFloat(objProduct.price);   
      samletpris = cpupris + rampris + grafikpris;
      obj.form.totalpris.value = samletpris
    }
  }
}

function listProducts() {
  function generateProdLine(id) {
    // find produktet
    var objProduct = objProducts.findProduct(id);
    if(objProduct) {
      var strProdLine = "<tr><td>" + objProduct.text + "</td>"
                      + "<td>" + objProduct.price + "</td></tr>";
      return strProdLine;
    }
    return "Produkt med id: " + id + " ikke fundet...";   
  }

  var strHTML = "<table>";
  var cpuprods = document.getElementsByName("Cpu");
  var ramprods = document.getElementsByName("Ram");
  var gfxprods = document.getElementsByName("GraphicCard");
  for(var i = 0; i < cpuprods.length; i++) {
    if(cpuprods[i].checked) {
      strHTML += generateProdLine(cpuprods[i].value);
      break;
    }
  }
  for(var i = 0; i < ramprods.length; i++) {
    if(ramprods[i].checked) {
      strHTML += generateProdLine(ramprods[i].value);
      break;
    }
  }
  for(var i = 0; i < gfxprods.length; i++) {
    if(gfxprods[i].checked) {
      strHTML += generateProdLine(gfxprods[i].value);
      break;
    }
  }
  strHTML += "</table>";
  document.getElementById("compilation").innerHTML = strHTML;
}

function changePage(pageid) {
  if(pageid == 1) {
    document.getElementById("selections").style.display = "block";
    document.getElementById("confirmation").style.display = "none";
  }
  else if(pageid == 2) {
    listProducts();
    document.getElementById("selections").style.display = "none";
    document.getElementById("confirmation").style.display = "block";
  }
}</script>
</head>
<body link="#000000" vlink="#000000" alink="#000000" bgcolor="#CCCCCC">

<!--webbot BOT="GeneratedScript" PREVIEW=" " startspan -->
<script Language="JavaScript" Type="text/javascript"><!--
function FrontPage_Form1_Validator(theForm)
{

  if (theForm.Postcode.value == "")
  {
    alert("Please enter a value for the \"Postcode\" field.");
    theForm.Postcode.focus();
    return (false);
  }

  if (theForm.Postcode.value.length < 4)
  {
    alert("Please enter at least 4 characters in the \"Postcode\" field.");
    theForm.Postcode.focus();
    return (false);
  }

  if (theForm.Postcode.value.length > 4)
  {
    alert("Please enter at most 4 characters in the \"Postcode\" field.");
    theForm.Postcode.focus();
    return (false);
  }

  var checkOK = "0123456789-";
  var checkStr = theForm.Postcode.value;
  var allValid = true;
  var validGroups = true;
  var decPoints = 0;
  var allNum = "";
  for (i = 0;  i < checkStr.length;  i++)
  {
    ch = checkStr.charAt(i);
    for (j = 0;  j < checkOK.length;  j++)
      if (ch == checkOK.charAt(j))
        break;
    if (j == checkOK.length)
    {
      allValid = false;
      break;
    }
    allNum += ch;
  }
  if (!allValid)
  {
    alert("Please enter only digit characters in the \"Postcode\" field.");
    theForm.Postcode.focus();
    return (false);
  }
  return (true);
}

//--></script><!--webbot BOT="GeneratedScript" endspan -->
<form method="POST" action="_vti_bin/shtml.dll/computer.htm" onSubmit="return FrontPage_Form1_Validator(this)" language="JavaScript" name="FrontPage_Form1" webbot-action="--WEBBOT-SELF--" ID="Form1">
  <!--webbot bot="SaveResults" u-file="besvar.htm" s-format="HTML/BR" s-label-fields="TRUE" b-reverse-chronology="FALSE" s-date-format="%y-%m-%d" s-time-format="%H:%M" s-builtin-fields="Date Time" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0" ID="Hidden1"><!--webbot bot="SaveResults" endspan i-checksum="43374" -->
  <div id="selections">
  <p>Here you can compile your own computer:</p>

  <p>Price: </p>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
    <tr>
      <td width="15%">CPU:</td>
      <td width="65%">Beskrivelse:</td>
      <td width="20%">Priser:</td>
    </tr>
    <tr>
      <td width="15%"><input type="radio" value="1" name="Cpu" onclick="beregn(this)"></td>
      <td width="65%">Intel pentium 4 2.8 Ghz</td>
      <td width="20%">10</td>
    </tr>
    <tr>
      <td width="15%"><input type="radio" value="2" name="Cpu" onclick="beregn(this)"></td>
      <td width="65%">Intel pentium 4 3.0 Ghz</td>
      <td width="20%">20</td>
    </tr>
    <tr>
      <td width="15%"><input type="radio" value="3" name="Cpu" onclick="beregn(this)"></td>
      <td width="65%">Intel pentium 4 3.2 Ghz</td>
      <td width="20%">30</td>
    </tr>
    <tr>
      <td width="15%">&nbsp;</td>
      <td width="65%">&nbsp;</td>
      <td width="20%">&nbsp;</td>
    </tr>
    <tr>
      <td width="15%">Ram:</td>
      <td width="65%">&nbsp;</td>
      <td width="20%">&nbsp;</td>
    </tr>
    <tr>
      <td width="15%"><input type="radio" value="4" name="Ram" onclick="beregn(this)"></td>
      <td width="65%">512 DDR3200</td>
      <td width="20%">10</td>
    </tr>
    <tr>
      <td width="15%"><input type="radio" value="5" name="Ram" onclick="beregn(this)"></td>
      <td width="65%">1024 DDR3200</td>
      <td width="20%">20</td>
    </tr>
    <tr>
      <td width="15%"><input type="radio" value="6" name="Ram" onclick="beregn(this)"></td>
      <td width="65%">2048 DDR3200</td>
      <td width="20%">30</td>
    </tr>
    <tr>
      <td width="15%">&nbsp;</td>
      <td width="65%">&nbsp;</td>
      <td width="20%">&nbsp;</td>
    </tr>
    <tr>
      <td width="15%">Graphics Cards:</td>
      <td width="65%">&nbsp;</td>
      <td width="20%">&nbsp;</td>
    </tr>
    <tr>
      <td width="15%"><font face="Times New Roman">
        <input type="radio" name="GraphicCard" value="7" onclick="beregn(this)"></font></td>
      <td width="65%"><font face="Times New Roman">
      ASUS AX850XT 256 MB GDDR3</font></td>
      <td width="20%">10</td>
    </tr>
    <tr>
      <td width="15%"><font face="Times New Roman">
        <input type="radio" name="GraphicCard" value="8" onclick="beregn(this)"></font></td>
      <td width="65%"><font face="Times New Roman">
      ATI RADEON 9200 128 MB DDR SDRAM</font></td>
      <td width="20%">20</td>
    </tr>
    <tr>
      <td width="15%"><font face="Times New Roman">
        <input type="radio" name="GraphicCard" value="9" onclick="beregn(this)"></font></td>
      <td width="65%"><font face="Times New Roman">
      GeForce 6800 GT 256 MB GDDR3</font></td>
      <td width="20%">30</td>
    </tr>
  </table>
&nbsp;<p><input type="text" name="totalpris" size="20" readonly="true"><br>

  </p>

    <hr>
    <font face="Times New Roman">Name:</font><br>
    <input type="text" name="Name" size="30"><br>
    Address:<br>
    <input type="text" name="Address" size="30"><br>
    Postcode:<br>
    <!--webbot bot="Validation" s-data-type="Integer" s-number-separators="x" b-value-required="TRUE" i-minimum-length="4" i-maximum-length="4" -->
    <input type="text" name="Postcode" size="4" maxlength="4"><br>
    Town:<br>
    <input type="text" name="Town" size="30"><br>
    E-Mail:<br>
    <input type="text" name="Mail" size="30"><br>
    <br>
    <input type="button" value="Bekræft" name="confirmCompilation" onclick="changePage(2);">
</div>

<div id="confirmation">
    <div id="compilation">&nbsp;</div>
    <input type="button" value="Tilbage" name="Back" onclick="changePage(1);">
    <input type="submit" value="Send" name="send">
</div>

</form>
<p>&nbsp;</p>

</body>

</html>

Tricket består i at udvide den variabel der hedder strHTML i funktionen listProducts, så den afspejler den HTML du vil vise for brugeren inden denne accepterer sammensætningen...

Og så kan du vist godt se bort fra det der ASP-tag i toppen af koden (<%@ language="vbscript" %>). Det er kun hvis du vil have noget med serverside ind i spillet...

jeg kan prøve men det bliver nok ikke i dag jeg tror jeg smutter i seng... og mange tak for hjælpen indtil viderer.

Det var så lidt og godnat :)

skal du ikke have nogle point?

Jo tak, hvis du synes jeg fortjener dem :)

Tak for point :)