Pregunta Cómo llamar a una función JS utilizando el evento OnClick


Intento llamar a mi función JS que agregué en el encabezado. Por favor, encuentre el código a continuación que muestra mi problema. Nota: no tengo acceso al cuerpo en mi aplicación. Cada vez que hago clic en el elemento con id="Save" solo llama f1() pero no fun(). ¿Cómo puedo hacer que llame incluso a mi fun()? Por favor ayuda.

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

32
2018-01-31 10:27


origen


Respuestas:


Está intentando adjuntar una función de escucha de eventos antes de que se cargue el elemento. Lugar fun() dentro de una onload función del oyente del evento. Llamada f1() dentro de esta función, como onclick atributo será ignorado.

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


29
2018-01-31 10:31



Puede usar addEventListener para agregar tantos oyentes como desee.

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

También agregue script etiqueta después del elemento para asegurarte Save el elemento se carga en el momento en que se ejecuta el script

En lugar de mover la etiqueta de secuencia de comandos, podría llamarla cuando se cargue dom. Entonces debes colocar tu código dentro del

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

ejemplo


6
2018-01-31 10:38



Eliminé tu document.getElementById("Save").onclick = antes de tus funciones, porque ya se está convocando un evento en tu botón. También tuve que llamar a las dos funciones por separado mediante el evento 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>

2
2017-07-16 16:20



Al usar el atributo onclick o aplicar una función a las propiedades de JS onclick se borrará la inicialización onclick en.

Lo que debes hacer es añadir haga clic en eventos en su botón. Para hacer eso necesitarás métodos addEventListener y 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>

1
2018-01-31 10:40



El código en línea toma mayor prioridad que los otros. Para llamar a su otra función func () llámela desde f1 ().

Dentro de tu función, agrega una línea,

function fun () {
// Your code here
}

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

fun ();

    }

Reescribiendo todo tu código,

 <!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
2018-01-31 10:31



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

-4
2017-09-14 11:20