2014-01-31 4 views
29

Я пытаюсь вызвать функцию JS, которую я добавил в заголовок. Ниже приведен код, который показывает мой проблемный сценарий. Примечание. У меня нет доступа к телу в моем приложении. Каждый раз, когда я нажимаю на элемент с id="Save", он вызывает только f1(), но не fun(). Как я могу заставить его позвонить даже моим fun()? Пожалуйста, помогите.Как вызвать функцию JS с использованием события OnClick

<!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> 
+0

'f1' не должно вызываться вообще, потому что у вас есть ошибка времени выполнения. См. Также [Почему метод jQuery или DOM, такой как 'getElementById', не находит элемент?] (Http://stackoverflow.com/q/14028959/218196). Но в любом случае 'func' не запускается, потому что вы его нигде не называете. –

ответ

0

Внутренний код имеет более высокий приоритет, чем другие. Чтобы вызвать другую функцию 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> 
+0

* «Встроенный код имеет более высокий приоритет, чем другие» * Что это значит? –

23

Вы пытаетесь прикрепить функцию слушателя событий перед загрузкой элемента. Место 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

+0

У меня нет доступа к коду в теле. Мое приложение отличается от приведенного выше кода.Anyways Теперь, даже по вашему предложению, он вызывает fun(), но не f1(). –

+0

@VineethVarma, то, пожалуйста, отправьте код, который вы использовали. –

+0

@ VineethVarma Редактирование сделано. – George

6

Вы можете использовать addEventListener добавить столько слушателей, как вы хотите.

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

добавить также script тега после элемента, чтобы убедиться, что Save элемента загружен в тот момент, когда скрипт запускается

Вместо перемещения сценария тега можно назвать его, когда дом будет загружен. После этого вы должны поместить код внутри

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

example

0

Использование OnClick атрибута или применить функцию к вашему JS OnClick свойства сотрет инициализацию OnClick в.

Что вам нужно сделать, это add нажмите события на вашей кнопке. Для этого вам понадобятся методы addEventListener и attachEvent (т.е.).

<!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> 
-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); 
} 
1

Я удалил ваши 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>