Question

I am working on a program using python, HTML and javascript. I have two images that works as a button changin colors onmouseover and onmouseout. It also has a function that works when the onclick event happens. Everything is working very well on Internet Explorer (which is extrange) but the onclick event is not working on safari,chrome or firefox. The error console doesnt mark any error, neither the error.log on console.

Do you see anything wrong with the code? Are there some functions like onmouseover or onmouseout or onclick that does not work on those browsers?

      <td><img src="/RH/images/tacha.png" onclick="eliminarRenglon('eliminar','%s');testing()" 
      onmouseover="this.src='/RH/images/tacha_2.png'" onmouseout="this.src='/RH/images/tacha.png'" /></td>''' % variable

     function testing(){
        alert("JUST TESTING");
     }

not even the “testing” function works. The “eliminarRenglon” function works very well on IE, and also the “testing” function. Here is the code of the “eliminarRenglon”, but as it works very well on IE i dont know if the problem is with it.

function eliminarRenglon(tipo,id) { 
   var nivel = "No"
   var divPrincipal = document.getElementById("divPrincipal");
   var idReq = document.getElementById("req" + id).value;
   var claveProyecto = document.getElementById("claveproyecto").value;
   var url = 'actualizarRenglonAjax.py?nivel='+nivel+'&tipo='+tipo+'&idReq='+idReq+'&claveProyecto='+claveProyecto;
   if(document.getElementById("selectReq" + id).value == ""){           
       xmlhttp = GetXmlHttpObject(nivel);
       if(!xmlhttp) {
             alert("Browser does not support HTTP Request");
             return;
       }
       var xml = xmlhttp;
       xmlhttp.onreadystatechange = function() {
           if(xml.readyState == 1) {
               loading.innerHTML = "<img src='/RH/images/loading_4.gif' />"
           }
           if(xml.readyState == 4) {
            divPrincipal.innerHTML = xml.responseText;
            actualizarTodo();
           }
       };
       xmlhttp.open("GET",url,true);
       xmlhttp.send(null);
       return true;
   }
   else
       alert("No se puede eliminar");
}

I would really appreciate the help
Thanks a lot!

Answer 1

I’d suggest adding a selector value to the image, then binding events the unobtrusive way (makes maintenance a bit easier later on).

Do it like this:

<img src="/RH/images/tacha.png" class="myImage" />

then, after the DOM is loaded, attach your events (jquery here for simplicity)

$('img.myImage').bind('click', function() { 
  alert('testing!'); 
  eliminarRenglon('eliminar','%s'); 
});