如何编写一个文本框来通知用户他/她猜谜游戏的总尝试次数

问题描述 投票:0回答:2

我被困在代码的最后部分,我需要创建一个文本框来显示用户的尝试次数。我不明白的是如何准确地让文本框显示尝试。我已经包含了代码。

<HTML>
<HEAD>
</HEAD>
<BODY>

<FORM NAME="testform">
<BR>
<INPUT TYPE="button" NAME="button" VALUE="Click to Guess" onClick="testButton(this.form)">
<BR>
</FORM>

<SCRIPT type="text/javascript">

function testButton (form){

varguess = prompt("Guess a number betweent 1 and 20.","")
varattempts = 0


switch(true)

{

case varguess == 14:
    alert("You guessed right!")
    break;
case varguess>0 && varguess<=13:
    alert("Try again!")
    varattempts = varattempts + 1
    break;
case varguess>14 && varguess<=20:
    alert("Try again!")
    varattempts = varattempts + 1
    break;
default:
    alert("Please pick a number between 1 and 20.")


}

 }

</SCRIPT>
<INPUT TYPE="text" NAME="inputbox" VALUE="Attempts " + varattempts">
</BODY>
</HTML>
javascript variables
2个回答
0
投票

我没有完全重写你的代码,但这就是想要的效果吗:jsFiddle

我在您的输入字段中添加了一个 ID,以便更轻松地抓取它,因此 HTML 是:

<FORM NAME="testform">
<BR>
<INPUT TYPE="button" NAME="button" VALUE="Click to Guess" onClick="testButton(this.form)">
<BR>
</FORM>
<INPUT id="attempts" TYPE="text" NAME="inputbox" VALUE="Attempts " />

顺便说一句,标签通常以小写形式编码(例如,

<form>
而不是
<FORM>

JavaScript 是:

var varattempts = 0
function testButton(form) {

varguess = prompt("Guess a number betweent 1 and 20.", "")

switch (true)
    {
    case varguess == 14:
        alert("You guessed right!")
        break;
    case varguess > 0 && varguess <= 13:
        alert("Try again!")
        varattempts = varattempts + 1
        break;
    case varguess > 14 && varguess <= 20:
        alert("Try again!")
        varattempts = varattempts + 1
        break;
    default:
        alert("Please pick a number between 1 and 20.")    
    }
    document.getElementById('attempts').value = 'Attempts: '+varattempts;
}

请注意,您需要将 varattempts 变量移到函数之外,否则每次调用它时都会将其初始化为 1。


0
投票
case varguess>14 && varguess<=20:
    alert("Try again!")
    varattempts = varattempts + 1
    document.getElemensByName('inputbox')[0].value = 'Attempts ' +  varattempts;
    break;

您应该对所有尝试失败的情况执行此操作。

您的输入文本没有 id 属性,因此我们必须通过 name 属性来选择它

document.getElementsByName('inputbox')

getElementsByName 返回一个 HTML 列表(有点像数组),其中包含名称为“inputbox”的所有元素。在这种情况下,您只有一个,但无论如何您都会得到列表。

这样,您必须使用索引 0 访问输入框来引用第一项。如果你有一个数组 list=['a','b','c'] 你会通过调用 list[0] 得到 'a'。

然后你要求用 .value = 'Attempts ' + varattempts 更改它的值。

希望你现在明白了

© www.soinside.com 2019 - 2024. All rights reserved.