Question

我需要制作一个盒子，这样当用户输入1到6的值时，它会滚动很多骰子。我是javascript的完全初学者，非常感谢任何帮助。

这是我的功能：

function NumberValue() {
        for (i = 0; i <['randNumber']; i++){
            var numberRoll = Math.floor(Math.random() * 6) + 1;
            var userNumber = '../images/die' + numberRoll + '.gif';
            myNewTag = "<img id='dieImgRandom' src='" + userNumber + "'>"
            document.getElementById('dieDivRandom').innerHTML += myNewTag;

这是我的身体元素：

<h1>Why don't you pick please?</h1>

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

<p>

<div id="dieImageRand">

<img id="dieImgRandom" alt="die image" src="../images/die1.gif">

<br>

<input type="text" id="randNumber" size=20 value="Enter 1 through 6">

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

</div>

该功能需要允许用户提交一，二，三，四，五或六，并且需要在屏幕上显示许多图像。图像重新定位在我的图像文件夹中，因此相对链接将正常工作。这实际上是我需要使用的。谢谢。

Answer 1

替换：

for (i = 0; i <['randNumber']; i++){

使用：

for (i = 0; i <document.getElementById('randNumber').value; i++) {

可以使用以下任一方法访问<input />标记：

document.getElementById('inputId').value;
document.formName.inputName.value

最后，您的代码变为：

function NumberValue() {
    for (i = 0; i < document.getElementById('inputId').value; i++) {
        var numberRoll = Math.floor(Math.random() * 6) + 1;
        var userNumber = '../images/die' + numberRoll + '.gif';
        myNewTag = "<img id='dieImgRandom' src='" + userNumber + "'>"
        document.getElementById('dieDivRandom').innerHTML += myNewTag;
    }
}

Answer 2

使用此选项从文本框中读取值

function NumberValue() {     
var ranNum = document.getElementById('randNumber').value;

        for (i = 0; i <ranNum ; i++){

        }

}

编辑：

如果要验证输入的号码

添加此代码块

function NumberValue() {     
var ranNum = document.getElementById('randNumber').value;
        if(ranNum < 1 || ranNum > 6) {
           alert("Please enter number from 1 to 6 only");
           return false;
          }

        for (i = 0; i <ranNum ; i++){

        }

        return true;

}

从文本框中检索输入值

2 个答案: