'Why would code work in code snippet but not when I try to run it myself?

I'm creating a program that validates some user info and uses a drop down list to get user choice, then the quantity of items the user wants and outputs the value. When I previously asked a question here it works fine on code snippet, but when I run it, it will not give me the total cost.. Does anyone know what could be causing it?

My code

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="externalJS.js"></script>
</head>
<body>
<p>PLease complete the below form to book one of our dives: </p>


<form name = "myForm" onsubmit = "return validate()" method="post">
<table>

  <tr>
      <td><label for="name">Name:</label><br></td>
      <td><input type="text" id="name" name="name"  /><br></td>

      </tr>

      <tr>

      <td><label for="email">Email address: </label><br></td>
      <td><input type="text" id="email" /></td><br>

      </tr>

      <tr>
      <td> <label for="phoneNumber">Phone number: </label><br></td>
      <td><input type="number" id="phoneNumber" name="phoneNumber" /></td><br>
      </tr>


         <tr>
          <td><label for="diveChoice">Please select which dive you would like to purchase: </label></td>
          <td><select id="diveChoice">
            <option disabled="disabled" selected="selected"> Select option</option>
            <option value="cenote">Cenote Dive</option>
            <option value="shark">Dive with Bull Sharks</option>
            <option value="reef">Reef Dive</option></td>
          </select></td>
         </tr>

            <!-- number input to get amount of dives required -->
            <tr>
            <td> <label for="quantity"> How many people are coming to on the dive? </label></td>
            <td> <input type="number" id="quantity" name="quantity" min=1></td><br>
            </tr>

         <tr>
           <td><label> Total cost: </label></td>
           <td><input type="text" id="total" /><br></td>
         </tr>

        <tr>
          <td><input type= "submit" value ="Submit" /> </td>
        </tr>
      </table>

My javascript code:

function validate(){
var x = document.getElementById("name").value;
var y = document.getElementById("email").value;
var z = document.getElementById("phoneNumber").value;

if (x == ""){
alert("Please provide a name");
return false
}


if (y == ""){
    alert("Please provide an email address");
    return false
}

if (z == ""){
        alert("Please provide a phone number");
        return false
    }

  }


 function totalCost(){
 var dive = document.getElementById("diveChoice").value;
 var amount = document.getElementById("quantity").value;

 if (dive === "cenote"){
     document.getElementById("total").value =
     amount * 150;
     }

if (dive === "shark"){
     document.getElementById("total").value =
     amount * 200;
     }

if (dive === "reef"){
     document.getElementById("total").value =
     amount * 100;
 }
}

document.getElementById('diveChoice').addEventListener('change', totalCost);
document.getElementById('quantity').addEventListener('change', totalCost);

Am I missing something from the opening of my html file? I know the external js file is linked correctly as user input validation works. Many thanks for any help in advance

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Why would code work in code snippet but not when I try to run it myself?

Sources

Related Questions