JS新手：我如何修复此文本输入？ [英] New to JS: How do I fix this text input please?
本文介绍了JS新手：我如何修复此文本输入？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码应该从用户那里采取罗盘方向，在这种情况下，北方。
然后，JavaScript通过一个名为whichImage
和swap image1.jpg for image2.jpg的函数获取方向变量，但这不会因某种原因发生。 />
// JavaScript文档
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 = = 南 || x == East || x == West ）
{
document .write（ 你选择 +方向;
}
else
{
document .write （ 你不能走那个方向）;
}
}
function load（）
{
var direction = document .getElementById（' 其中'）值。
whichDirection（direction）;
whichImage（方向）;
}
< ！doctype html >
< html >
< head >
< meta charset = utf-8 >
< title > Untitled Document < / title >
< script 类型 = text / javascript src = Scarry_Adventure_Game.js > < / < span class =code-leadattribute> script >
< script 类型 = text / java脚本 > < / script >
< link rel = stylesheet href = Scarry_Adventure_Game .css type = text / css >
< / head >
< body önload = load（）; >
< img id = myimg alt = 我的图片 src = images / image1.jpg / >
< 表格 >
< 输入 名称 = 标题 type = text id = < span class =code-keyword> value = / >
< / form >
< / body >
< / html >
解决方案
Mohibur Rashid是正确的。你在Body Load上调用了这个函数，你在里面得到了TextBox的值。但是第一次加载时，TextBox是空白的。
所以，要么你可以实现一个按钮或处理更改事件TextBox来执行此操作。
演示
[问题] TextBox上的图像更改更改 [ ^ ]
键入North并按Tab键查看图像的变化情况。
还有一件事。你在函数whichDirection（x）中做了一个错误。您将获得参数x，但显示变量direction，这是未定义的。
因此，下面的代码是错误的......
文档。 write（ 你选择 +direction）;
它应该是......
document 。 write（ 你选择 + x）;
嗨
这是你的新剧本。
< pre lang =cs> ;< script type =text / javascript>
function load（）{
var direction = document.getElementById（which）。value;
whichDirection（direction）;
whichImage（方向）;
}
function whichImage（b）{
var image = document.getElementById（myImage）;
if（b ==North）{
image.src =Images / 2.jpg;
}
else {
image.src =Images / 1.jpg;
}
}
函数whichDirection（x）{
alert（在哪个方向+ x）;
if（x ==North|| x ==South|| x ==East|| x ==West）{
alert（你选择去） + x）;
}
else {
alert（你不能朝这个方向前进）;
}
}
< / script>< / pre>
您的HTML代码
< div>
< img id =myImagesrc =Images / 1.jpg/>
< input name =headingtype =textid =whichvalue =/>
< input type =buttonvalue =Lets Flyid =btnDirectiononclick =load（）; />
< / div>
只需更改ID和图片名称。为方便起见，我换了它们。
祝你好运
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 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);
}
<!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> 解决方案
Mohibur Rashid is correct. You called the function on Body Load and you are getting theTextBoxvalue inside that. But theTextBoxis blank when it is loaded for the first time.
So, either you can implement a Button or handle theChangeevent ofTextBoxto 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 functionwhichDirection(x). You are getting the parameterx, but showing the variabledirection, which is undefined.
So, below code is wrong...
document.write("You choose to go " +direction);
It should be...
document.write("You choose to go " + x);
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
这篇关于JS新手：我如何修复此文本输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
