0

我是 javascript 新手，需要有关我的一段代码的帮助。我想创建一个用户可以输入数字的文本框，然后该函数将掷出那么多骰子。我还需要设置限制，因此用户不能输入 -10 或 100，因为它只有 1-6。所以它看起来像这样：

var theInput = document.getElementById('num').value;
theInput = parseInt(theInput);
if (theInput < 1) { 
theInput="1"; 
} 
else if (theInput > 6) { 
theInput = "6"; 
}

我坚持的部分是我想如何将文本框链接到这段代码，然后该代码将通过我的掷骰子函数运行。

<script type="text/javascript">
       function SelectImage6() {
        document.getElementById('outputDiv').innerHTML ='';
        for(i=0; i<6; i++){
            roll2 = Math.floor(Math.random() * 6) + 1;
            imgName2 = '../images/die' + roll2 + '.gif';
            document.getElementById('outputDiv').innerHTML += 
            '<img alt="die image" src="' + imgName2+'" />';
            }


        }
</script>

<body>


<div style="text-align:center">


<input type="button" value="Click to Roll" onclick="SelectImage6();">

        <p id="outputDiv">
            <img id="dieImg2" alt="die image"
            src="../images/die2.gif" >


        </p>

    </div>

我在哪里分配 var theInput 在我的代码中？任何帮助将不胜感激。谢谢！

4

2 回答 2

0

那么首先你应该像这样在 html 中创建文本框：

<input type="text" id="num">

然后让人们按下一个按钮来启动您的 JavaScript 代码。因此，请使用您已有的按钮。然后，当单击按钮时调用 SelectImage6() 函数时，您只需将顶部的 JavaScript 代码（检查输入的代码）放入函数 SelectImage6() 中，您将拥有一个很好的函数来完成这一切。

于 2013-11-12T18:08:05.587 回答
0

要回答您的问题的具体细节，最有意义的是获得在SelectImage6函数内滚动的骰子数。为了使事情变得干净整洁，您可能需要封装该功能：

// returns the number of dice the user entered.  if the user entered a non-numeric
// value, this function will throw an exception.  if the user entered less than
// one, the value will be clamped to 1, and if the user entered more than six, the
// value will be clamped to 6.
function getNumDice() {
    'use strict';
    var numEntered = parseInt( document.getElementById('num').value );
    if( isNaN( numEntered ) ) throw 'The number of dice must be numeric.';
    if( numEntered < 1 ) numEntered = 1;
    if( numEntered > 6 ) numEntered = 6;
    return numEntered;
}

我稍微清理了你的功能。“ theInput”对于变量名来说有点含糊，所以我把它改成了更具描述性的东西。我处理了用户不输入数字的情况，并将 and 合并document.getElementById为parseInt一行。此外，您在原始代码中混合了类型。您使用parseInt（返回数字类型），但随后您将设置theInput为字符串。由于 JavaScript 灵活的类型强制，这可能不会导致错误，但无论如何这都是不好的做法。

现在您有了该功能，您可以相应地修改您的SelectImage6：

function SelectImage6() {
    'use strict';
    var div = document.getElementById('outputDiv'); // cached for efficiency
    var html = '';
    var roll2, imgName2;
    var numDice = getNumDice(); 
    for( i=0; i<numDice; i++ ){
        roll2 = Math.floor(Math.random() * 6) + 1;
        imgName2 = '../images/die' + roll2 + '.gif';
        html += '<img alt="die image" src="' + imgName2+'" alt="die" />';
    }
    div.innerHtml = html;
}

对于SelectImage6，我做了一些更改（除了使用返回的值getNumDice）。首先，您反复调用getElementById（一次，不必要地，在函数的顶部，然后每掷一次骰子一次！）。任何 DOM 访问都是昂贵的，如果您可以避免多次访问，那么您应该这样做。其次，您会反复修改innerHtml属性，这取决于 HTML 的复杂性和网络延迟，可能会导致闪烁或其他令人不快的效果。我选择做的是先建立字符串，然后一次设置。

在您的原始函数中，您无意中使用了全局变量（隐含的全局变量），因为您没有将roll2and声明imgName2为变量。我修复了这个问题，并将其添加use strict到您的功能中，以便将来会发现这个错误！（我的建议是始终设置use strict。）；

我希望这有帮助！欢迎来到 JavaScript 的世界。

于 2013-11-12T18:20:26.053 回答