Using javascript addevent

Question

1.00/5 (1 vote)

See more:

Posted 24-Mar-20 7:24am

Member 14781799

Updated 24-Mar-20 9:12am

Add a Solution

Comments

Richard MacCutchan 24-Mar-20 13:48pm

What is it displaying?

gggustafson 24-Mar-20 15:08pm

As you can see from MadMyche's solution the addEvent needs to be replaced by addEventListener. However, because you are dealing with browser event handler differences, you might want a general event handler mechanism. A really complete discussion of trhe problem begins on https://www.quirksmode.org/js/introevents.html. PPK includes a number of JavaScript methods that will solve most of your problems. In my CP article https://www.codeproject.com/Articles/1250380/MasterPages-using-HTML-CSS-and-JavaScript the file master_page.js contains a section containing the PPK solutions. I've copied them into my solution below.

Richard Deeming 25-Mar-20 13:16pm

NB: addEventListener is supported in all modern browsers, including IE9 and later. IE9 was released in 2011.

document.getElementById has been supported since IE5.5, which was released in 2001.

How far back are you intending to go with browser support? Most sites don't support anything older than IE11, and many sites are dropping support for IE altogether.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

MadMyche · Answer 1 · 2020-03-24T08:26:00

1. Do you ever call initialize()? I did not see that in your code.
2. What does addEvent do? It threw an error in my testing.

For testing what you did, I made a simple html page and added things in until I got it to work. This was helped by using the debug mode of the browser by right clicking on the page and choosing inspect. Just use the console tab and you should be able to troubleshoot.

I added a script at the end of the page to call initialize and changed addEvent to addEventListener, with slightly different syntax

After about 5 minutes I got this simple page to work

HTML

<html>
<head>
<script type="text/javascript">
function initialize() {
	// do this only if the browswr can handle DOM mthods
	if (document.getElementById) {
		// point to critical elements
		var oInputA = document.getElementById('inputA');
		var oInputB = document.getElementById('inputB');
		var oButton = document.getElementById('add');
		var oOutput = document.getElementById('output');

		// if they all exist...
		if (oInputA && oInputB && oButton && oOutput) {
			//apply behaviors
			oButton.addEventListener('click', addIt);
		}
	}
}
// add two input numbers & display result
function addIt() {
	var value1 = document.getElementById("inputA").value;
	var value2 = document.getElementById("inputB").value;
	document.getElementById("output").value = parseFloat(value1) + parseFloat(value2)
}
</script>
</head>
<body>
	<input type="text" id="inputA"><br>
	<input type="text" id="inputB"><br>
	<input type="button" id="add" value="add"><br>
	<input type="text" id="output"><br>

	<script>initialize();</script>
</body>
</html>

Reference:
EventTarget.addEventListener() - Web APIs | MDN[^]

gggustafson · Answer 2 · 2020-03-24T09:13:00

The following is extracted from master_page.js.

/* *********************** EVENT HANDLERS ********************* */

///
/// Source:
///
///   http:///www.quirksmode.org/book/ Section 7C
///

/// ******************************************** add_event_handler

// global entry point

/// <synopsis>
///   add_event_handler ( obj,
///                       e,
///                       funct )
///
/// <summary>
///   adds an event handler to the object for the specified event
///
/// <param name="obj">
///   object to which to add an event handler ( e.g., window,
///   document, etc. )
///
/// <param name="e">
///   a string containing the event for which the handler will
///   fire ( e.g., "load", "unload", etc.). Note that for all
///   events, the prefix "on" is not to be provided.
///
/// <param name="funct">
///   the event handler to be added
///
/// <example>
///   add_event_handler ( window,
///                       "scroll",
///                       my_onscroll_function );

function add_event_handler ( obj,
                             e,
                             funct )
  {

  if ( obj.addEventListner )
    {
    obj.addEventListner ( e, funct, false );
    }
  else if ( obj.attachEvent )
    {
    obj.attachEvent ( 'on' + e, funct );
    }
  }

/// ***************************************** remove_event_handler

// global entry point

/// <synopsis>
///   remove_event_handler ( obj,
///                          e,
///                          funct )
///
/// <summary>
///   removes the event handler from the object for the specified
///   event
///
/// <param name="obj">
///   object from which to remove the specified event handler
///   ( e.g., window, document, etc. )
///
/// <param name="e">
///   a string containing the event from which the handler will be
///   removed (e.g., "load", "unoad", etc.). Note that for all
///   events, the predfix "on" is not provided.
///
/// <param name="funct">
///   object that is the event handler to be removed.
///
/// <example>
///   remove_event_handler ( window,
///                          "scroll",
///                          my_onscroll_funct );

function remove_event_handler ( obj,
                                e,
                                funct )
  {

  if ( obj.removeEventListner )
    {
    obj.removeEventListner ( e, funct, false );
    }
  else if ( obj.detachEvent )
    {
    obj.detachEvent ( 'on' + e, funct );
    }
  }

Using javascript addevent

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0