Question

我是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？任何帮助将不胜感激。谢谢！

Answer 1

首先，您应该在html中创建文本框，如下所示：

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

然后让人们按下按钮开始你的javascript代码。所以使用你已经拥有的按钮。然后当单击按钮时调用SelectImage6（）函数时，您只需将顶部的javascript代码（检查输入的代码）放入函数SelectImage6（）中，您将拥有一个很好的函数来完成所有操作。

Answer 2

要回答问题的具体细节，最有必要让骰子的数量在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”对于变量名称有点模糊，因此我将其更改为更具描述性的内容。我处理了用户未输入数字的情况，并将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的复杂性和网络延迟，可能会导致闪烁或其他令人不快的影响。我选择做的是首先构建字符串，然后立即设置它。

在原始函数中，您无意中使用了全局变量（隐含全局变量），因为您没有将roll2和imgName2声明为变量。我解决了这个问题，并在你的函数中加了use strict所以这个错误将在未来发现！（我的建议是始终设置use strict。）;

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

javascript的新手，如何为提交按钮分配输入值？

2 个答案: