Hi there,
my problem is from a project, i’m actually workin on. I just can’t find the error in the JS nor the HTML file - maybe someone can help me out here. i’m stuck for days now… thanks in advance guys!
here is the JS-Part:
var carType = document.getElementById("carType").value;
var carStrength = document.getElementById("carStrength").value;
var deductibleCollision = document.getElementById("deductibleCollision").value;
var deductibleComprehensive = document.getElementById("deductibleComprehensive").value;
function calculatePrice() {
calculatePrice() = "carType" + "carStrength" + "deductibleCollision" + "deductibleComprehensive";
return calculatePrice;
document.getElementById("result").onclick = function() { calculatePrice() };
}
here is the HTML-Part:
<!DOCTYPE html>
<html>
<title>Car Insurance Calculator</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="header">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-5"><h1 class="title text-center">Car Insurance Calculator</h1></div>
<div class="col-sm-3">
<div id="navHeader" class="topnav pull-right">
<a href="#"><i class="fa fa-home" style="font-size:24px"></i></a>
<a href="#"><i class="fa fa-envelope" style="font-size:24px"></i></a>
<a href="#"><i class="fa fa-twitter-square" style="font-size:24px"></i></a>
<a href="#"><i class="fa fa-facebook-square" style="font-size:24px"></i></a>
<a href="#"><i class="fa fa-youtube-square" style="font-size:24px"></i></a>
<a href="#"><i class="fa fa-linkedin-square" style="font-size:24px"></i></a>
<br>
</div>
</div>
</div>
</div>
</head>
<body>
<h3 class = "quote">Get your Quote!</h3>
<br>
<label class = "text-primary">
Choose your car type<br>
<select id="carType">
<option disabled selected value="0">-- TYPE --</option>
<option value="sedan_hatchbacks">Sedan / Hatchbacks</option>
<option value="suv_pickup">SUV / Pickup</option>
<option value="minivan">Minivan</option>
<option value="luxury_car">Luxury Car</option>
<option value="sports_car">Sports Car</option>
</select>
</label>
<br>
<label class = "text-primary">
Choose the power<br>
<select id="carStrength">
<option disabled selected value="0">-- POWER --</option>
<option value="55">0 - 55kW</option>
<option value="85">56kW - 85kW</option>
<option value="100">86kW - 100kW</option>
<option value="155">101kW - 155kW</option>
<option value="195">156kW - 195kW</option>
<option value="255">196kW - 255kW</option>
<option value="300">256kW - 300kW</option>
</select>
</label>
<br>
<label class = "text-primary">
Choose deductible<br>
<select id="deductibleCollision">
<option disabled selected value="0">-- COLLISION --</option>
<option value="250">$ 200</option>
<option value="500">$ 500</option>
<option value="1000">$ 1.000</option>
<option value="1500">$ 1.500</option>
<option value="2000">$ 2.000</option>
</select>
<select id="deductibleComprehensive">
<option disabled selected value="0">-- COMPREHENSIVE --</option>
<option value="0">$ 0</option>
<option value="150">$ 150</option>
<option value="300">$ 300</option>
<option value="1000">$ 1.000</option>
<option value="2000">$ 2.000</option>
</select>
</label>
<br>
<!-- Only change code below! -->
<div id = "result" class = "text-center">
<button type="button" onclick="function calculatePrice()">
Here is your Quote!</button>
</div>
<script type="text/javascript" src="myScript.js"></script>
</body>
</html>