javascript新手，如何将输入值分配给提交按钮？答案

【问题标题】：New to javascript, how to assign an input value to a submit button?javascript新手，如何将输入值分配给提交按钮？
【发布时间】：2013-11-12 18:02:03
【问题描述】：

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

【问题讨论】：

标签： javascript function input

【解决方案1】：

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

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

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

【讨论】：

【解决方案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 的世界。

【讨论】：