Comment appeler une fonction JS à l'aide de l'événement OnClick
J'essaie d'appeler ma fonction JS que j'ai ajoutée dans l'en-tête.
Veuillez trouver ci-dessous le code qui montre mon scénario de problème.
Remarque: Je n'ai pas accès au corps dans ma demande.
Chaque fois que je clique sur l'élément avec id="Save", il appelle uniquement f1() mais pas fun(). Comment puis-je le faire appeler même mon fun()?
S'il vous plaît aider.
<!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>
6 answers
Vous essayez d'attacher une fonction d'écoute d'événement avant le chargement de l'élément. Placez fun() dans une fonction d'écoute d'événement onload. Appelez f1() dans cette fonction, car l'attribut onclick sera ignoré.
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
Vous pouvez utiliser addEventListener pour ajouter autant d'écouteurs que vous le souhaitez.
document.getElementById("Save").addEventListener('click',function ()
{
alert("hello");
//validation code to see State field is mandatory.
} );
Ajoutez également la balise script après l'élément pour vous assurer que l'élément Save est chargé au moment où le script s'exécute
Plutôt que de déplacer la balise de script, vous pouvez l'appeler lorsque dom est chargé. Ensuite, vous devez placer votre code dans le
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("Save").addEventListener('click',function ()
{
alert("hello");
//validation code to see State field is mandatory.
} );
});
J'ai supprimé votre document.getElementById("Save").onclick = avant vos fonctions, car c'est un événement déjà appelé sur votre bouton. J'ai également dû appeler les deux fonctions séparément par l'événement 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>
L'utilisation de l'attribut onclick ou l'application d'une fonction à vos propriétés JS onclick effacera votre initialisation onclick .
Ce que vous devez faire est ajouter cliquez sur événements sur votre bouton. Pour ce faire, vous aurez besoin des méthodes addEventListener et 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>
Le code en ligne a une priorité plus élevée que les autres. Pour appeler votre autre fonction func (), appelez-la depuis f1 ().
Dans votre fonction, ajoutez une ligne,
function fun () {
// Your code here
}
function f1()
{
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
fun ();
}
Réécrire tout votre code,
<!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>
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);
}