Been trying to put together a test java script/html page to use into my main assessment task. After spending hours looking for the issue,seems like I can't find it.
Here's the code:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/purchases.css">
<title>Home</title>
<script language="javascript">
function exercise1()
{
var discount = (document.getElementById('DiscountYes').checked);
var cars = parseInt(document.getElementbyId('NumCars').value);
var service = parseInt(document.getElementById('NumService').value);
var price = 0;
if ((cars >= 1) && (cars <= 10))
{
if ((cars >= 1) && (cars <= 3))
{
price = 1000;
}
if ((cars >= 5) && (cars <= 8))
{
price = 4000;
}
if ((cars >= 9) && (cars <= 10))
{
price = 4000;
}
if (cars == 5)
{
price = 5000;
}
if (cars == 6)
{
price = 22500;
}
if (cars == 7)
{
price = 222500;
}
if (cars == 8)
{
price = 5000;
}
if (cars == 9)
{
price = 22500;
}
if (cars == 10)
{
price = 222500;
}
if (discount)
{
discount = 10;
price = (price) - (price / discount);
} else
{
price = price;
}
}
document.getElementById('output').value = "The cost is: $" + price;
alert("Are these details correct?");
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
</div>
<div id="statement">
<h1>Computer Training Rooms</h1>
</div>
</div>
<div id="links">
<div class="links">
<span>
<a href="index.html"><img src="images/buttons/home.jpg" alt="home" class="button"></a>
</span>
<span>
<a href="ethics.html"><img src="images/buttons/ethics.jpg" alt="ethics" class="button"></a>
</span>
<span>
<a href="resources.html"><img src="images/buttons/resources.jpg" alt="resources" class="button"></a>
</span>
<span>
<a href="purchases.html"><img src="images/buttons/purchases.jpg" alt="purchases" class="button"></a>
</span>
<span>
<a href="feedback.html"><img src="images/buttons/feedback.jpg" alt="feedback" class="button" class="button"></a>
</span>
</div>
<div Id="mainJava">
<form id ="dataForm" method="post">
<h3>Appying for Computer Rooms</h3>
<fieldset>
<legend>Cars</legend>
<label for="NumCars">Cars</label>
<select Id="NumCars" name="NumCars">
<option value="1">Commodore</option>
<option value="2">Ford</option>
<option value="3">Astra</option>
<option value="4">Adventra</option>
<option value="5">Patrol</option>
<option value="6">Landcriuser</option>
<option value="7">BMW 4WD</option>
<option value="8">Ranger</option>
<option value="9">MGB</option>
<option value="10">MGB GT</option>
</select>
<label for="NumService">Service Required:</label>
<select Id="NumService" name="NumService">
<option value="A">1500Km</option>
<option value="B">5000Km</option>
<option value="C">10000Km</option>
<option value="D">20000Km</option>
<option value="E">50000Km</option>
<option value="F">120000Km</option>
</select>
</fieldset>
<table>
<tr>
<td>
<fieldset class="right">
<legend>Return Customer</legend>
<label for="DiscountYes" Class="noborder">Yes</label>
<input class="noborder" Id="DiscountYes" checked="checked" name="Return" type="checkbox" value="DiscountYes" />
</fieldset>
</td>
</tr>
</table>
<br>
<input class="buttons" type="submit" Id="submit" value="Get Price" onclick="exercise1()"/>
<input class="buttons" type="reset" Id="reset" value="Reset"/>
<input class="message" Id="output" type="textarea" value=" " />
</form>
<div id="rightImage">
<div id="rightTop">
</div>
<div id="rightbottom">
</div>
</div>
</div>
<div class="footer">
<address>
<br>
Mailing Address:<br>
Phone:<br>
<h6> © Cert IV Possible Storyboard</h6>
</address>
</div>
</div>
</body>
</html>
it should be printing a result but dosen't matter how many times I check it, Seems like I can't get it to work.
Maybe I'm missing something really big and I just can't pick up on it? could it be spacing? I really don't know.
Any help would be great thanks!
The only issue am seeing in your code is parseInt (document.getElementbyId('NumCars').value);, here getElementbyId is misspelled and it should be getElementById. And its working fine now. Check below snippet.
Update: replace input type="submit" to type="button" as you don't have a form submit.
function exercise1() {
var discount = document.getElementById('DiscountYes').checked;
var cars = parseInt(document.getElementById('NumCars').value);
var service = parseInt(document.getElementById('NumService').value);
var price = 0;
if ((cars >= 1) && (cars <= 10))
{
if ((cars >= 1) && (cars <= 3)) {
price = 1000;
}
if ((cars >= 5) && (cars <= 8)) {
price = 4000;
}
if ((cars >= 9) && (cars <= 10)) {
price = 4000;
}
if (cars == 5) {
price = 5000;
}
if (cars == 6) {
price = 22500;
}
if (cars == 7) {
price = 222500;
}
if (cars == 8) {
price = 5000;
}
if (cars == 9) {
price = 22500;
}
if (cars == 10) {
price = 222500;
}
if (discount) {
discount = 10;
price = (price) - (price / discount);
} else {
price = price;
}
}
document.getElementById('output').value = "The cost is: $" + price;
alert("Are these details correct?");
}<div id="wrapper">
<div id="header">
<div id="logo">
</div>
<div id="statement">
<h1>Computer Training Rooms</h1>
</div>
</div>
<div id="links">
<div class="links">
<span><a href="index.html"><img src="images/buttons/home.jpg" alt="home" class="button"></a></span>
<span><a href="ethics.html"><img src="images/buttons/ethics.jpg" alt="ethics" class="button"></a></span>
<span><a href="resources.html"><img src="images/buttons/resources.jpg" alt="resources" class="button"></a></span>
<span><a href="purchases.html"><img src="images/buttons/purchases.jpg" alt="purchases" class="button"></a></span>
<span><a href="feedback.html"><img src="images/buttons/feedback.jpg" alt="feedback" class="button" class="button"></a></span>
</div>
<div Id="mainJava">
<form id="dataForm" method="post">
<h3>Appying for Computer Rooms</h3>
<fieldset>
<legend>Cars</legend>
<label for="NumCars">Cars</label>
<select Id="NumCars" name="NumCars">
<option value="1">Commodore</option>
<option value="2">Ford</option>
<option value="3">Astra</option>
<option value="4">Adventra</option>
<option value="5">Patrol</option>
<option value="6">Landcriuser</option>
<option value="7">BMW 4WD</option>
<option value="8">Ranger</option>
<option value="9">MGB</option>
<option value="10">MGB GT</option>
</select>
<label for="NumService">Service Required:</label>
<select Id="NumService" name="NumService">
<option value="A">1500Km</option>
<option value="B">5000Km</option>
<option value="C">10000Km</option>
<option value="D">20000Km</option>
<option value="E">50000Km</option>
<option value="F">120000Km</option>
</select>
</fieldset>
<table>
<tr>
<td>
<fieldset class="right">
<legend>Return Customer</legend>
<label for="DiscountYes" Class="noborder">Yes</label>
<input class="noborder" Id="DiscountYes" checked="checked" name="Return" type="checkbox" value="DiscountYes" />
</fieldset>
</td>
</tr>
</table>
<br>
<input class="buttons" type="button" Id="submit" value="Get Price" onclick="exercise1()" />
<input class="buttons" type="reset" Id="reset" value="Reset" />
<input class="message" Id="output" type="textarea" value=" " />
</form>
<div id="rightImage">
<div id="rightTop">
</div>
<div id="rightbottom">
</div>
</div>
</div>
<div class="footer">
<address>
<br>
Mailing Address:<br>
Phone:<br>
<h6> © Cert IV Possible Storyboard</h6>
</address>
</div>
</div>