Fatal编程技术网
  • javascript/
  • Javascript 重置2个不同的表单

Javascript 重置2个不同的表单

javascript html

Javascript 重置2个不同的表单,javascript,html,Javascript,Html,我试图用一个名为resetFunctions（）的函数从1按钮重置2个函数，但什么也没发生。另外两个重置正在工作，因为我需要它们只在功能上重置。我一直看到每个功能都会重置，所以我不确定是否会发生这种情况 <!DOCTYPE html> <html> <head> <script type="text/javascript"> function result() { document.getElementById

我试图用一个名为resetFunctions（）的函数从1按钮重置2个函数，但什么也没发生。另外两个重置正在工作，因为我需要它们只在功能上重置。我一直看到每个功能都会重置，所以我不确定是否会发生这种情况

<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function result() {
   document.getElementById('ansCAL').value = calculate() + calculate1();
}
function populate(select1, select2)
{
    var Brand1 = document.getElementById(select1);
    var Brand2 = document.getElementById(select2);
    Brand2.innerHTML = "";
    if(Brand1.value == "Chevy")
    {
        var optionArray = ["|","1000|Camaro","2000|Corvette","3000|Impala"];//The | means a blank space, camaro is the label, Camaro is the value, ex. value 1000 and corvette is the label
    }
    else if(Brand1.value == "Dodge")
    {
        var optionArray = ["|","4000|Avanger","5000|Challengere","6000|Charger"];
    }
    else if(Brand1.value == "Ford")
    {
        var optionArray = ["|","7000|Mustang","8000|Shelby","focus|Focus"];
    }
    for(var option in optionArray)//the options within the optionArray
    {
        var pair = optionArray[option].split("|");//in tha variable pair is stored both value and label
        var newOption = document.createElement("option");// option in the bracket is used to create new options or you can insert divs paragraph etc
        newOption.value = pair[0];//pair 0 gives the value
        newOption.innerHTML = pair[1];//pair 1 gives the label
        Brand2.options.add(newOption);
    }
}
//second function
function calculate() {
    var Brand1 = 0;
    var Brand2 = 0;
    Brand1 = document.getElementById('slct1').value;
    Brand2 = document.getElementById('slct2').value;
    multi=document.getElementById('amount').value;
    total=parseInt((Brand2)*multi/100);
    document.getElementById('answer').value=total;
    /*document.getElementById("ansCAL").innerHTML = "<br>Total amount " + (total + total1);*/
}
//second Main function
function populate1(Select1a, Select2a)
    {
        var Brand1a = document.getElementById(Select1a);
        var Brand2a = document.getElementById(Select2a);
        Brand2a.innerHTML = "";
        if(Brand1a.value == "Chevy")
    {
        var optionArray = ["|","1000|Camaro","2000|Corvette","3000|Impala"];//The | means a blank space, camaro is the label, Camaro is the value, ex. value 1000 and corvette is the label
    }
    else if(Brand1a.value == "Dodge")
    {
        var optionArray = ["|","4000|Avanger","5000|Challengere","6000|Charger"];
    }
    else if(Brand1a.value == "Ford")
    {
        var optionArray = ["|","7000|Mustang","8000|Shelby","focus|Focus"];
    }
        for(var option in optionArray)//the options within the optionArray
        {
            var pair = optionArray[option].split("|");//in tha variable pair is stored both value and label
            var newOption = document.createElement("option");// option in the bracket is used to create new options or you can insert divs paragraph etc
            newOption.value = pair[0];//pair 0 gives the value
            newOption.innerHTML = pair[1];//pair 1 gives the label
            Brand2a.options.add(newOption);
        }
    }
//second function
function calculate1() {
    var Brand1a = 0;
    var Brand2a = 0;
    Brand1a = document.getElementById('slct1a').value;
    Brand2a = document.getElementById('slct2a').value;
    multi=document.getElementById('amount1').value;/*to change accordingly amount1*/
    total1=parseInt(((Brand2a)*multi)/100);
    document.getElementById('answer1').value=total1;/*to change accordingly amount1*/
    document.getElementById("ansCAL").innerHTML = "<br>Total amount " + (total + total1);
}
function resetFunctions() {
    document.getElementById("slct2a").reset();
    document.getElementById("slct2a").reset();
}
    </script>
    </head>
    <body>
    <form>
    Choose Your Car:
    <select id="slct1" name="slct1" onchange="populate('slct1','slct2')">
        <option value=""></option>
        <option value="Chevy">Chevy</option>
        <option value="Dodge">Dodge</option>
        <option value="Ford">Ford</option>
    </select>

    Choose Type of Car:
    <select id="slct2" name="slct2">

    </select>
    <label>&nbsp;Amount&nbsp;<input type="number" name="amount" id="amount" size="1" onkeyup="result()"/>   (g)&nbsp;</label>
    <label>&nbsp;Total&nbsp;<input type="number" name="answer" id="answer" size="1"/></label>   
    <input type="reset" name="Reset" value="Reset"/>
    <br><br><br>
    <hr>
    <br>
    </form>
    <!--Starts 2 selection-->
    <form>
        Choose Your Car:
    <select id="slct1a" name="slct1a" onchange="populate1('slct1a','slct2a')"><!--changed accordingly increased a after slct1a-->
        <option value=""></option>
        <option value="Chevy">Chevy</option>
        <option value="Dodge">Dodge</option>
        <option value="Ford">Ford</option>
    </select>

    Choose Type of Car:
    <select id="slct2a" name="slct2a">

    </select>
    <label>&nbsp;Amount&nbsp;<input type="number" name="amount1" id="amount1" size="1" onkeyup="result()"/>     (g)&nbsp;</label>       <!--changed accordingly increased 1 after calculate-->
    <label>&nbsp;Total&nbsp;<input type="number" name="answer1" id="answer1" size="1"/></label>   
    <input type="reset" name="Reset" value="Reset"/>
    <br><br><br>
    <p id="ansCAL"></p>
    </form>
    <input type="button" onclick="resetFunctions()" value="Reset">
    </body>
    </html>


函数结果（）{
document.getElementById（'ansCAL'）。value=calculate（）+calculate1（）；
}
函数填充（选择1，选择2）
{
var Brand1=document.getElementById（选择1）；
var Brand2=document.getElementById（选择2）；
Brand2.innerHTML=“”；
如果（品牌1.value==“雪佛兰”）
{
var optionArray=[“|”、“1000 | Camaro”、“2000 | Corvette”、“3000 | Impala”]；//表示空白，Camaro是标签，Camaro是值，例如值1000，Corvette是标签
}
else if（Brand1.value==“道奇”）
{
var optionArray=[“|”、“4000 | Avanger”、“5000 | Challengere”、“6000 | Charger”]；
}
否则如果（Brand1.value==“Ford”）
{
var optionArray=[“|”、“7000辆野马”、“8000辆谢尔比”、“聚焦”]；
}
for（optionArray中的var选项）//optionArray中的选项
{
var pair=optionArray[option].split（“|”）；//在变量对中存储值和标签
var newOption=document.createElement（“option”）；//括号中的选项用于创建新选项，也可以插入divs段落等
newOption.value=对[0]；//对0给出值
newOption.innerHTML=对[1]；//对1给出标签
Brand2.options.add（newOption）；
}
}
//第二功能
函数计算（）{
var Brand1=0；
var Brand2=0；
Brand1=document.getElementById（'slct1'）。值；
Brand2=document.getElementById（'slct2'）。值；
multi=document.getElementById（'amount'）。值；
总计=parseInt（（品牌2）*多个/100）；
document.getElementById（'answer'）。value=total；
/*document.getElementById（“ansCAL”）.innerHTML=“
总额”+（总额+总额1）*/
}
//第二个主要功能
功能填充1（选择1A，选择2A）
{
var Brand1a=document.getElementById（选择1a）；
var Brand2a=document.getElementById（选择2a）；
Brand2a.innerHTML=“”；
如果（Brand1a.value==“雪佛兰”）
{
var optionArray=[“|”、“1000 | Camaro”、“2000 | Corvette”、“3000 | Impala”]；//表示空白，Camaro是标签，Camaro是值，例如值1000，Corvette是标签
}
否则如果（Brand1a.value==“道奇”）
{
var optionArray=[“|”、“4000 | Avanger”、“5000 | Challengere”、“6000 | Charger”]；
}
否则如果（Brand1a.value==“福特”）
{
var optionArray=[“|”、“7000辆野马”、“8000辆谢尔比”、“聚焦”]；
}
for（optionArray中的var选项）//optionArray中的选项
{
var pair=optionArray[option].split（“|”）；//在变量对中存储值和标签
var newOption=document.createElement（“option”）；//括号中的选项用于创建新选项，也可以插入divs段落等
newOption.value=对[0]；//对0给出值
newOption.innerHTML=对[1]；//对1给出标签
Brand2a.options.add（新选项）；
}
}
//第二功能
函数calculate1（）{
var Brand1a=0；
var Brand2a=0；
Brand1a=document.getElementById（'slct1a'）。值；
Brand2a=document.getElementById（'slct2a'）。值；
multi=document.getElementById（'amount1'）.value；/*以相应地更改amount1*/
total1=parseInt（（（Brand2a）*multi）/100）；
document.getElementById（'answer1'）。value=total1；/*以相应地更改amount1*/
document.getElementById（“ansCAL”）.innerHTML=“
总额”+（总额+总额1）；
}
函数resetFunctions（）{
document.getElementById（“slct2a”）.reset（）；
document.getElementById（“slct2a”）.reset（）；
}
选择您的汽车：
雪佛兰
闪避
河流浅水处
选择车辆类型：
金额（克）
全部的








选择您的汽车：
雪佛兰
闪避
河流浅水处
选择车辆类型：
金额（克）
全部的
我给你做了一些小改动，检查一下这把小提琴：

我帮你修好了，现在一切都好了。 下次你应该自己尝试一下，不要让别人帮你做事

这就是您的解决方案所需的全部内容：

function resetFunctions() {
    Array.prototype.forEach.call(document.forms,function(el,idx,array){
        el.reset();
    });
    result();
}
您的两次重置都是重置相同的内容。每次重置都是重置其函数，但我希望（）重置两个函数。为了澄清，您的
resetFunctions
具有
document.getElementById（“slct2a”）.reset（）document.getElementById（“slct1a”）.reset（）时，在第一行的code>很棒，很好。单击仅重置一个功能的每个功能的单个重置按钮不会更新（
）。我的意思是，如果这两个函数的总数为100（50个），并且单击了一个重置按钮，则不会更新数量。它仍然是100。它不起作用，但如果你只使用我的函数并将其放入代码中，一切都会起作用。你的函数工作正常，但你给我的函数和其他单个重置按钮不会重置（
）。金额保持不变且未更新，因为P标记不是表单的一部分，请将P标记更改为只读的输入文本，它也将重置。我将P更改为输入文本，但它不起作用。我明白了。如何从您的功能手动重置它？