Why doesn't my javascript if statement target the array?

Question

When I enter Archers, Skeletons, or Balloon into the prompt, it only displays the else alert statement. I am not sure what I am doing wrong,why doesn't the if target the array? can anyone explain or give tips?

Thank you

HTML with script:

<html>
  <head>
    <title>challenge 1</title>
  </head>
  <body>

<script>
var nameCost;
nameCost = [3,6,7];
var nameList;
nameList = ['Archers','Sparky', 'Pekka']
var question = prompt('What is your card name?');

  if (question.value == nameList[0])
  {
    alert('Your name cost is ' + nameCost[0]);
  }
  else if (question.value == nameList[1])
  {
    alert('Your name cost is ' + nameCost[1]);
  }
  else if (question.value == nameList[2])
  {
    alert('Your name cost is ' + nameCost[2]);
  } else {
    alert('Your name and card is not available');
  }


</script>
  </body>
</html>

There is no question.value. It’s just question. Read the docs. — Sebastian Simon
– Sebastian Simon, Commented Jan 24, 2017 at 23:37

Jhecht · Accepted Answer · 2017-01-25 21:36:05Z

I would personally refactor your code into an object to make it easier to work with, and remove some repetitive code. Link to Object info

Your biggest issue was that you were trying to access question.value in your code, which was incorrect. prompt() simply assigns whatever is input into the variable as a string, so you should have been checking the value of just question

For the rest of it: A basic coding principle is that you do not want to repeat yourself (many call this DRY - Don't Repeat Yourself) With your code, you were repeating yourself quite a bit by using multiple if() statements with repeated instructions (alert(...) in this case). For example in the code below notice that the contents of each portion of the if statement is almost the same thing. All the changes is the array index you are calling.

if (question == nameList[0])
  {
    alert('Your name cost is ' + nameCost[0]);
  }
  else if (question== nameList[1])
  {
    alert('Your name cost is ' + nameCost[1]);
  }...

By comparison, the code I provide below has only 1 if statement for all acceptable cases, and a catch-all else statement for if the value is not found.

<html>

<head>
  <title>challenge 1</title>
</head>

<body>

  <script>
    var nameCost = {
      'Archers': 3,
      'Sparky': 6,
      'Pekka': 7
    };

    var question = prompt('What is your card name?');

    if (nameCost.hasOwnProperty(question)) {
      alert('Your cost would be : ' + nameCost[question]);
    } else {
      alert('your cost could not be found');
    }
  </script>
</body>

</html>

The only alteration I would make would be to format the strings correctly, depending on if you want to keep the object with a capital letter

<html>

<head>
  <title>challenge 1</title>
</head>

<body>

  <script>
    var nameCost = {
      'Archers': 3,
      'Sparky': 6,
      'Pekka': 7
    };

    var question = prompt('What is your card name?');
    question = question.charAt(0).toUpperCase() + question.slice(1);
     //turns bob -> Bob
    if (nameCost.hasOwnProperty(question)) {
      alert('Your cost would be : ' + nameCost[question]);
    } else {
      alert('your cost could not be found');
    }
  </script>
</body>

</html>

OR if you reorganized the object to have lowercase keys

<html>

<head>
  <title>challenge 1</title>
</head>

<body>

  <script>
    var nameCost = {
      'archers': 3,
      'sparky': 6,
      'pekka': 7
    };

    var question = prompt('What is your card name?');
    question = question.toLowerCase();
     //turns RoBErT -> robert. Note that you could call this directly after prompt() to save space. i.e.
     //prompt('what is your card name?').toLowerCase();
    if (nameCost.hasOwnProperty(question)) {
      alert('Your cost would be : ' + nameCost[question]);
    } else {
      alert('your cost could not be found');
    }
  </script>
</body>

</html>

I like this answer the most. Easiest to maintain and understand.
But with no explanation as to what was wrong in the posted code.
I had posted this question quite a bit after the other answers or comments which indicate what is wrong with the code, but I suppose I could edit it in.

DILP · Accepted Answer · 2017-01-24 23:40:11Z

1

Prompt will save the value of what was entered to the question var. So when interacting with question, you don't need question.value. Just question.

answered Jan 24, 2017 at 23:40

DILP

77910 silver badges15 bronze badges

Comments

pkuhar · Accepted Answer · 2017-01-24 23:45:01Z

1

It's not question.value it's just question

Otherwise, a better way to solve this problem would be with a lookup table.

var cost_table = {
    'Archers':3,
    'Sparky':6,
    'Pekka':7
}

var name = prompt('What is your card name?')
var cost = cost_table[name]
if( cost ){
    alert('Your name cost is ' + cost )
}else{
    alert('Cost for ' + name + ' available ')
}

edited Jan 24, 2017 at 23:45

answered Jan 24, 2017 at 23:42

pkuhar

6017 silver badges17 bronze badges

1 Comment

Sebastian Simon Over a year ago

This doesn’t cover the “not available” case.

Sooraj · Accepted Answer · 2017-01-24 23:39:48Z

0

There is no value property for variable. Use question directly.

<html>
  <head>
    <title>challenge 1</title>
  </head>
  <body>

<script>
var nameCost;
nameCost = [3,6,7];
var nameList;
nameList = ['Archers','Sparky', 'Pekka']
var question = prompt('What is your card name?');

  if (question == nameList[0])
  {
    alert('Your name cost is ' + nameCost[0]);
  }
  else if (question== nameList[1])
  {
    alert('Your name cost is ' + nameCost[1]);
  }
  else if (question == nameList[2])
  {
    alert('Your name cost is ' + nameCost[2]);
  } else {
    alert('Your name and card is not available');
  }


</script>
  </body>
</html>

answered Jan 24, 2017 at 23:39

Sooraj

10.7k12 gold badges67 silver badges103 bronze badges

Comments

Miro · Accepted Answer · 2017-01-24 23:45:15Z

0

Here's a more minimal version just in case:

<html>
  <head>
    <title>challenge 1</title>
  </head>
  <body>

<script>
var nameCost;
nameCost = [3,6,7];
var nameList;
nameList = ['Archers','Sparky', 'Pekka']
var question = prompt('What is your card name?');

alert('Your name cost is ' + nameCost[ nameList.indexOf(question)]);

</script>
  </body>
</html>

answered Jan 24, 2017 at 23:45

Miro

8,7104 gold badges40 silver badges75 bronze badges

Comments

Kaysser Kayyali · Accepted Answer · 2017-01-24 23:47:33Z

First off, I would seriously use indexOf here instead of multiple if statements as depicted.

Second, the prompt function is returning the value to the question variable, if you console.log(question) immediately after the prompt, you will see there is no value property and so you always fail to match undefined against the nameList.

I would recommend using this

<script>
var nameCost;
nameCost = [3,6,7];
var nameList;
nameList = ['Archers', 'Sparky', 'Pekka'];
var question = prompt('What is your card name?');
var match_index = nameList.indexOf(question.charAt(0).toUpperCase() + question.slice(1));
if (match_index >= 0) {
    alert('Your name cost is ' + nameCost[match_index]);
}
else {
    alert('Your name and card is not available');
}
</script>

Collectives™ on Stack Overflow

Why doesn't my javascript if statement target the array?

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related