Javascript input run a function when specific text is typed in

Question

So I would like to run a function when a user inputs a certain command in the input box. For example, when a user types something like 'I want an ice cream sandwich' it would run a function that would add 1 ice cream sandwich to their inventory. But if they typed something like 'Gerfabujohn' it would tell you thats not a command. I have already got the function that adds the sandwich to the inventory done, that's not the problem. Heres my js:

function readCommand() {
  let readInput = document.querySelector('#commandInput').value
  if (readInput.value = 'I want an ice cream sandwich') {
    giveIceCreamSandwich()
  } else {
    alert(`Not a command`);
  }
}

and my html:

<label for="commandFeild"> Enter Command: </label>
<input type="text" id="commandInput" name="commandFeild"><br><br>
<button class="triggerInput" onclick="readCommand()"> Run Command </button>

Here I am trying to use the querySelector function to find the value of the input box using it's id. So far, this part seems to work. I used console.log to log the value of readInput and it logged the correct command from the input field. It's the if statement that does not work at all. Apparently, no matter what I type in, it returns true and runs the function anyways, oblivious to the conditions that need to be met for it to be true.

I have been searching for hours for a solution, and I'm really surprised I didn't find an answer as this seems to be the main function of the input statement in the first place. Any help would be appreciated, thanks!

A single = means "set value", double == means "compare values". So this is what you need to change: readInput== 'I want an ice cream sandwich' Also remove the value since you are already referring to it. — imvain2
– imvain2, Commented Nov 6, 2020 at 20:45
let readInput = document.querySelector('#commandInput').value you need to remove the .value, as you call this in the If statement below — Coupe
– Coupe, Commented Nov 6, 2020 at 20:47

chazsolo · Accepted Answer · 2020-11-06 20:53:02Z

2

Two issues:

= is for assignment not equality checking - you want to use ===.
You are storing the value of the input into readInput, so you don't need to reference value from it:

function readCommand() {
  let readInput = document.querySelector('#commandInput').value
  //           ↓ no .value, it's already here -----------↑
  if (readInput === 'I want an ice cream sandwich') {
  //             ↑ === vs =
    giveIceCreamSandwich()
  } else {
    alert(`Not a command`);
  }
}

edited Nov 6, 2020 at 20:53

answered Nov 6, 2020 at 20:47

chazsolo

8,6541 gold badge25 silver badges45 bronze badges

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

3 Comments

Fishy guy Over a year ago

I was wondering why everything looked right and wasnt working, thank you for your answer you are a lifesaver.

Dustin Angeletti Over a year ago

How do you give multiple commands to use and each one launches a different function?

chazsolo Over a year ago

@DustinAngeletti There's so many ways to architect that it'd be too long for a comment. That said, you could build a dictionary (object literal) where the keys (commands) have values (functions) that can be called if the value from the input matches a key.

Collectives™ on Stack Overflow

Javascript input run a function when specific text is typed in

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related