Форум

Serhiy · #1 (**permalink**) 24.11.2013, 21:53

Помогите с решением задачи.
Надо добавить <а> элементы и события 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");
}

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

Serhiy · #2 (**permalink**) 24.11.2013, 22:28

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

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

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

рони · #3 (**permalink**) 24.11.2013, 22:54

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

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

function funk(a)

Serhiy · #4 (**permalink**) 24.11.2013, 23:03

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

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

Serhiy · #5 (**permalink**) 24.11.2013, 23:25

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

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

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

Serhiy · #6 (**permalink**) 24.11.2013, 23:35

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

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

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

рони · #7 (**permalink**) 24.11.2013, 23:39

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>

Serhiy · #8 (**permalink**) 24.11.2013, 23:45

Спасибо Рони... работает

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

Serhiy · #9 (**permalink**) 24.11.2013, 23:54

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

рони · #10 (**permalink**) 25.11.2013, 00:31

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript