在JavaScript中将3个函数组合成一个 [英] Combine 3 functions into one in javascript

问题描述

我试图将这三个功能合并为一个，但是在我完成之后，它不能工作。
你能帮我把这些结合起来吗？

  function showForm（id，name）{
 document.getElementById（'submitForm'）。style.display =block; 
 if（id == 0）{
 document.getElementById（'submitForm'）。style.display =none; 
} else {
 document.getElementById（i）.style.display ='block'; 
 
 
 
函数TestForm（id，name）{
 document.getElementById（'TestFormSubmit'）。style.display =block; 
 if（id == 0）{
 document.getElementById（'TestFormSubmit'）。style.display =none; 
} else {
 document.getElementById（i）.style.display ='block'; 
 
 
 
函数FormOne（id，name）{
 document.getElementById（'FormOneSubmit'）。style.display =block; 
 if（id == 0）{
 document.getElementById（'FormOneSubmit'）。style.display =none; 
} else {
 document.getElementById（i）.style.display ='block'; 
 
 
 
 
 
 
 
如果需要，这是HTML，我使用JSFiddle ，运行后，选择右侧的表格，然后显示下载表单，但我不知道该怎么做。
 < form name =formsclass =form1id =first> 
< br /> 
< p style =text-align：left; class =form1>选择做出区别< / p> 
 < option value =0>< / option> 
< option value =＃>更改表格< / option> 
< option value =＃>奖学金和拨款< / option> 
< / select> 
< br /> 
< br /> 
< div id =submitFormstyle =display：none; position：absolute; margin-top：-20px;> 
< input type =buttonid =submitvalue =下载表单onclick =window.open（forms.budget.value，'newtab'+ forms.budget.value）/> 
< / div> 
< br /> 
< / form> 
< form name =formsclass =form1id =second> 
< br /> 
< p style =text-align：left; class =form1>选择做出区别< / p> 
 < option value =0>< / option> 
< option value =＃>更改表格< / option> 
< option value =＃>奖学金和拨款< / option> 
< / select> 
< br /> 
< br /> 
< div id =TestFormSubmitstyle =display：none; position：absolute; margin-top：-20px;> 
< input type =buttonid =submitvalue =下载表单onclick =window.open（forms.budget.value，'newtab'+ forms.budget.value）/> 
< / div> 
< br /> 
< / form> 
 
< form name =formsclass =form1id =second> 
< br /> 
< p style =text-align：left; class =form1>选择做出区别< / p> 
 < option value =0>< / option> 
< option value =＃>更改表格< / option> 
< option value =＃>奖学金和拨款< / option> 
< / select> 
< br /> 
< br /> 
< div id =FormOneSubmitstyle =display：none; position：absolute; margin-top：-20px;> 
< input type =buttonid =submitvalue =下载表单onclick =window.open（forms.budget.value，'newtab'+ forms.budget.value）/> 
< / div> 
< br /> 
< / form> 
  
 
 
解决方案
您可以试试这个吗？
  var functionCollections = {
 showForm：function（id，name）{
 document.getElementById（'submitForm'）。style .display =block; 
 if（id == 0）{
 document.getElementById（'submitForm'）。style.display =none; 
} else {
 document.getElementById（i）.style.display ='block'; 
 
 
 TestForm：function（id，name）{
 document.getElementById（'TestFormSubmit'）。style.display =block; 
 if（id == 0）{
 document.getElementById（'TestFormSubmit'）。style.display =none; 
} else {
 document.getElementById（i）.style.display ='block'; 
 
 
 FormOne：function（id，name）{
 document.getElementById（'FormOneSubmit'）。style.display =block; 
 if（id == 0）{
 document.getElementById（'FormOneSubmit'）。style.display =none; 
} else {
 document.getElementById（i）.style.display ='block'; 
} 
} 
  
};  $ b 
，而在html上使用 showForm（id，name）; 使用 functionCollections.showForm（id，name） code> 
 
I tried to combine these 3 functions into one, but after I did that, it won`t work.
can you help me combine those?
function showForm(id, name) {
    document.getElementById('submitForm').style.display = "block";
    if (id == 0) {
        document.getElementById('submitForm').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
}

function TestForm(id, name) {
    document.getElementById('TestFormSubmit').style.display = "block";
    if (id == 0) {
        document.getElementById('TestFormSubmit').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
}

function FormOne(id, name) {
    document.getElementById('FormOneSubmit').style.display = "block";
    if (id == 0) {
        document.getElementById('FormOneSubmit').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
}
If it needed, this is HTML, I use JSFiddle, after run it, choose form on right side, then it will shows "download form" but I don`t know how to do that.
<form name="forms" class="form1" id="first">
    <br />
    <p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
    <select id="dropdownMenu" name="budget" onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
        <option value="0"></option>
        <option value="#">Change Form</option>
        <option value="#">Scholarships and Grants</option>
    </select>
    <br />
    <br />
    <div id="submitForm" style="display: none; position:absolute; margin-top:-20px;">
        <input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
    </div>
    <br />
</form>
<form name="forms" class="form1" id="second">
    <br />
    <p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
    <select id="TestFormDropdown" name="budget" onchange="javascript: TestForm(document.getElementById('TestFormDropdown').value);">
        <option value="0"></option>
        <option value="#">Change Form</option>
        <option value="#">Scholarships and Grants</option>
    </select>
    <br />
    <br />
    <div id="TestFormSubmit" style="display: none; position:absolute; margin-top:-20px;">
        <input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
    </div>
    <br />
</form>

<form name="forms" class="form1" id="second">
    <br />
    <p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
    <select id="FormOneDropdown" name="budget" onchange="javascript: FormOne(document.getElementById('FormOneDropdown').value);">
        <option value="0"></option>
        <option value="#">Change Form</option>
        <option value="#">Scholarships and Grants</option>
    </select>
    <br />
    <br />
    <div id="FormOneSubmit" style="display: none; position:absolute; margin-top:-20px;">
        <input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
    </div>
    <br />
</form>

解决方案
Could you try this one?
var functionCollections = {
showForm : function(id, name) {
    document.getElementById('submitForm').style.display = "block";
    if (id == 0) {
        document.getElementById('submitForm').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
},
TestForm : function(id, name) {
document.getElementById('TestFormSubmit').style.display = "block";
    if (id == 0) {
        document.getElementById('TestFormSubmit').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
},
FormOne : function(id, name) {
    document.getElementById('FormOneSubmit').style.display = "block";
    if (id == 0) {
        document.getElementById('FormOneSubmit').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
}
};

and on the html instead using showForm(id, name); use functionCollections.showForm(id, name);

                        
这篇关于在JavaScript中将3个函数组合成一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.