помогите тотальному новичку

179

11 января 2019, 02:10

когда я навожу несколько раз на элемент ul то при клике на любой элемент li выводится не конкретный элемент в console.log а дублирвоанное количество равное переходам addEventListener.

var button = document.getElementById("enter"); 
var input = document.getElementById("userinput"); 
var ul = document.getElementById("ulul"); 
var lil = []; 
 
function inputLength() { 
	return input.value.length; 
} 
 
function createListElement() { 
	var li = document.createElement("li"); 
	li.appendChild(document.createTextNode(input.value)); 
	ul.appendChild(li); 
	input.value = ""; 
} 
 
function addListAfterClick() { 
	if (inputLength() > 0) { 
		createListElement(); 
	} 
 
 
 
} 
 
function addListAfterKeypress(event) { 
	if (inputLength() > 0 && event.keyCode === 13) { 
		createListElement(); 
	} 
} 
 
button.addEventListener("click", addListAfterClick); 
 
input.addEventListener("keypress", addListAfterKeypress); 
 
 
ul.addEventListener("mouseenter", jonDoneUndode, false); 
 
function jonDoneUndode(){ 
		[].forEach.call(document.querySelectorAll("li"),function(test){ 
test.addEventListener("click", function () { 
	console.log(this); 
		}); 
	}); 
}

<!DOCTYPE html> 
<html> 
<head> 
	<title>Javascript + DOM</title> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
	<h1>Shopping List</h1> 
	<p id="first">Get it done today</p> 
	<input id="userinput" type="text" placeholder="enter items"> 
	<button id="enter">Enter</button> 
	<ul id = "ulul"> 
		<li class="bold red" random="23">Notebook</li> 
		<li>fff</li> 
		<li>dddd</li> 
		<li>cccc</li> 
		<li>ggggg</li> 
		<li>eeee</li> 
	</ul> 
	<script type="text/javascript" src="script.js"></script> 
</body> 
</html>

Answer 1

При создании элемента вешайте один для всех класс(item) а в обработчике через таргет находите и выводите.

var button = document.getElementById("enter"); 
var input = document.getElementById("userinput"); 
var ul = document.getElementById("ulul"); 
var lil = []; 
 
 
function inputLength() { 
  return input.value.length; 
} 
 
function createListElement() { 
  var li = document.createElement("li"); 
  li.className = 'item'; // указываем класс 
  li.appendChild(document.createTextNode(input.value)); 
  ul.appendChild(li); 
  input.value = "";       
} 
 
function addListAfterClick() { 
  if (inputLength() > 0) { 
    createListElement(); 
  } 
} 
 
function addListAfterKeypress(event) { 
  if (inputLength() > 0 && event.keyCode === 13) { 
    createListElement(); 
  } 
} 
 
ul.addEventListener("click", function(e) { 
  if (e.target && e.target.matches("li.item")) { 
    console.log(e.target.innerText); 
  } 
}); 
 
button.addEventListener("click", addListAfterClick); 
input.addEventListener("keypress", addListAfterKeypress);

<!DOCTYPE html> 
<html> 
<head> 
	<title>Javascript + DOM</title> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
	<h1>Shopping List</h1> 
	<p id="first">Get it done today</p> 
	<input id="userinput" type="text" placeholder="enter items"> 
	<button id="enter">Enter</button> 
	<ul id = "ulul"> 
		<li class="item bold red" random="23">Notebook</li> 
		<li class="item">fff</li> 
		<li class="item">dddd</li> 
		<li class="item">cccc</li> 
		<li class="item">ggggg</li> 
		<li class="item">eeee</li> 
	</ul> 
	<script type="text/javascript" src="script.js"></script> 
</body> 
</html>

Answer 2

Спасибо всем за помощь теперь немного больше стал понимать!

var button = document.getElementById("enter"); 
var input = document.getElementById("userinput"); 
var ul = document.getElementById("ulul"); 
var lil = []; 
 
function inputLength() { 
	return input.value.length; 
} 
 
function createListElement() { 
	var li = document.createElement("li"); 
	li.appendChild(document.createTextNode(input.value)); 
	ul.appendChild(li); 
	input.value = ""; 
	li.addEventListener("click",jonDoneUndone); 
} 
 
function jonDoneUndone() { 
 
	console.log(this); 
	} 
 
function addListAfterClick() { 
	if (inputLength() > 0) { 
		createListElement(); 
	} 
 
} 
 
function addListAfterKeypress(event) { 
	if (inputLength() > 0 && event.keyCode === 13) { 
		createListElement(); 
	} 
} 
 
button.addEventListener("click", addListAfterClick); 
 
input.addEventListener("keypress", addListAfterKeypress); 
 
 
//ul.addEventListener("mouseenter", jonDoneUndode, false); 
 
//function jonDoneUndode(){ 
		[].forEach.call(document.querySelectorAll("li"),function(test){ 
test.addEventListener("click", jonDoneUndone);});

<!DOCTYPE html> 
<html> 
<head> 
	<title>Javascript + DOM</title> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
	<h1>Shopping List</h1> 
	<p id="first">Get it done today</p> 
	<input id="userinput" type="text" placeholder="enter items"> 
	<button id="enter">Enter</button> 
	<ul id = "ulul"> 
		<li class="bold red" random="23">Notebook</li> 
		<li>fff</li> 
		<li>dddd</li> 
		<li>cccc</li> 
		<li>ggggg</li> 
		<li>eeee</li> 
	</ul> 
	<script type="text/javascript" src="script.js"></script> 
</body> 
</html>