Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → Повідомлення користувача asdwhitefox
Сторінки 1
все, що вам треба, це вішати обробник натискання на щойно склоновану кнопку
Геніально і просто!
Дякую!
Є така штука, як MutationObserver. Але краще переформулюйте питання - швидше за все, він вам не потрібен, ви щось інше намагаєтеся зробити.
В мене є елемент, який клонується.
І мені необхідно, щоб кнопка видалення, яка знаходиться в даному елементі була активна на всіх клонах.
Але потрібно поставити якусь умову чи метод, яка буде реагувати на зміну кількості елементів в html і перезапускати цикл.
Зараз займусь пошуком інфу по MutationObserver, подивимося що це за звір такий.
Проблема в тому, що цикл, в котрому ви додаєте до кнопок обробники натискання, спрацьовує лише один раз, на самому початку роботи коду. Коли ви натискаєте на кнопку, щоб додати ще один елемент - на кнопку цього елемента обробник натискання не вішається.
Охх, дякую за поясненя. Можли ви тоді підкажете, якою подією, чи яким чином можливо виявити зміну в html?
Тому що мій мозок перше що зміг придумати, це використання setInterval. І я сам розумію що це не сама розумна ідея за сьогодні(○_○)
ви сюди на дівчат помандражирувати прийшли, чи програмізьму навчатись?
я вас раніше попросив надати html до цього коду
Охх, а головне я знову прогавив.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="allProject">
<div id="openBlock">
<div id="leftTextBlock" class="allBlock">
<ul id="leftText" class="textUl">
<li class="styleLi">Text
<div class="btnLi">
<input type="button"class="inputbtn favorite" >
<input type="button" class="inputbtn delete" >
</div></li>
<li class="styleLi">Text
<div class="btnLi">
<input type="button"class="inputbtn favorite" >
<input type="button" class="inputbtn delete" >
</div></li>
<li class="styleLi">Text
<div class="btnLi">
<input type="button"class="inputbtn favorite" >
<input type="button" class="inputbtn delete" >
</div></li>
</ul>
</div>
<div id="rightTextBlock" class="allBlock">
<ul id="rightText" class="textUl"></ul>
</div>
</div>
<div id="bottomLine">
<input type="button" name="" id="addLi" value="Add new Li">
</div>
</div>
</body>
<script type="text/javascript" src="script.js">
</script>
</html>ось ці
document.getElementById("addLi").onclick = function () { var listLi = document.getElementById("leftText").lastElementChild; var cln = listLi.cloneNode(true); document.getElementById("leftText").appendChild(cln); } var buttonClick = document.getElementsByClassName('delete'); for (i = 0; i < buttonClick.length; i++) { buttonClick[i].onclick = function () { var listLi = document.getElementById("leftText"); var li = listLi.lastElementChild; if (li != null) { listLi.removeChild(li); } } }
Не могли б Ви мені все ж підказати, в чому моя помилка?)
asdwhitefox написав:leofun01 написав:asdwhitefox, за відсутність відступів вам руки відірвати треба. Виправте код.
Не зовсім зрозумів про які відступи йде річ.
яка річ у вас йде? мова йде!
Словник української мови
Академічний тлумачний словник (1970—1980)
РІЧ 2, речі, жін., розм. Те саме, що мова
Дякую за пояснення. Для вирівнювання надаю перевагу плагіну beautify.
Але в момент відправки їм не скористався.
asdwhitefox, за відсутність відступів вам руки відірвати треба. Виправте код.
Не зовсім зрозумів про які відступи йде річ.
Оххх, і не замітив! Дякую.
Можливо підкажете ще один ньюанс?
Якщо я клоную елемент, то в клонованих елементах створений інпут delete ніяк не реагує.
Працює тільки на першому елементі li .
document.getElementById("addLi").onclick = function () {
var listLi = document.getElementById("leftText").lastElementChild;
var cln = listLi.cloneNode(true);
document.getElementById("leftText").appendChild(cln);
}
var buttonClick = document.getElementsByClassName('delete');
for (i=0; i< buttonClick.length; i++){
buttonClick[i].onclick = function()
{
var listLi = document.getElementById("leftText");
var li = listLi.lastElementChild;
if( li != null){listLi.removeChild(li);
}
}
}Вітаю.
Підкажіть будьласка, чому через getElementsByClassName при спробі видалити елемент вибиває помилку:
Uncaught ReferenceError: listLi is not defined at HTMLInputElement.buttonClick.<computed>.onclick
js code:
var buttonClick = document.getElementsByClassName('delete');
for (i = 0; i < buttonClick.length; i++) {
buttonClick[i].onclick = function() {
var lisrLi = document.getElementById("leftText");
var li = lisrLi.lastElementChild;
if(li != null) {
listLi.removeChild(li);
}
}
}HTML:
<ul id="leftText" class="textUl">
<li class="styleLi">Text
<div class="btnLi">
<input type="button"class="inputbtn favorite" >
<input type="button" class="inputbtn delete" >
</div>
</li>
</ul>Хмм, потрібно спробувати. Доречна ідея.
тоді вішайте лістенер на document, і блокуйте бульбашкування, після натиснення на хворму
Області.. Якщо ви подивитесь на css то зрозумієте, що окрім одного центрального блоку вся область пуста. Не хочеться закивати всі вільні області блоками. Ось і шукаю рішення.
Схоже прийдеться робити два не повязаних одне з одним блоки, з z-index. І накласти один на одного.
Дякую, але це не те що мені потрібно. Я не хочу робити кнопку для закриття ні в формі ні де інде.
Я хочу зробити, щоб при натисканні на прозору область блок закривався.
І я розумію що можна обьеднати декілька блоків з однією дією, по типу з верху з низу і по бокам цього блоку.
Але не хочется робити Франкенштейна.
ось css:
.Form{
width: 100vw;
height: 100vh;
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.FormBox{
width:700px;
height: 400px;
background-color: rebeccapurple;
}
Тому що FormBox всередині батьківського об'єкту, на якому повішена подія onClick, яка спрацьовує на всьому його контенті.
Зробіть щось типу такого:<div onClick={this.AddApp}>Toggle Collapse</div> <div className="Form"> <div className="FormBox"></div> </div>І не пишіть такі кощунства з селекторами. Використовуйте toogle, на крайній випадок атрибут style зі станом this.state.YourValName, яке підставлятиме потрібне значення.
При натисканні на кнопку display none змінюється на flex.
Розгортається блок, в середині якого інші елементи.
По ідеї блок Form це фоновий блок, при натисканні на який вся форма повинна згортатись.
Але з внутрішніми блоками можна було б працювати.
В моєму ж випадку при натисканні на внутрішній блок FormBox спрацьовує onClick з Form.
Підкажіть будьласка в чому моя помилка.
Бібліотека React
html:
<div className="Form" onClick={this.AddApp}>
<div className="FormBox"></div>
</div>
js:
AddApp(){
var a = document.querySelector(".Form").style.display;
if(a=="flex"){document.querySelector(".Form").style.display="none"}
else {document.querySelector(".Form").style.display="flex"}
};
Сторінки 1