CODEWITHSUNDEEP
javascripthtmlinput
Jason Lau
Jason Lau

Reputation: 21

Why can't I get the input from the input box?

I have made the following code to get the input from the input box. However, it can't get the input? Why?

var p = document.getElementById("paragraph");
var input = document.getElementById("input").value;
var foodname;

function changeP() {
  alert(input);
  if (input === "abc") {
    foodname = "Hey Yo!";
  } else if (input === "def") {
    foodname = "!oY yeH";
  } else {
    foodname = "N/A";
  }
  p.innerText = foodname;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Input Detecting</title>
</head>

<body>
  <p id="paragraph">Please type in the code in the following input bar. </p>
  <input id="input">
  <button onClick="changeP()">Confirm</button>
  <script src="JavaScript.js"></script>
</body>

</html>

I expect the alert will be Hey Yo! when I type abc but it outputs nothing.

Upvotes: 0

Views: 225

Answers (6)

ozerhakan
ozerhakan

Reputation: 56

Because you can't get the input value but you can have it like this.

function changeP() {
var foodname;
  var input = document.getElementById("input").value;
    if (input === "abc") {
        foodname = "Hey Yo!";
    } else if (input === "def") {
        foodname = "!oY yeH";
    } else {
        foodname = "N/A";
    }
}

Upvotes: 1

Mamun
Mamun

Reputation: 68933

Your input has empty value on page load. When the function is called that empty value is evaluated inside the function. The latest value of input is not going inside the function. You have to take the input value inside the function:

var foodname;
function changeP() {
  var input = document.getElementById("input").value;
  .....


var p = document.getElementById("paragraph");
var foodname;
function changeP() {
    var input = document.getElementById("input").value;
    alert(input);
    if (input === "abc") {
        foodname = "Hey Yo!";
    } else if (input === "def") {
        foodname = "!oY yeH";
    } else {
        foodname = "N/A";
    }
    p.innerText = foodname;
}
<p id="paragraph">Please type in the code in the following input bar. </p>
<input id="input">
<button onClick="changeP()">Confirm</button>

Upvotes: 0

Abdul Rehman Sheikh
Abdul Rehman Sheikh

Reputation: 939

Here is your perfect code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Input Detecting</title>
    </head>

    <body>
        <p id="paragraph">Please type in the code in the following input bar. </p>
        <input id="input">
        <button onClick="changeP()">Confirm</button>
        <script>
            //This is JavaScript.js
            function changeP() {
                var p = document.getElementById("paragraph");
                var input = document.getElementById("input").value;
                var foodname;
                alert(input);
                if (input === "abc") {
                    foodname = "Hey Yo!";
                } else if (input === "def") {
                    foodname = "!oY yeH";
                } else {
                    foodname = "N/A";
                }
                p.innerText = foodname;
            }
        </script>
    </body>
</html>

Your biggest mistake is you are trying to use parameters inside the function and you have declared them outside the function. Remember, always inside the function variables are act as local variables for function and it cannot effect outside. Those parameters which you have declared outside the function cannot be accessable inside the function until or unless you pass them in function by parameters like onClick="changeP(inputselecter, anotherselector , anotherselecter)">

Upvotes: 0

JIJOMON K.A
JIJOMON K.A

Reputation: 1280

Get the value of input in inside the function

function changeP() {
var p = document.getElementById("paragraph");

var input = document.getElementById("input").value;
var foodname;
	alert(input);
	if (input === "abc") {
		foodname = "Hey Yo!";
	} else if (input === "def") {
		foodname = "!oY yeH";
	} else {
		foodname = "N/A";
	}
	p.innerText = foodname;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Input Detecting</title>
	</head>
	
	<body>
		<p id="paragraph">Please type in the code in the following input bar. </p>
		<input id="input">
		<button onClick="changeP()">Confirm</button>
		<script src="JavaScript.js"></script>
	</body>
</html>

Upvotes: 0

Quentin
Quentin

Reputation: 943207

You are reading the value when the page loads and storing it in a variable.

When the change event fires, you compare the stored value to your hard-coded strings.

Read the value of the input inside the event handler.

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4472

Because you have to get the input value, each time you run the function changeP().
Now, you are getting the value when the page loads, so the value is always null

//This is JavaScript.js

function changeP() {
    var p = document.getElementById("paragraph");
    var input = document.getElementById("input").value;
    var foodname;

    alert(input);
    if (input === "abc") {
        foodname = "Hey Yo!";
    } else if (input === "def") {
        foodname = "!oY yeH";
    } else {
        foodname = "N/A";
    }
    p.innerText = foodname;
}

Upvotes: 0

Related Questions