Jump to content
Please Use CODE Tags

JS - beginner question

Mymusz
By Mymusz
in Programming
 Share
Posted

Hi, I have finished my simple code to display an alert, according to weather. But whatever I submit, the same alert is displayed ("You will need an overcoat today.") and then when you click ok, website doesnt work. Can someone give me any advice where is an error in my code?

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////////////////JS IS THERE
function checkWeather() {
    var weather;
    var Cold, cold, Warm, warm, Rain, rain;
 
    if (weather == Cold || cold) {
        alert("You will need an overcoat today.");
    } 
    else if (weather == Warm || warm) {
        alert("You will not need an overcoat today.");
 
    } 
    else if (weather == Rain || rain) {
        alert("You will need an umbrella today.");
 
    } 
    else {
        alert("You have entered an incorrect value.");
    }
}    
</script>
    <h1> Weather</h1>
<form name="weather" method="post" onSubmit="checkWeather()">
     <input name="weather" type="text" size="10"/><p></p>
     <input type="Submit" value="Submit">
</form>    
</body>
</html>
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

In Javascript you should use triple equation signs for correct comparison.

 

Second, you are not collecting the input value correctly. You are defining the variable in the function, but it doesn't take the value from the form.

Correct way would be to add the parameter to onSubmit function and then use that parameter in comparison. Something like this might work: 

function submitForm(event) {
  const weather = event.target.elements.weather.value;
  // You can also use .toLowerCase() function to avoid double checks for 'Warm' and 'warm'
  if (weather === 'cold') {
    alert('It is cold');
  } else if (weather === 'warm') {
    alert('It is warm');
  }
}
<form onsubmit="submitForm(event)">
  <input name="weather"/>
  <input type="Submit" value="Submit">
</form>

Third, you are creating and then comparing variables, that all default to undefined because you haven't assigned any values to any of them. Here's a log of how your function runs (same result would be with triple equation signs, because they are all undefined, but checking for undefined is a whole different deal). 

> var weather;
undefined
> var cold, Cold, warm, Warm;
undefined
> weather == cold
true
> weather == Cold
true
> weather == warm
true
> weather == Warm
true
> console.log(weather);
undefined
> console.log(cold);
undefined

 

HAL9000: AMD Ryzen 9 3900x | Noctua NH-D15 chromax.black | 32 GB Corsair Vengeance LPX DDR4 3200 MHz | Asus X570 Prime Pro | ASUS TUF 3080 Ti | 1 TB Samsung 970 Evo Plus + 1 TB Crucial MX500 + 6 TB WD RED | Corsair HX1000 | be quiet Pure Base 500DX | LG 34UM95 34" 3440x1440

Hydrogen server: Intel i3-10100 | Cryorig M9i | 64 GB Crucial Ballistix 3200MHz DDR4 | Gigabyte B560M-DS3H | 33 TB of storage | Fractal Design Define R5 | unRAID 6.9.2

Carbon server: Fujitsu PRIMERGY RX100 S7p | Xeon E3-1230 v2 | 16 GB DDR3 ECC | 60 GB Corsair SSD & 250 GB Samsung 850 Pro | Intel i340-T4 | ESXi 6.5.1

Big Mac cluster: 2x Raspberry Pi 2 Model B | 1x Raspberry Pi 3 Model B | 2x Raspberry Pi 3 Model B+

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Your example with submitForm(event) works perfectly, thank you 😉

 

But in my exercise, they ask me to do exactly the same, but with values Cold or cold, Warm or warm, etc. Both lower and upper cases. I cant figure it out. But I will try, thanks anyways 😄

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
On 2/6/2021 at 7:59 PM, Mymusz said:

Your example with submitForm(event) works perfectly, thank you 😉

 

But in my exercise, they ask me to do exactly the same, but with values Cold or cold, Warm or warm, etc. Both lower and upper cases. I cant figure it out. But I will try, thanks anyways 😄

To test whether a value is "cold" or "Cold", you have to put the whole comparison both times: 

if (weather === "cold" || weather === "Cold") {

That won't work for "COLD" or "CoLd", or any other combination of cases though - to support that, you can normalize it to lower case with 

if (weather.toLowerCase() === "cold") {

 

HTTP/2 203

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Nice one, this one below works.

  

if (weather === "cold" || weather === "Cold") {

My problem was, I forgot to include my variable weather after OR ... 😕 well, I have to focus more. Thnaks guys, problem solved 🙂

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×