Issue with extern JS-File (getElementById)

JavaScript
1

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">&#36; 200</option>
            <option value="500">&#36; 500</option>
            <option value="1000">&#36; 1.000</option>
            <option value="1500">&#36; 1.500</option>
            <option value="2000">&#36; 2.000</option> 
        </select>
        <select id="deductibleComprehensive">
            <option disabled selected value="0">-- COMPREHENSIVE --</option>
            <option value="0">&#36; 0</option>
            <option value="150">&#36; 150</option>
            <option value="300">&#36; 300</option>
            <option value="1000">&#36; 1.000</option>
            <option value="2000">&#36; 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>
2

Can you describe to us what the problem is you are experiencing with the current code?

Have you checked your browser’s console to see if there are any errors showing?

After reviewing your code, you seem to not understand some basic JavaScript syntax as it relates to assigning values to variables and then returning them. You might want to take a look at the following FCC challenge to gain some insight.

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/word-blanks

3

Thank you for the advice. I just got started with JS, maybe I have to study more to understand the basics better, before I get back to my project. I appreciate it!