Having some problem in displaying the output of javascript

Question

can anyone tell me what is wrong with my coding and why it is not displaying the output? there is something wrong in my if statements and I cant figure out what it is I tried many things but it still now working any suggestions? it suppose to be like this same as the picture enter image description here

var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var val = Number(document.getElementById("room").value);
var n = Number(document.getElementById("days").value);
var total = "";

function myFunction() {

  if (n <= 1) {
    n = prompt(" minimum reservation period is 2 daye try again");
  } 
  else if (val == "King $30") {
    total = n * 30;
  } 
  else if (val == "Double 20") {
    total = n * 20;
  } 
  else    (val == "Single 10") {
    total = n * 10;
  }

  document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us.";
  document.getElementById("result1").innerHTML = " Expected Arrival Date: " + date;
  document.getElementById("result2").innerHTML = " Booked: " + val + " for " + days + "days ";
  document.getElementById("result3").innerHTML = " Amount:=$ " + total;
  document.getElementById("result4").innerHTML = " Any Special Request: " + request;
  
};

<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>

<form>
  <label><b> GUEST:</b> </label>

  <input type="text" id="fname" size="20">
  <input type="text" id="lname" size="20">

  <br>
  <label style="margin-left:65px"> First Name </label>
  <label style="margin-left:105px"> Last Name </label>

  <br><br>

  <label><b>Arrival Date:</b></label>
  <input type="date" id="date">

  <br><br>

  <label><b>Room Type:</b></label>
  <input list="room">
  <datalist id="room">
    <option value="King $30">
    <option value="Double $20">
    <option value="Single $10">
  </datalist>

  <br><br>

  <label><b> Number of Days:</b></label>
  <input type="text" size="12" id="days">

  <br><br>

  <label><b> Any Special Request:</b></label>
  <br>
  <textarea rows="5" cols="50" id="request"></textarea>

  <br>

  <button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
  <button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>

<p style="background-color:blue;" id="result"> </p>
<p style="background-color:blue;" id="result1"> </p>
<p style="background-color:blue;" id="result2"> </p>
<p style="background-color:blue;" id="result3"> </p>
<p style="background-color:blue;" id="result4"> </p>

Answer 1

When you specify a condition, you cannot use "else".

else (val == "Single 10")

write this instead

else if (val == "Single 10")

You will see that the problem is solved. Have a nice day.

Answer 2

An else statement does not need a condition

else if (val == "Single 10"){
    
}
else{}

Check this out:

function myFunction() {

  var Fname = document.getElementById("fname").value;
  var Lname = document.getElementById("lname").value;
  var date = document.getElementById("date").value;
  var days = document.getElementById("days").value;
  var request = document.getElementById("request").value;
  var val = Number(document.getElementById("room").value);
  var n = Number(document.getElementById("days").value);
  var total = "";

  if (n < 3) {
    console.log(n);
    n = alert("Minimum reservation period is 2 daye try again");
  } 
  else if (val == "King $30") {
    total = n * 30;
  } 
  else if (val == "Double 20") {
    total = n * 20;
  } 
  else if (val == "Single 10") {
    total = n * 10;
  } 
  else {}

  document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us.";
  document.getElementById("result1").innerHTML = " Expected Arrival Date: " + date;
  document.getElementById("result2").innerHTML = " Booked: " + val + " for " + days + "days ";
  document.getElementById("result3").innerHTML = " Amount:=$ " + total;
  document.getElementById("result4").innerHTML = " Any Special Request: " + request;

}

<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>

<form>
  <label><b> GUEST:</b> </label>

  <input type="text" id="fname" size="20">
  <input type="text" id="lname" size="20">

  <br>
  <label style="margin-left:65px"> First Name </label>
  <label style="margin-left:105px"> Last Name </label>

  <br><br>

  <label><b>Arrival Date:</b></label>
  <input type="date" id="date">

  <br><br>

  <label><b>Room Type:</b></label>
  <input list="room">
  <datalist id="room">
    <option value="King $30">
    <option value="Double $20">
    <option value="Single $10">
  </datalist>

  <br><br>

  <label><b> Number of Days:</b></label>
  <input type="number" id="days">

  <br><br>

  <label><b> Any Special Request:</b></label>
  <br>
  <textarea rows="5" cols="50" id="request"></textarea>

  <br>

  <button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
  <button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>

<p style="background-color:blue;" id="result"> </p>
<p style="background-color:blue;" id="result1"> </p>
<p style="background-color:blue;" id="result2"> </p>
<p style="background-color:blue;" id="result3"> </p>
<p style="background-color:blue;" id="result4"> </p>

Answer 3

document.querySelector('button[type=submit]').addEventListener('click', function myFunction(e) {

  e.preventDefault();
  var Fname = document.getElementById("fname").value;
  var Lname = document.getElementById("lname").value;
  var date = document.getElementById("date").value;
  var days = document.getElementById("days").value;
  var request = document.getElementById("request").value;
  var val = Number(room.value);
  var n = Number(days);

  if (n <= 1) {
    n = prompt(" minimum reservation period is 2 daye try again");
    days.value = n
  }

  document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us.";
  document.getElementById("result1").innerHTML = " Expected Arrival Date: " + date;
  document.getElementById("result2").innerHTML = " Booked: " + val + " for " + days + "days ";
  document.getElementById("result3").innerHTML = " Amount:=$ " + val * n;
  document.getElementById("result4").innerHTML = " Any Special Request: " + request;

});

<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>

<form>
  <label><b> GUEST:</b> </label>

  <input type="text" id="fname" size="20">
  <input type="text" id="lname" size="20">

  <br>
  <label style="margin-left:65px"> First Name </label>
  <label style="margin-left:105px"> Last Name </label>

  <br><br>

  <label><b>Arrival Date:</b></label>
  <input type="date" id="date">

  <br><br>

  <label><b>Room Type:</b></label>

  <select id="room">
    <option value=30>King $30</option>
    <option value=20>Double $20</option>
    <option value=10>Single $10</option>
  </select>

  <br><br>

  <label><b> Number of Days:</b></label>
  <input type="text" size="12" id="days">

  <br><br>

  <label><b> Any Special Request:</b></label>
  <br>
  <textarea rows="5" cols="50" id="request"></textarea>

  <br>

  <button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
  <button type="submit" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>

<p style="background-color:blue;" id="result"> </p>
<p style="background-color:blue;" id="result1"> </p>
<p style="background-color:blue;" id="result2"> </p>
<p style="background-color:blue;" id="result3"> </p>
<p style="background-color:blue;" id="result4"> </p>