Click here to Skip to main content
14,486,704 members
Rate this:
Please Sign up or sign in to vote.
See more:
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
addEvent(oButton, '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)
}

output is not displaying the value of sum value1 + value2 when Add is clicked

What I have tried:

reviewing everything numerous times to see if I missed any spelling
Posted
Updated 24-Mar-20 9:12am
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 5 days ago
   
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.
Rate this:
Please Sign up or sign in to vote.

Solution 1

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>
<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[^]
   
Rate this:
Please Sign up or sign in to vote.

Solution 2

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 );
    }
  }
   

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100