New to JS: How do I fix this text input please?

Question

0.00/5 (No votes)

See more:

Hi,

My code is supposed take a compass direction from the user, in this case, North.

Then, JavaScript is suposed to take the direction variable through a function called whichImage
and swap image1.jpg for image2.jpg, but this doesn't happen for some reason.

JavaScript

// JavaScript Document

		var img = new Image();
		img.src = "images/image1.jpg";

	

function whichImage(b)
{
	var image = document.getElementById("myimg");
	
	if (b == "North")
	{
		image.src = "images/image2.jpg";
	}
	else
	{
		image.src = "images/image1.jpg";
	}
}

function whichDirection (x) 
{
	if (x == "North" || x == "South" || x == "East" || x == "West" ) 
	{
		document.write("You choose to go " + direction);
	}
	else
	{
		document.write("You can't go in that direction");
	}
}
	
function load()
{
	var direction = document.getElementById('which').value;
	
	whichDirection(direction);
	whichImage(direction);

	
}

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="Scarry_Adventure_Game.js"></script>
<script  type="text/javascript" ></script>
<link rel="stylesheet" href="Scarry_Adventure_Game.css" type="text/css">

</head>

<body  önload="load();">
	
		<img id="myimg" alt="My Image" src="images/image1.jpg" />
		<form>
        	<input name="heading" type="text" id="which" value="" />	
        </form>

</body>
</html>

Posted 29-May-14 12:43pm

Member 10853224

Updated 29-May-14 13:49pm

v2

Add a Solution

Comments

Mohibur Rashid 29-May-14 21:03pm

because onload you read value of "which" input field and then `whichDirection` function failed in condition and output `document.write("You can't go in that direction");`. You wont get anything better than this. you can do one of two suggestions or anything else that is in your mind:
1. call load function onblur of `which` input field.
2. add a button call the load function onclick

[no name] 30-May-14 2:53am

Hi Monhibur, I have tried your suggestions, but still, by code fails to work.

Ajith K Gatty 30-May-14 2:58am

what error u get?? tell about it so than we will understand the real problem.

Ajith K Gatty 30-May-14 3:18am

Hi,

See your function whichDirection (x) {}. in that replace direction by x. You have your correct output. and correct that </form>. It is missing <form>.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-05-29T20:54:00

Mohibur Rashid is correct. You called the function on Body Load and you are getting the TextBox value inside that. But the TextBox is blank when it is loaded for the first time.

So, either you can implement a Button or handle the Change event of TextBox to do this.

Demo

[Issue] Image change on TextBox Change[^]

Type "North" and press tab to see how image is changing.

One more thing. You have done one mistake in the function whichDirection(x). You are getting the parameter x, but showing the variable direction, which is undefined.

So, below code is wrong...

JavaScript

document.write("You choose to go " + direction);

It should be...

JavaScript

document.write("You choose to go " + x);

Ajith K Gatty · Accepted Answer · 2014-05-29T21:24:00

Hi
this is your new script.

<pre lang="cs"><script type="text/javascript">
       function load() {
           var direction = document.getElementById("which").value;
           whichDirection(direction);
           whichImage(direction);
       }

       function whichImage(b) {
           var image = document.getElementById("myImage");
           if (b == "North") {
               image.src= "Images/2.jpg";
           }
           else {
               image.src = "Images/1.jpg";
           }
       }

       function whichDirection(x) {
           alert("in which direction "+ x);
           if (x == "North" || x == "South" || x == "East" || x == "West") {
              alert("You choose to go " + x);
           }
           else {
              alert("You can't go in that direction");
           }
       }
   </script></pre>

Your HTML codes

 <div>
<img id="myImage" src="Images/1.jpg" />
<input name="heading" type="text" id="which" value="" />
<input type="button" value="Lets Fly" id="btnDirection" onclick="load();" />
</div>

just change ID's and image names. I changed them for my convenience.
good luck

New to JS: How do I fix this text input please?

2 solutions

Solution 1

Demo

Solution 2

Add your solution here

Preview 0