Member 14781799 Ответов: 2

Использование javascript addevent

инициализация функции()
{
// делайте это только в том случае, если browswr может обрабатывать DOM mthods
если (документ.метода getElementById)
{
// указать на критические элементы
ВАР oInputA = документ.метода getElementById('вводы');
ВАР oInputB = документ.метода getElementById('и inputb');
ВАР oButton = документ.метода getElementById('добавить');
var oOutput = document.getElementById('output');

// если они все существуют...
если (oInputA &амп;&амп; oInputB &амп;&амп; oButton &амп;&амп; oOutput)
{
//применить поведение
addEvent(oButton, 'click', addIt);
}
}
}
// сложить два числа входных и усилитель; amp; дисплей результата
дополнение функции ()
{
ВАР значение1 = документ.метода getElementById("вводы").значение;
ВАР значение2 = документ.метода getElementById("и inputb").значение;

document.getElementById("output").value = parseFloat(value1) + parseFloat(value2)
}

вывод не отображает значение sum value1 + value2 при нажатии кнопки Добавить

Что я уже пробовал:

просматривая все это множество раз, чтобы увидеть, не пропустил ли я какое-нибудь правописание

Richard MacCutchan

Что он показывает?

gggustafson

Как вы можете видеть из решения MadMyche, addEvent должен быть заменен addEventListener. Однако, поскольку вы имеете дело с различиями в обработчиках событий браузера, вам может понадобиться общий механизм обработки событий. Действительно полное обсуждение проблемы trhe начинается на https://www.quirksmode.org/js/introevents.html. PPK включает в себя ряд методов JavaScript, которые решат большинство ваших проблем. В моей статье CP https://www.codeproject.com/Articles/1250380/MasterPages-using-HTML-CSS-and-JavaScript досье master_page.js содержит раздел, содержащий растворы ППК. Я скопировал их в свое решение ниже.

Richard Deeming

NB: addEventListener поддерживается во всех современных браузерах, включая IE9 и более поздние версии. IE9 был выпущен в 2011 году.

document.getElementById поддерживается начиная с IE5.5, который был выпущен в 2001 году.

Как далеко вы собираетесь зайти с поддержкой браузера? Большинство сайтов не поддерживают ничего старше IE11, и многие сайты вообще отказываются от поддержки IE.

2 Ответов

Рейтинг:
0

MadMyche

1. Вы когда-нибудь звонили initialize()- Я не видел этого в вашем кодексе.
2. Что делает addEvent сделать? Это вызвало ошибку в моем тестировании.

Для тестирования того, что вы сделали, я сделал простую html-страницу и добавлял туда вещи, пока не получил ее на работу. Этому способствовало использование отлаживать режим работы браузера, щелкнув правой кнопкой мыши на странице и выбрав проверить. Просто используйте приставка вкладка, и вы должны быть в состоянии устранить неполадки.

Я добавил скрипт в конце страницы для вызова инициализировать и изменился addEvent к addEventListener, с немного другим синтаксисом

Примерно через 5 минут я получил эту простую страницу для работы

<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>
Ссылка:
EventTarget.addEventListener() - веб-API | MDN[^]

Рейтинг:
0

gggustafson

Из него извлекается следующее 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 );
    }
  }