Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

tutorial events handler in firefox differences with chrome and IE

more options

I have this code:

           var inp1 = document.createElement("input");
           inp1.type = "button";
           inp1.value = "  Delete  ";
           var bott = "boton" + i.toString();
           inp1.id = "prueba" + i;
           inp1.className = "boton";
           inp1.onclick = function() {deleteItem(event)};

function deleteItem(event) {

   var tname = event.srcElement || event.target;
   var tname1 = tname.id;

.... .... ... works for chrome but not firefox

I have this code: var inp1 = document.createElement("input"); inp1.type = "button"; inp1.value = " Delete "; var bott = "boton" + i.toString(); inp1.id = "prueba" + i; inp1.className = "boton"; inp1.onclick = function() {deleteItem(event)}; function deleteItem(event) { var tname = event.srcElement || event.target; var tname1 = tname.id; .... .... ... works for chrome but not firefox

Chosen solution

Thank you for clarifying that, I was a little confused.

Here are a couple of sites that I think are really useful for learning JavaScript:

(1) Mozilla Developer Network - mdn

If you search for anything (e.g., addEventListener) and add mdn to your query, Google usually will give you the relevant page near the top of your results. Or you can skim the index pages here:

(2) QuirksMode

Not completely up-to-date, but great for finding information on browser differences and related workarounds. http://www.quirksmode.org/compatibility.html

Read this answer in context 👍 0

All Replies (7)

more options

The event is passed to the outer function which in this case is the anonymous function. If you want to pass the event to another function, you need to define the variable name as the parameter to the anonymous function. For example:

inp1.onclick = function(event) {deleteItem(event)};

Does that work in all of your target browsers?

more options

Finally, here is the code:

           inp1.className = "boton";
           if(navigator.appName=="Microsoft Internet Explorer"){
               inp1.onclick = function() {deleteItem(event)};
           } else {inp1.onclick = function() {deleteItem(this)};}

function deleteItem(event) {

   if(navigator.appName=="Microsoft Internet Explorer") {
     var tname = event.srcElement || event.target;
     var tname1 = tname.id;   
   } else {var tname1 = event.id;}
more options

What kind of tutorial are you writing?

Generally speaking, you should never recommend detecting browser capabilities by strings in the navigator properties. It is always better to use object/property/method detection if possible. Otherwise, you may miss crucial changes made in more recent versions of a browser, such as IE9 and later. Also, you should consider using the standardized approach to defining event handlers, which is addEventListener().

Here is an alternative example:

var inp1 = document.createElement("input");
inp1.type = "button";
inp1.value = "  Delete  ";
inp1.id = "prueba" + i;
// For best results, add element to the document before
// setting event listeners
if (inp1.addEventListener) 
  inp1.addEventListener("click", deleteItem, false);
else
  inp1.onclick = deleteItem;
function deleteItem(evt){
  if (!evt) evt = window.event; // old IE
  var tgt = evt.target || evt.srcElement;
  alert(tgt.id); //for debug/test only
  return false; //for debug/test only
  ...
more options

By the way, this was my test page for the suggested new bits:

<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<p><button id="clicktest">Click me!</button></p>
<script type="text/javascript">
var btn = document.getElementById("clicktest");
if (btn.addEventListener) 
 btn.addEventListener("click", deleteItem, false);
else
 btn.onclick = deleteItem;
function deleteItem(evt){
 if (!evt) evt = window.event; // old IE
 var tgt = evt.target || evt.srcElement;
 alert(tgt.id);
 return false;
}
</script>
</body>
</html>
more options

Hello jscher2000, thank you for your answers, I really appreciate them very much. I am new with javascript, ajax and dynamic html. By the way, I am not ready to write a tutorial, I am looking for a tutorial to learn more.

more options

Chosen Solution

Thank you for clarifying that, I was a little confused.

Here are a couple of sites that I think are really useful for learning JavaScript:

(1) Mozilla Developer Network - mdn

If you search for anything (e.g., addEventListener) and add mdn to your query, Google usually will give you the relevant page near the top of your results. Or you can skim the index pages here:

(2) QuirksMode

Not completely up-to-date, but great for finding information on browser differences and related workarounds. http://www.quirksmode.org/compatibility.html

more options

Wonderful! Have a great day!