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>

biberman · Accepted Answer · 2021-05-30 19:28:02Z

3

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.

edited May 30, 2021 at 19:28

biberman

5,7804 gold badges16 silver badges39 bronze badges

answered May 30, 2021 at 13:21

Bora Öksüzoğlu

411 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

Bushra Mh Over a year ago

it worked!! but now im facing another problem that the prompt keeps showing whenever I press book it suppose to show only when I write in number of days blank the value zero

Dibash Sapkota Over a year ago

Check my current answer I just edited code

Dibash Sapkota Over a year ago

you need to declare variables inside function --otherwise value of variables are always empty

biberman · Accepted Answer · 2021-05-30 19:27:25Z

1

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>

edited May 30, 2021 at 19:27

biberman

5,7804 gold badges16 silver badges39 bronze badges

answered May 30, 2021 at 13:15

Dibash Sapkota

6657 silver badges9 bronze badges

3 Comments

Bushra Mh Over a year ago

i must solve the coding with java script too

Dibash Sapkota Over a year ago

You can try this code else if(val == "Single 10") { total = n * 10;} else{}

Bushra Mh Over a year ago

it worked!! but now im facing another problem that the prompt keeps showing whenever I press book it suppose to show only when I write in number of days blank the value zero

biberman · Accepted Answer · 2021-05-30 19:06:22Z

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>

@bel3atar You should explain your code - see stackoverflow.com/help/how-to-answer

Collectives™ on Stack Overflow

Having some problem in displaying the output of javascript

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related