如何使用OnClick事件調用JS函數

我想調用我在標題中添加的JS函數。請在下面的代碼中找到我的問題場景。注意：我沒有訪問我的應用程序中的正文。每次我點擊id="Save"的元素，它只會調用f1()而不是fun()。我怎麼能打電話給我，即使我的fun()？請幫忙。如何使用OnClick事件調用JS函數

<!DOCTYPE html> 
    <html> 
    <head> 

    <script> 

    document.getElementById("Save").onclick = function fun() 
    { 
    alert("hello"); 
    //validation code to see State field is mandatory. 
    } 

    function f1() 
    { 
     alert("f1 called"); 
     //form validation that recalls the page showing with supplied inputs.  
    } 

    </script> 
    </head> 
    <body> 
    <form name="form1" id="form1" method="post"> 
      State: 
      <select id="state ID"> 
       <option></option> 
       <option value="ap">ap</option> 
       <option value="bp">bp</option> 
      </select> 
    </form> 

    <table><tr><td id="Save" onclick="f1()">click</td></tr></table> 

    </body> 
    </html>

來源

2014-01-31 Vineeth Varma

根本不應該調用'f1'，因爲您有運行時錯誤。另請參見[爲什麼jQuery或諸如'getElementById'的DOM方法未找到該元素？]（http://stackoverflow.com/q/14028959/218196）。但無論如何，'func'不會運行，因爲你不會在任何地方調用它。 –

內嵌代碼比其他代碼具有更高的優先級。調用你的其他函數func（）從f1（）調用它。

裏面的功能，添加一行，

function fun() { 
// Your code here 
} 

function f1() 
    { 
     alert("f1 called"); 
     //form validation that recalls the page showing with supplied inputs.  

fun(); 

    }

重寫你的整個代碼，

<!DOCTYPE html> 
    <html> 
     <head> 

     <script> 

     function fun() 
     { 
     alert("hello"); 
     //validation code to see State field is mandatory. 
     } 

     function f1() 
     { 
      alert("f1 called"); 
      //form validation that recalls the page showing with supplied inputs. 
      fun(); 
     } 

     </script> 
     </head> 
     <body> 
     <form name="form1" id="form1" method="post"> 

     State: <select id="state ID"> 
        <option></option> 
        <option value="ap">ap</option> 
        <option value="bp">bp</option> 
       </select> 
     </form> 
     <table><tr><td id="Save" onclick="f1()">click</td></tr></table> 

     </body> 
</html>

來源

2014-01-31 10:31:00

*「內聯代碼優先於其他代碼」*這是什麼意思？ –

您試圖加載元素之前附加一個事件監聽功能。將fun()放置在onload事件偵聽器函數中。在此函數中調用f1()，因爲onclick屬性將被忽略。

function f1() { 
    alert("f1 called"); 
    //form validation that recalls the page showing with supplied inputs.  
} 
window.onload = function() { 
    document.getElementById("Save").onclick = function fun() { 
     alert("hello"); 
     f1(); 
     //validation code to see State field is mandatory. 
    } 
}

JSFiddle

來源

2014-01-31 10:31:16 George

我無法訪問正文中的代碼。我的應用程序與上面的代碼不同。反正現在，即使按照你的建議，它只會調用fun（）而不是f1（）。 –

@VineethVarma然後請張貼您使用過的代碼。 –

@VineethVarma編輯。 – George

你可以使用的addEventListener只要你想添加儘可能多的聽衆。

document.getElementById("Save").addEventListener('click',function() 
    { 
    alert("hello"); 
    //validation code to see State field is mandatory. 
    } );

元素後還添加script標籤，以確保Save元素時加載腳本運行

當而不是移動腳本標籤加載DOM時，你可以調用它。然後，你應該把你的代碼

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById("Save").addEventListener('click',function() 
    { 
    alert("hello"); 
    //validation code to see State field is mandatory. 
    } ); 
});

example

來源

2014-01-31 10:38:58 jonasnas

內使用onclick屬性或應用功能，以您的JS的onclick屬性將刪除你的onclick初始化英寸

你需要做的是add點擊按鈕上的事件。爲此，您需要addEventListener和attachEvent（ie）方法。

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
     function addEvent(obj, event, func) { 
      if (obj.addEventListener) { 
       obj.addEventListener(event, func, false); 
       return true; 
      } else if (obj.attachEvent) { 
       obj.attachEvent('on' + event, func); 
      } else { 
       var f = obj['on' + event]; 
       obj['on' + event] = typeof f === 'function' ? function() { 
        f(); 
        func(); 
       } : func 
      } 
     } 

     function f1() 
     { 
      alert("f1 called"); 
      //form validation that recalls the page showing with supplied inputs.  
     } 
    </script> 
</head> 
<body> 
    <form name="form1" id="form1" method="post"> 
     State: <select id="state ID"> 
     <option></option> 
     <option value="ap">ap</option> 
     <option value="bp">bp</option> 
     </select> 
    </form> 

    <table><tr><td id="Save" onclick="f1()">click</td></tr></table> 

    <script> 
     addEvent(document.getElementById('Save'), 'click', function() { 
      alert('hello'); 
     }); 
    </script> 
</body> 
</html>

來源

2014-01-31 10:40:46 eltyweb

-4

function validate() { 

    if(document.myForm.phonenumber.value == "") { 
     alert("Please provide your phonenumber!"); 
     phonenumber.focus; 
     return false; 
    } 
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.email.value)) { 
     return (true) 
    } 
    alert("You have entered an invalid email address!"); 
    return (false); 
}

來源

2015-09-14 11:20:19 harsh

我之前你document.getElementById("Save").onclick =的功能去掉，因爲它已經被稱爲你的按鈕的事件。我還必須通過onclick事件分別調用這兩個函數。

 <!DOCTYPE html> 
     <html> 
     <head> 
     <script> 
     function fun() 
     { 
     alert("hello"); 
     //validation code to see State field is mandatory. 
     } 
     function f1() 
     { 
      alert("f1 called"); 
      //form validation that recalls the page showing with supplied inputs.  
     } 
     </script> 
     </head> 
     <body> 
     <form name="form1" id="form1" method="post"> 
       State: 
       <select id="state ID"> 
        <option></option> 
        <option value="ap">ap</option> 
        <option value="bp">bp</option> 
       </select> 
     </form> 

     <table><tr><td id="Save" onclick="f1(); fun();">click</td></tr></table> 

    </body> 
    </html>

來源

2017-07-16 16:20:27 JORDANO

如何使用OnClick事件調用JS函數

回答

相關問題