Question

我正在开展一个网站项目并且确实需要帮助，因为我对这一切都很陌生。我基本上给了下拉菜单中的每个选项的值，并将它们加在一起，我已经管理了。但后来我想从菜单中得到总值，然后将伪随机生成并添加到我输入的年龄。

当我点击提交时，我希望计算所有内容并在新页面上显示结果。我希望能够在javascript和html中完成所有这些。

任何帮助将不胜感激！我的编码如下。非常感谢！

        <body>
        <form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
        <select name=select1>
            <option selected="selected" value="0">Chinese Zodiac</option>
        <option value="3">Rat</option>
        <option value="3">Ox</option>
        <option value="4">Tiger</option>
        <option value="2">Rabbit</option>
        <option value="4">Dragon</option>
        <option value="5">Snake</option>
        <option value="3">Horse</option>
        <option value="3">Sheep</option>
        <option value="4">Monkey</option>
        <option value="5">Rooster</option>
        <option value="3">Dog</option>
        <option value="3">Pig</option>
        </select>
        </select>
        <br />
        <select name=select2>
            <option selected="selected" value="0">Star Sign</option>
        <option value="2">Aries</option>
        <option value="4">Taurus</option>
        <option value="3">Gemini</option>
        <option value="4">Cancer</option>
        <option value="3">Leo</option>
        <option value="2">Virgo</option>
        <option value="2">Libra</option>
        <option value="3">Scorpio</option>
        <option value="2">Sagittarius</option>
        <option value="4">Capricorn</option>
        <option value="2">Aquarius</option>
        <option value="3">Pisces</option>
        </select>
        <br />

        <select name=select3>
            <option selected="selected" value="0">Blood Type</option>
        <option value="3">O</option>
        <option value="2">A</option>
        <option value="1">B</option>
        <option value="3">AB</option>
        </select>
        <br />

        <select name=select4>
            <option selected="selected" value="0">Favourite Colour</option>
        <option value="3">Black</option>
        <option value="3">Blue</option>
        <option value="2">Brown</option>
        <option value="2">Green</option>
        <option value="3">Orange</option>
        <option value="3">Pink</option>
        <option value="2">Purple</option>
        <option value="4">Red</option>
        <option value="2">Yellow</option>
        <option value="2">White</option>
        <option value="5">Other</option>
        </select>
        <br />

        Age<input name="" type="number" value="" /> 

        <br />

        <input name="" type="submit" value="Total" />
        <span>Total: </span><span id="result"></span>
    </form>


<script type="text/javascript">
function calcTotal(oForm){
    var sum = 0;
    for(i=0; i < oSels.length; i++){
        sum += new Number(oSels[i].value);
    }
    document.getElementById('result').innerHTML = sum;
    return false;
}
window.onload=function(){
    oSels = document.getElementById('form1').getElementsByTagName('select');
    for(i=0; i < oSels.length; i++){
        oSels[i].onchange=function(){
            document.getElementById('result').innerHTML = '';
        }


    }
}
</script>

Answer 1

我玩了你的代码。如果它像你想要的那样，我现在不知道，但这是一个随机分数的例子。

现在使用年龄来生成一个值。

如果您喜欢my codepen，请查看。

我改变了年龄输入：

Age<input id="age" name="" type="number" value="" />

我还添加了一个新函数来生成min-max之间的随机数：

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

并修改了总和的计算方式：

var age = document.getElementById('age').value;
sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 4),sum+(age / 4)));
//Add some random. The more you are older, the more random it is.

你可以做很多不同的生成总和。如果您想要更少的修改，我们也可以采用年龄的最后一位数来获得最小/最大值......

修改为了帮助您在页面之间共享变量Look at this question。

Answer 2

将此作为答案添加，因为提交者认为这是一个好主意：

将所有数学结果放入隐藏字段。然后，当您提交表单时，值将被传递。

你真的不需要做任何特别的事情。只需添加如下字段：

<input type="hidden" value="[yourValue]" name="fieldName" id="fieldId" />

