Javascript-форум - Добавление событие onclick и выполнение метода

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

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

- - Добавление событие onclick и выполнение метода (https://javascript.ru/forum/events/43158-dobavlenie-sobytie-onclick-i-vypolnenie-metoda.html)

Добавление событие onclick и выполнение метода

Помогите с решением задачи.
Надо добавить <а> элементы и события onclick из js. При вызове метода ничего не работает. Я новичек в JS, только учусь... облазил уже все в интернете и не нашел решения...
вот код:

function addA ()
	{
var aEl = document.createElement("a");
 aEl.href ="";
 aEl.innerHTML = "More information";

 var divParent = document.getElementsByClassName ("post");
 for (var i=0; i<divParent.length; i++){	
	divParent[i].insertBefore (aEl.cloneNode(true), divParent.lastChild);
		}
		
		var aHandler = document.getElementsByTagName ("a");
       for (var i=0; i<aHandler.length; i++)
	   aHandler[i].onclick=funk(this);
		}
		addA ();

код метода при активации onclick:

function funk(a)
{

if (a.nextElementSibling.getAttribute("style") == ("display:none")){	
				a.nextElementSibling.setAttribute("style", "display:default");
			}
			else{
				a.nextElementSibling.setAttribute("style", "display:none");
}

И ничего не работает так как надо... где ошибки?:help:

Цитата:

Сообщение от Rise (Сообщение 282529)

aHandler[i].onclick =  function() { funk(this) };

Это не помогло решить проблему.... метод funk(a) не работает...
Так выглядит что не правильный алгоритм if... что не так?

Serhiy,
где структура html и где 10 строка в

Цитата:

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

function funk(a)

Цитата:

Сообщение от рони (Сообщение 282542)

Serhiy,
где структура html и где 10 строка в

Вот HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Hidden textarea</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
    <div id="content">
		<div class="post">
				<h3>
					Javascript insändningsuppgift 1
				</h3>
				<p class="author">
					posted by Elevid, kurs, termin
				</p>		
			<aside>
				Att lära sig använda Javascript är enklare än man kan tro
			</aside>
				<p>
					Här ser du en introduktionstext som skall bli längre....
				</p>
				<p class="show">
					...så att vidare information kan visas. Här kommer då en längre exempel text där användaren kan läsa mera
					om just denna post. Detta är en vanlig funktion som du kan hitta på många vanliga webbsidor som säljer
					produkter.
				</p>	
		</div>
		<div class="post">
				<h3>
					Javascript insändningsuppgift 1
				</h3>
				<p class="author">
					posted by Elevid, kurs, termin
				</p>																			
				<aside>
					Tänk vad mycket man kan lära sig
				</aside>
				<p>
					Även detta textstycke skall utökas...
				</p>
				<p class="show">
					...så att vidare information kan visas. Här kommer då en längre exempel text där användaren kan läsa mera
					om just denna post. Detta är en vanlig funktion som du kan hitta på många vanliga webbsidor som säljer
					produkter.

				</p>
		</div>
	</div>
    
</div>
<script type="text/javascript" src="js/js_hiddentext.js"></script>
</body>
</html>

в 10-й строке потерял ; при копирование... :-?
вот все код js:

function hideP (){
			var showP = document.getElementsByClassName("show");
			for (var i=0; i<showP.length; i++){	
			showP[i].setAttribute("style", "display:none");
			}
			};
		hideP ();
		
	function addA ()
	{
var aEl = document.createElement("a");
 aEl.href ="";
 aEl.innerHTML = "Visa merra information";

 var divParent = document.getElementsByClassName ("post");
 for (var i=0; i<divParent.length; i++){	
	divParent[i].insertBefore (aEl.cloneNode(true), divParent.lastChild);
		}	
		
		var aHandler = document.getElementsByTagName ("a");
       for (var i=0; i<aHandler.length; i++)
	   aHandler[i].onclick=function(){funk(this)};
		}
		addA ();
		
function funk(a){

if (a.nextElementSibling.getAttribute("style") == ("display:none")){	
				a.nextElementSibling.setAttribute("style", "display:default");
			}
			else{
				a.nextElementSibling.setAttribute("style", "display:none");
			}
		}

Цитата:

Сообщение от рони (Сообщение 282542)

Serhiy,
где структура html и где 10 строка в

не зря был вопрос про структуру...
Была ошибка в funk(a) ...
поменял a.nextElementSibling.getAttribute на a.nextElementSibling.getAttribute
правда не понимаю почему а элемент оказался последним дочерним элементом... ну да ладно с этим потом разберусь...
При выполнении метода funk(a) код выполняется (текст появляется) и тут сражу же автоматически выполняется метод function hideP ()... И текст сразу же снова прячется.... почему так происходит?:-?

Цитата:

Сообщение от Rise (Сообщение 282545)

.setAttribute("style", "display:none"); меняем на .style.display = 'none';
.getAttribute("style") на .style.display

Нет, таким образом совсем все плохо.... так код не хочет работать

Serhiy,

Цитата:

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

divParent.lastChild

потеряно [i]

Цитата:

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

aHandler[i].onclick=function(){return funk(this)};

function funk(a){ ... return false}

строка 49 и 30 без пропуска !!! либо lastElementChild вместо lastChild

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="container">
    <div id="content">
		<div class="post">
				<h3>
					Javascript insändningsuppgift 1
				</h3>
				<p class="author">
					posted by Elevid, kurs, termin
				</p>
			<aside>
				Att lära sig använda Javascript är enklare än man kan tro
			</aside>
				<p>
					Här ser du en introduktionstext som skall bli längre....
				</p>
				<p class="show">
					...så att vidare information kan visas. Här kommer då en längre exempel text där användaren kan läsa mera
					om just denna post. Detta är en vanlig funktion som du kan hitta på många vanliga webbsidor som säljer
					produkter.
				</p></div>
		<div class="post">
				<h3>
					Javascript insändningsuppgift 1
				</h3>
				<p class="author">
					posted by Elevid, kurs, termin
				</p>
				<aside>
					Tänk vad mycket man kan lära sig
				</aside>
				<p>
					Även detta textstycke skall utökas...
				</p>
				<p class="show">
					...så att vidare information kan visas. Här kommer då en längre exempel text där användaren kan läsa mera
					om just denna post. Detta är en vanlig funktion som du kan hitta på många vanliga webbsidor som säljer
					produkter.

				</p></div>
	</div>

</div>

   <script>
   function hideP (){
			var showP = document.getElementsByClassName("show");
			for (var i=0; i<showP.length; i++){
			showP[i].setAttribute("style", "display:none");
			}
			};
		hideP ();

	function addA ()
	{
var aEl = document.createElement("a");
 aEl.href ="";
 aEl.innerHTML = "Visa merra information";

 var divParent = document.getElementsByClassName ("post");
 for (var i=0; i<divParent.length; i++){
	divParent[i].insertBefore (aEl.cloneNode(true), divParent[i].lastChild);
		}

		var aHandler = document.getElementsByTagName ("a");
       for (var i=0; i<aHandler.length; i++)
	   aHandler[i].onclick=function(){return funk(this)};
		}
		addA ();

function funk(a){

if (a.nextElementSibling.style.display != "none"){
				a.nextElementSibling.style.display="none";
			}
			else{
				a.nextElementSibling.style.display="block";
			};
             return false;

		}

   </script>
</body>

</html>

Спасибо Рони... работает :)
вот что оно значит невнимательность новичка... пропустил [i] и немог понять в чем дело...

строка 49 и 30 без пропуска !!!
Тут я совсем не понял.... почему без пропуска? Все работает так как надо... но как это влияет? Я просто хочу разобраться и понять....
Какая разница между lastElementChild и lastChild?

Цитата:

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

Какая разница между lastElementChild и lastChild?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
     <div class="post"><p class="show"></p> </div>
     <script>
      var div = document.querySelector('.post');
      alert([div.lastElementChild,div.lastChild]);
     </script>
</body>

</html>