Как вызвать функцию JS с помощью события OnClick

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

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

Ответ 1

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

Ответ 2

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

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

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

Вместо того, чтобы перемещать тег script, вы можете вызвать его, когда dom загружен. Затем вы должны поместить свой код внутри

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

пример

Ответ 3

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

Ответ 4

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

Что вам нужно сделать, это добавить события click на вашей кнопке. Для этого вам понадобятся методы 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>

Ответ 5

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

Ответ 6

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