X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

tutorial events handler in firefox differences with chrome and IE

Posted

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

Additional System Details

Installed Plug-ins

  • Shockwave Flash 11.6 r602
  • Next Generation Java Plug-in 10.15.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Adobe PDF Plug-In For Firefox and Netscape 10.1.6
  • Google Update
  • McAfee MSS+ NPAPI Plugin
  • RealJukebox Netscape Plugin
  • RealPlayer(tm) HTML5VideoShim Plug-In
  • RealPlayer(tm) LiveConnect-Enabled Plug-In
  • RealPlayer Download Plugin
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
  • 4.1.10329.0
  • PDF-XChange Viewer Netscape Gecko Plugin

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0

More Information

jscher2000
  • Top 10 Contributor
2368 solutions 20957 answers

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?

Question owner

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;}
jscher2000
  • Top 10 Contributor
2368 solutions 20957 answers

Helpful Reply

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
  ...
jscher2000
  • Top 10 Contributor
2368 solutions 20957 answers

Helpful Reply

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>

Question owner

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.

jscher2000
  • Top 10 Contributor
2368 solutions 20957 answers

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

Question owner

Wonderful! Have a great day!