Javascript-форум - Не срабатывает js функция при щелчке по div-у

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Не срабатывает js функция при щелчке по div-у (https://javascript.ru/forum/events/66561-ne-srabatyvaet-js-funkciya-pri-shhelchke-po-div-u.html)

Не срабатывает js функция при щелчке по div-у

Всем доброго дня, есть часть кода php, который в цикле формирует поля таблицы:

//прикрепляю ссылку на каждую картинку, при формировании html у каждой ссылки вызов функции с разными параметрами
echo 
("
	<div class = 'col'>
		<div class = 'pic' onсlick = \"order_selected('".$result[$i][1]."', '".$result[$i][2]."')\">
			<img class = 'image' src = '".$result[$i][0]."'/>
		</div>
		<div class = 'title'>".$result[$i][1]."</div>
		<div class = 'description'>".$result[$i][2]."</div>
	</div>
");

В коде браузера вызов формируется так:

<div class = 'pic' onсlick = "order_selected('тестовое сообщение', 'тестовое сообщение 2')">

Собственно сама функция.
Её назначение - создание "модального окна" с вставкой в поля значения из массива $result по щелчку контейнера, указанного выше:

<script type="text/javascript">
function order_selected(var title, var description)
{
	document.write
	(
		"<div id = 'win'>"+
			"<div class = 'overlay'/>"+
			"<div class = 'visible'>"+
				"<form action = 'order.php' method = 'post'>"+
					"<h3>Отправка заказа</h3>"+
					"<div class = 'content'>"+
						"<p>Вы выбрали:</p>"+
						"<p name = 'title'>title</p>"+
						"<p name = 'description'>description</p>"+
						"<p>Email: <input type = 'text' name = 'email' /></p>"+
					"</div>"+
					"<input class = 'button' type = 'button' value = 'Отмена'/>"+
					"<input class = 'button' type = 'submit' value = 'Отправить'/>"+
				"</form>"+
			"</div>"+
		"</div>"
	);
}
</script>

Пробовал вызывать в теле html документа:

<script type="text/javascript">
order_selected('бла бла бла', 'бла бла бла');
</script>

ничего не происходит как и через кликание div-а.

Alex_M45,
2 строка var-ы уберите ... и попробуйте никогда document.write в функциях не использовать.

function order_selected(title, description) - всё равно не срабатывает.
А в чем проблема такого использования? (на будущее запомнить)
Знаю есть альтернатива через innerHTML, но этот код тоже должен работать по идее.

Цитата:

Сообщение от Alex_M45

всё равно не срабатывает.

работает всё, только document.write после клика "стирает" страницу, т.к. браузер снова парсит страницу.
document-write#только-до-конца-загрузки

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script>
function order_selected(title, description)
{
  document.write
  (
    "<div id = 'win'>"+
      "<div class = 'overlay'/>"+
      "<div class = 'visible'>"+
        "<form action = 'order.php' method = 'post'>"+
          "<h3>Отправка заказа</h3>"+
          "<div class = 'content'>"+
            "<p>Вы выбрали:</p>"+
            "<p name = 'title'>title</p>"+
            "<p name = 'description'>description</p>"+
            "<p>Email: <input type = 'text' name = 'email' /></p>"+
          "</div>"+
          "<input class = 'button' type = 'button' value = 'Отмена'/>"+
          "<input class = 'button' type = 'submit' value = 'Отправить'/>"+
        "</form>"+
      "</div>"+
    "</div>"
  );
}
</script>
</head>

<body>


<script type="text/javascript">


order_selected('бла бла бла', 'бла бла бла');


</script>


</body>
</html>

т.е. document.write() это тот-же php только на стороне клиента и не годится для создания динамических страниц без перезагрузки и лучше использовать innerHTML, верно?

Цитата:

Сообщение от Alex_M45

лучше использовать innerHTML, верно?

да или Мультивставка: insertAdjacentHTML и DocumentFragment

или создавать https://learn.javascript.ru/modifying-document

Благодарю за ответы :thanks: