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

脳