/    Sign up×
Community /Pin to ProfileBookmark

I am having trouble to display the result of a calculation using javasript….

This this what I have done, but for some reason I can not see the result…
If anyone can help me with this code… I would appreciate it.
It supposed to be an easy code, but there is something that I am missing.

[code]
<?xml version=”1.0″ encoding=”UTF-8″?>

<!–initial lines of code to indicate the conformance standard applied to the page–>

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<script type=”text/javascript”>
function GetTotal()
{
var processorprice = 0;
var harddriveprice = 0;
var memoryprice = 0;
var networkcardprice=0;
var modemprice = 0;
var totalprice =0;
var i;

// Get processor price
for(i=1; i<=3; i++) {
if(document.getElementById(“Proccesor” + i).checked){
processorprice=parseInt(document.getElementById(“Processor” + i).value);
}
}
// Get hard drive price
for(i=1 ;i<=3; i++) {
if(document.getElementById(“HardDrive” + i).checked){
harddriveprice=parseInt(document.getElementById(“HardDrive” + i).value);
}
}
// Get menory price
i=document.getElementById(“Memory”).selectedIndex;
memoryprice=parseInt(document.getElementById(“Memory”)[i].value);

// Get Network Card price
if(document.getElementById(“NetworkCard”).checked){
networkcardprice=parseInt(document.getElementById(“NetworkCard”).value);
}
else
{
networkcardprice=0;
}
// get modem price
if(document.getElementById(“Modem”).checked){
modemprice=parseInt(document.getElementById(“Modem”).value);
}
else{
modemprice =0;
}
// Get total Price
totalprice=1000 + processorprice + harddriveprice + networkcardprice + modemprice;
document.getElementById(“TotalPrice”).value=totalprice;
}

</script>
<title>calculating the cost of a computer.</title>
<style type=”text/css”>

</style>
</head>
<body>
<h1>Computer Pricing</h1>

<form>
<table>

<tr>
<td bgcolor=”#F0F0F0″>Base Price:</td>
<td>$1000</td>
</tr>

<tr>
<td rowspan=”3″ bgcolor=”#F0F0F0″>Processor:</td>
<td><input id=”Processor1″ type=”radio” name=”Processor” value=”0″/>1.5GHz</td>
</tr>
<tr>
<td><input id=”Processor2″ type=”radio” name=”Processor” value=”400″/>2.0GHz (add $400)</td>
</tr>
<tr>
<td><input id=”Processor3″ type=”radio” name=”Processor” value=”600″/>3.0GHz (add $600)</td>
</tr>

<tr>
<td rowspan=”3″ bgcolor=”#F0F0F0″>Hard Drive:</td>
<td><input id=”HardDrive1″ type=”radio” name=”HardDrive” value=”0″/>40GB</td>
</tr>
<tr>
<td><input id=”HardDrive2″ type=”radio” name=”HardDrive” value=”200″/>80GB (add $200)</td>
</tr>
<tr>
<td><input id=”HardDrive3″ type=”radio” name=”HardDrive” value=”0″/>400GB (add $400)</td>
</tr>

<tr>
<td bgcolor=”#F0F0F0″>Memory:</td>
<td>
<select id=”Memory;”>
<option value=”0″>1024 MB</option>
<option value=”300″>2048 MB (add $300)</option>
<option value=”500″>4096 MB (add $500)</option>
<option value=”700″>8192 MB (add $700)</option>
</select>
</td>
</tr>
<tr>
<td bgcolor=”#F0F0F0″>Network Card:</td>
<td><input id=”NetworkCard” type=”checkbox” value=”70″/>(add $70)</td>
</tr>
<tr>
<td bgcolor=”#F0F0F0″>Modem:</td>
<td><input id=”Modem” type=”checkbox” value=”50″/>(add $50)</td>
</tr>
<tr>
<td bgcolor=”#F0F0F0″><input type=”button” value=”Total Price” onClick=”GetTotal()”/></td>
<td>$<input id=”TotalPrice”/ type=”text”><span id=”TotalPrice”></span></td>
</tr>
</table>
</form>

</body>
</html>
[/code]

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@dmonadAug 25.2014 — Try using the code environment ?

Here, you declare a simple xml document.

[XML]

<?xml version="1.0" encoding="UTF-8"?>

[/XML]

Here, you intended to declare a decade old HTML document format.

[XML]

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

[/XML]

Since your document was first declared as xml (which can't be displayed like this), this is your fault. I really recommend you to hit some (newer) html books ?
Copy linkTweet thisAlerts:
@olm46authorAug 25.2014 — Hi, thanks for replying. what should I do to fix it?
Copy linkTweet thisAlerts:
@dmonadAug 25.2014 — As I said.. don't declare your document as xml.
Copy linkTweet thisAlerts:
@olm46authorAug 25.2014 — Hi, thanks for replying. what should I do to fix it?
Copy linkTweet thisAlerts:
@dmonadAug 25.2014 — Ok.. ok.. what I meant is, that you normally would not have that first line (to my knowledge). And I thought that this was the problem. I thought that you can't see your document - i missunderstood you. Nah.. however. You see error messages in your browser.

Chrome: open your document and open the browser-terminal (Strg-shift-j)

Firefox: Strg-shift-k

It does not find the Processor+i element.
Copy linkTweet thisAlerts:
@dmonadAug 25.2014 — BTW: he can't find it because it does not exist at the time of execution. You see, the browser reads your doc from top to botton and executes the code when it finds some. Because your code is at the top, the id does not yet exist.

try to put everything in

window.onload = function () {

## your code


}

onload is executed when the document was fully parsed.
Copy linkTweet thisAlerts:
@olm46authorAug 25.2014 — Thanks for the advice... I have another question, do you know or (can you check) if there is something wrong in these lines because I still can not see display the result

<tr>

<td bgcolor="#F0F0F0"><input type="button" value="Total Price" onClick="GetTotal()"/></td>

<td>$<input id="TotalPrice"/ type="text"><span id="TotalPrice"></span></td>

</tr>
Copy linkTweet thisAlerts:
@olm46authorAug 25.2014 — Yes, I see an error message in Intenet Explorer
Copy linkTweet thisAlerts:
@olm46authorAug 25.2014 — thanks.... I am going to try to do it.
Copy linkTweet thisAlerts:
@dmonadAug 25.2014 — .. you misspelled Processor on that line.
Copy linkTweet thisAlerts:
@olm46authorAug 25.2014 — thanks for the correction.

Should I put window.onload = function () inside the body tag?

because I still cannot display the result
Copy linkTweet thisAlerts:
@olm46authorAug 25.2014 — Hi dmonad, I already fixed the code.

I put a semicolon here <select id="Memory;">. Anyway thanks for helping me out. I really appreciated it.

<tr>

<td bgcolor="#F0F0F0">Memory:</td>

<td>

[B]<select id="Memory;">[/B]

<option value="0">1024 MB</option>

<option value="300">2048 MB (add $300)</option>

<option value="500">4096 MB (add $500)</option>

<option value="700">8192 MB (add $700)</option>

</select>

</td>

</tr>
×

Success!

Help @olm46 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...