Why this addEvent function is not working?

Question

I am a newbie to JS technology. I am taking Javascript Bible as my starting point. That book takes me deep to JS behavior, although some obsolete topics and deprecated functions. A particular code block is not working for me.

I don't know honestly "Is that a deprecated function or browser issue" I've searched addEvent in all resources. Most of the people used addEventListener now.

I just need to know the difference. How I can possibly fix this code?

What's the reason it returns an error "Uncaught ReferenceError: addEvent is not defined". Where I need to define this addEvent?

// **jsb-23-02.js**

// initialize when the page has loaded
addEvent(window, "load", testValues);
var newElem;
var newText;
var toyGlobal = "Gumby";
var aBoy = "Charlie Brown";
var hisDog = "Snoopy";

function showLocal() {
  var toyLocal = "Pokey";
  return toyLocal;
}

function showGlobal() {
  newElem = document.createElement("div");
  newElem.className = "objProperty";
  newText = document.createTextNode("Global version of hisDog is intact: " +
    hisDog);
  // just picked up a global variable value instead
  // of the local variable in the calling function

  newElem.appendChild(newText);
  placeHolderElement.appendChild(newElem);
}

function testValues() {
  // Dangerous ground here -- declaring a global variable in a function
  placeHolderElement = document.getElementById("placeHolder");
  // Now declare the local variable
  var hisDog = "Gromit"; // initializes local version of "hisDog"
  if (placeHolderElement) {
    newElem = document.createElement("div");
    newElem.className = "objProperty";
    newText = document.createTextNode("aBoy is: " + aBoy);
    // just picked up a global variable value
    newElem.appendChild(newText);
    placeHolderElement.appendChild(newElem);
    newElem = document.createElement("div");
    newElem.className = "objProperty";
    newText = document.createTextNode("His toyGlobal is " + toyGlobal);
    newElem.appendChild(newText);
    // just picked up another global variable value
    placeHolderElement.appendChild(newElem);
    // Do not bother with toyLocal here because it will throw undefined
    newElem = document.createElement("div");
    newElem.className = "objProperty";
    newText = document.createTextNode(
      "toyLocal value returned from the showLocal function is: " +
      showLocal());
    newElem.appendChild(newText);
    placeHolderElement.appendChild(newElem);
    newElem = document.createElement("div");
    newElem.className = "objProperty";
    newText = document.createTextNode("Local version of hisDog is: " + hisDog);
    newElem.appendChild(newText);
    // just picked up another global variable value
    placeHolderElement.appendChild(newElem);
    // now call another function that does not set the variable hisDog
    // and display the value. we’ll see that the global value is intact
    showGlobal();
  }
}

<script type="text/javascript" src="jsb-23-02.js"></script>
<h1>Variable scope</h1>
<div id="placeHolder"></div>

There is no such thing as `addEvent` in plain JS. Are you looking for [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)? — VLAZ, Jul 19 '19 at 07:57
What is addEvent? You are missing a function addEvent, but all new browsers recognise addEventListener - you likely used to have some script like in https://stackoverflow.com/questions/2657182/correct-usage-of-addeventlistener-attachevent — mplungjan, Jul 19 '19 at 07:57
That book is almost 10 years old. You might as well learn a separate language. Here's an article I found from 2005 referencing it: [`addEvent()` considered harmful](https://www.quirksmode.org/blog/archives/2005/08/addevent_consid.html) — , Jul 19 '19 at 07:58
@ShubhamSharma `window.addEventListener("load", testValues);` — mplungjan, Jul 19 '19 at 08:04

score 3 · Accepted Answer · answered Jul 19 '19 at 07:59

3

It seems pretty likely that your code was copied from something like the answer here, which defines addEvent as a DRY way to call addEventListener if it exists, or to call attachEvent (a very obsolete method for use in Internet Explorer which does the same thing as addEventListener):

function addEvent(element, eventName, fn) {
    if (element.addEventListener)
        element.addEventListener(eventName, fn, false);
    else if (element.attachEvent)
        element.attachEvent('on' + eventName, fn);
}

Like all non-built-in functions, you need to define the addEvent function in order to be able to call it.

addEventListener works just fine in all major browsers, including Internet Explorer 9+ (released in 2011; only a few people are using IE nowadays, and those that are are almost exclusively using IE11.). I'd suggest ditching addEvent and attachEvent entirely, and just using addEventListener.

answered Jul 19 '19 at 07:59

CertainPerformance

356,069
52
309
320

Thank you so much.. So it is not working because of browser. right? It's an old book. Can you recommend any JS book with updated modules? – Mithun Jack Jul 19 '19 at 08:07
1

No, your `addEvent` isn't working because you didn't define the function first - all you need to do is to define the function first, like in the answer. I don't know of Javascript books, everything I've learned, I've learned online, primarily from Google (which often points to Stack Overflow :P ) – CertainPerformance Jul 19 '19 at 08:09
Define means how? function addEvent() or any other way. I can't get it. Help me to get over from this. Thanks in advance – Mithun Jack Jul 19 '19 at 08:34
Yes, you just need to put that `function addEvent` into your code, so that it's defined when you try to call `addEvent` afterwards. eg `function AddEvent(....) { ... } /* and then you can call it */ addEvent(window, "load", testValues);` – CertainPerformance Jul 19 '19 at 08:35

Why this addEvent function is not working?

1 Answers1