对于yourValue部分，只需从JavaScript中插入caclulated值：

document.getElementById("fieldId").value = calculatedValue;

因为它无论如何都是你提交的同一个表单的一部分，所以它们都会过去。您可以照常检索接收页面上的字段。

我下载并编辑了整个代码块。我改变了一些事情。 1.您不需要表单上的onsubmit。您需要在Total按钮上调用JavaScript函数。添加提交按钮以在用户完成时提交表单。 2.将保存结果的隐藏字段添加到表单中。 3.进行计算的函数还有一个附加功能，可将计算的总数发送到新的隐藏字段。 4.您需要向ACTION添加内容，以便知道在何处提交表单。您也可以删除ALERT。我刚补充说，以确保它正常工作。

我已经运行并测试了它，它的工作方式与预期完全一致。这就是编辑后的代码：

 <body>
        <form id="form1" action="" method="post">
        <select name=select1>
            <option selected="selected" value="0">Chinese Zodiac</option>
        <option value="3">Rat</option>
        <option value="3">Ox</option>
        <option value="4">Tiger</option>
        <option value="2">Rabbit</option>
        <option value="4">Dragon</option>
        <option value="5">Snake</option>
        <option value="3">Horse</option>
        <option value="3">Sheep</option>
        <option value="4">Monkey</option>
        <option value="5">Rooster</option>
        <option value="3">Dog</option>
        <option value="3">Pig</option>
        </select>
        </select>
        <br />
        <select name=select2>
            <option selected="selected" value="0">Star Sign</option>
        <option value="2">Aries</option>
        <option value="4">Taurus</option>
        <option value="3">Gemini</option>
        <option value="4">Cancer</option>
        <option value="3">Leo</option>
        <option value="2">Virgo</option>
        <option value="2">Libra</option>
        <option value="3">Scorpio</option>
        <option value="2">Sagittarius</option>
        <option value="4">Capricorn</option>
        <option value="2">Aquarius</option>
        <option value="3">Pisces</option>
        </select>
        <br />

        <select name=select3>
            <option selected="selected" value="0">Blood Type</option>
        <option value="3">O</option>
        <option value="2">A</option>
        <option value="1">B</option>
        <option value="3">AB</option>
        </select>
        <br />

        <select name=select4>
            <option selected="selected" value="0">Favourite Colour</option>
        <option value="3">Black</option>
        <option value="3">Blue</option>
        <option value="2">Brown</option>
        <option value="2">Green</option>
        <option value="3">Orange</option>
        <option value="3">Pink</option>
        <option value="2">Purple</option>
        <option value="4">Red</option>
        <option value="2">Yellow</option>
        <option value="2">White</option>
        <option value="5">Other</option>
        </select>
        <br />

        Age<input name="" type="number" value="" /> 

        <br />

        <input name="" type="button" value="Total" onclick="calcTotal();" />
        <input name="submit" type="submit" value="Submit" />
        <span>Total: </span><span id="result"></span>

        <input type="hidden" value="0" name="resultIs" id="resultIs" />
    </form>


<script type="text/javascript">
    function calcTotal(oForm) {
        var sum = 0;
        for (i = 0; i < oSels.length; i++) {
            sum += new Number(oSels[i].value);
        }
        //This is what you are using to display the result to your user.
        document.getElementById('result').innerHTML = sum;

        //This will add the value of the result to a hidden field I added to the form.  When you submit it, just request the value of "resultIs"
        document.getElementById("resultIs").value = sum;
        alert(sum);
        return false;
    }
    //I really don't even see that this is needed.  Your form doesn't need to be cleared onLoad.
    window.onload = function() {
        oSels = document.getElementById('form1').getElementsByTagName('select');
        for (i = 0; i < oSels.length; i++) {
            oSels[i].onchange = function() {
                document.getElementById('result').innerHTML = '';
            }


        }
    }
</script>

新页面中的Html / Javascript表单计算和验证

2 个答案: