Я пытаюсь изучить Javascript и в данный момент, и я работаю над AddEventListener.eventlistener javascript проблемы
То, что я пытаюсь сделать, это добавить новую строку и пока она работает.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.colorOrange {
background-color: orange;
}
.colorBlue {
background-color: blue;
}
.colorYellow {
background-color: yellow;
}
.colorGray {
background-color: gray;
}
.colorRed {
background-color: red;
}
.colorGreen {
background-color: green;
}
.colorWhite {
background-color: white;
}
#main {
margin: 0 auto;
width: 325px;
text-align: center;
background-color: gray;
}
.row {
width: 300px;
padding: 10px;
border: 1px solid black;
display: block;
}
.hideButton, .mainText, .deleteButton {
margin: 0 auto;
padding: 10px;
border: 1px solid black;
display: inline;
}
.btn {
}
</style>
</head>
<body>
<div id="main">
<div class="AddBtn btn">Add</div>
<input type="text" id="txtBox" name="text till ruta" />
</div>
<script>
var rownr = 0;
function addListeners() {
var addButton = document.getElementsByClassName('AddBtn');
for (var i = 0; i < addButton.length; i++) {
var addBtn = addButton[i];
addBtn.addEventListener('click', function() {
var elBtn = event.srcElement;
var valueBtn = elBtn.textContent;
alert(valueBtn);
hideOrShow();
addRow();
function addRow() {
switch (valueBtn) {
case "Add":
var input = document.getElementById('txtBox').value;
rownr++;
var div = document.createElement('div');
div.className = "row";
document.getElementById("main").appendChild(div);
var div2 = document.createElement('div');
div2.className = "hideButton colorGreen";
var tx = document.createTextNode("<");
div2.appendChild(tx);
div2.addEventListener('click', hideOrShow, false);
div.appendChild(div2);
var div3 = document.createElement("div");
if (input.toLowerCase() == "red") {
div3.className = "mainText colorRed";
}
else if (input.toLowerCase() == "orange") {
div3.className = "mainText colorOrange";
}
else if (input.toLowerCase() == "blue") {
div3.className = "mainText colorBlue";
}
else if (input.toLowerCase() == "yellow") {
div3.className = "mainText colorYellow";
}
else if (input.toLowerCase() == "gray") {
div3.className = "mainText colorGray";
} else {
div3.className = "mainText colorWhite";
}
tx = document.createTextNode(rownr + " " + input);
div3.appendChild(tx);
div.appendChild(div3);
var div4 = document.createElement("div");
div4.className = "deleteButton colorRed";
tx = document.createTextNode("X");
div4.appendChild(tx);
//div4.addEventListener('click', deleBtn, false);
div.appendChild(div4);
var linebreak = document.createElement("br");
div.appendChild(linebreak);
default:
}
}
До сих пор все работает так, как я хочу. Но когда я нажимаю «<», он войдет в эту функцию и найдет все теги с классом hideButton. Первый щелчок не найдет ничего, но во второй раз он найдет значение «<» и откроется окно предупреждения и покажет значение. Вот где я заблудился и не могу заставить его работать. Когда вы нажмете третий раз, будет петля или что бы там ни было - в любом случае он покажет окно предупреждения 2 раза и
, то если вы повторите тот же клик, он сделает то же самое 3 раза и так будет.
function hideOrShow() {
var hideButton = document.getElementsByClassName('hideButton');
for (var j = 0; j < hideButton.length; j++) {
hideBtn = hideButton[j];
hideBtn.addEventListener('click', function() {
var hideElBtn = event.srcElement;
var valueHideBtn = hideElBtn.textContent;
alert(valueHideBtn);
}, false);
}
}
}, false);
}
}
window.onload = addListeners;
</script>
</body>
</html>
Цель этого упражнения в том, что
при нажатии добавить кнопку добавить текст из поля ввода и добавить этот текст в новой строке.
и «<» должен скрыть строку и изменить его на «>», чтобы показать его снова
и «X» будет просто удалить строку.
Но мне нужна помощь в поиске части ценности, о которой я говорил выше.
Ваша ошибка в вашей функции 'hideOrShow'. У вас уже есть прослушиватель событий на вашем hideButton, но вы выполняете цикл и добавляете второй прослушиватель событий в эту функцию, второй даже приемник, который вы добавляете, выбирает textContent. Вы можете покончить с этим слушателем событий, и с вами все будет в порядке. –