Почему не удаляется фотография при нажатии на неё?
Написан код для добавления картинки и ее удаления при нажатии на нее,из массива array_for_flask она удаляется,а со страницы нет.
JS
const buttonSelect = document.querySelector('.upload-files'); const fileInput = document.querySelector('.file-input'); buttonSelect.addEventListener('click', ()=>{ fileInput.click() $('.img-container').css('display', 'flex') }); fileInput.addEventListener('change', (event)=>{ event.preventDefault(); array_for_flask.push(...fileInput.files); ShowFiles(); }); function del(name) { const name_img = name.getAttribute('name'); const index = array_for_flask.findIndex(element => element.name === name_img); $(`#${name_img}`).outerHTML = ""; array_for_flask.splice(index, 1); console.log(array_for_flask) }; function ShowFiles(){ const UploadDiv = document.querySelector('.img-container'); UploadDiv.innerHTML = array_for_flask.map(images =>{ const fileReader = new FileReader(); const id = `F-${Math.random().toString(32).substring(7)}`; fileReader.readAsDataURL(images); fileReader.onload = ()=>{ const url = fileReader.result; const name_img = images.name; const img = ` <img id = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'> `; UploadDiv.innerHTML +=img; }; }).join(''); }; |
const buttonSelect = document.querySelector('.upload-files'); const fileInput = document.querySelector('.file-input'); buttonSelect.addEventListener('click', ()=>{ fileInput.click() $('.img-container').css('display', 'flex') }); fileInput.addEventListener('change', (event)=>{ event.preventDefault(); array_for_flask.push(...fileInput.files); ShowFiles(); }); function del(name) { const name_img = name.getAttribute('name'); const index = array_for_flask.findIndex(element => element.name === name_img); $(`#${name_img}`).outerHTML = ""; array_for_flask.splice(index, 1); console.log(array_for_flask) }; function ShowFiles(){ const UploadDiv = document.querySelector('.img-container'); UploadDiv.innerHTML = array_for_flask.map(images =>{ const fileReader = new FileReader(); const id = `F-${Math.random().toString(32).substring(7)}`; fileReader.readAsDataURL(images); fileReader.onload = ()=>{ const url = fileReader.result; const name_img = images.name; const img = ` <img id = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'> `; UploadDiv.innerHTML +=img; }; }).join(''); };
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div class = 'logo' id = 'navbar'> <h1>Ayesha</h1> </div> <section class="instruction"> <div class="text-block"> <h1>Admin</h1> </div> <div class="pic-block"> </div> </section> <div class ='card'> <div class="text-in-card"> <h1>New Coth</h1> </div> <div class="name-cloth"> <ion-icon id = 'name-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'name' type="text" value="" class="some-input" placeholder="name"> <ion-icon name="shirt-outline" class = 'icons-inp'></ion-icon> </div> <div class="description-cloth"> <ion-icon id = 'desc-error' name="alert-circle-outline" class = 'error'></ion-icon> <textarea id = 'desc' placeholder="description" id="" cols="30" rows="1" maxlength="50"></textarea> <ion-icon name="document-text-outline" class = 'icons-inp'></ion-icon> </div> <div class="count-cloth" > <ion-icon id = 'count-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'count' type="text" value="" class="some-input" placeholder="count"> <ion-icon name="layers-outline" class = 'icons-inp'></ion-icon> </div> <div class="price-cloth" > <ion-icon id = 'price-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'price' type="text" value="" class="some-input" placeholder="price"> <ion-icon name="card-outline" class = 'icons-inp'></ion-icon> </div> <div class = 'img-container'> </div> <div class="upload"> <button class = 'upload-files'><ion-icon name="images-outline"></ion-icon></button> <input class = 'file-input' type="file" name = 'files' multiple accept='image/*' hidden> <button class="upload-btn"> Upload </button> </div> </div> <div class="social-media"> <ion-icon class = 'git' name="logo-github"></ion-icon> <ion-icon class = 'vk' name="logo-vk"></ion-icon> <ion-icon class = 'ds' name="logo-discord"></ion-icon> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <script src="static/js/script.js"></script> </body> </html> |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div class = 'logo' id = 'navbar'> <h1>Ayesha</h1> </div> <section class="instruction"> <div class="text-block"> <h1>Admin</h1> </div> <div class="pic-block"> </div> </section> <div class ='card'> <div class="text-in-card"> <h1>New Coth</h1> </div> <div class="name-cloth"> <ion-icon id = 'name-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'name' type="text" value="" class="some-input" placeholder="name"> <ion-icon name="shirt-outline" class = 'icons-inp'></ion-icon> </div> <div class="description-cloth"> <ion-icon id = 'desc-error' name="alert-circle-outline" class = 'error'></ion-icon> <textarea id = 'desc' placeholder="description" id="" cols="30" rows="1" maxlength="50"></textarea> <ion-icon name="document-text-outline" class = 'icons-inp'></ion-icon> </div> <div class="count-cloth" > <ion-icon id = 'count-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'count' type="text" value="" class="some-input" placeholder="count"> <ion-icon name="layers-outline" class = 'icons-inp'></ion-icon> </div> <div class="price-cloth" > <ion-icon id = 'price-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'price' type="text" value="" class="some-input" placeholder="price"> <ion-icon name="card-outline" class = 'icons-inp'></ion-icon> </div> <div class = 'img-container'> </div> <div class="upload"> <button class = 'upload-files'><ion-icon name="images-outline"></ion-icon></button> <input class = 'file-input' type="file" name = 'files' multiple accept='image/*' hidden> <button class="upload-btn"> Upload </button> </div> </div> <div class="social-media"> <ion-icon class = 'git' name="logo-github"></ion-icon> <ion-icon class = 'vk' name="logo-vk"></ion-icon> <ion-icon class = 'ds' name="logo-discord"></ion-icon> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <script src="static/js/script.js"></script> </body> </html>
Дополнительно:
Ты посмотри в консоль, она же тебе пишет
Uncaught ReferenceError: array_for_flask is not defined |
Uncaught ReferenceError: array_for_flask is not defined
Ты обращаешься к array_for_flask, а у тебя она не объявлена, соответственно все что дальше вообще не выполняется. Не знаю какая картинка у тебя там появляется...
Этот код не работает. Либо, если не полный скинул, то кидай остальное
- вот полный js, сорян что не сразу кинул
jQuery(function ($) { function fix_size() { var images = $('.img-container img'); images.each(setsize); function setsize() { var img = $(this), img_dom = img.get(0), container = img.parents('.img-container'); if (img_dom.complete) { resize(); } else img.one('load', resize); function resize() { if ((container.width() / container.height()) < (img_dom.width / img_dom.height)) { img.width('100%'); img.height('auto'); return; } img.height('100%'); img.width('auto'); } } } $(window).on('resize', fix_size); fix_size(); }); let array_for_flask = []; const textarea = document.querySelector('textarea'); textarea.addEventListener( 'input', autosize ); function autosize(){ this.style.height = 'auto'; let applyNow = this.style.offsetHeight; this.style.height = this.scrollHeight - 20 + 'px'; } // check nonable placeholder and input after set display block for button let button = document.querySelector('.upload-btn'); button.addEventListener('click', ()=>{ let cloth_name = document.getElementById('name').value; let cloth_desc = document.getElementById('desc').value; let cloth_count = document.getElementById('count').value; let cloth_price = document.getElementById('price').value; nonable_inputs = { 'name-error':cloth_name, 'desc-error':cloth_desc, 'count-error':cloth_count, 'price-error':cloth_price, }; for (let key in nonable_inputs){ if (nonable_inputs[key] == ''){ setTimeout( () => { document.getElementById(key).style.visibility = 'visible' }, 0); setTimeout( () => { document.getElementById(key).style.visibility = 'hidden' }, 1500); }; }; if (cloth_name != '' && cloth_desc != '' && cloth_count != '' && cloth_price != ''){ for (let key in nonable_inputs){ array_for_flask.push(nonable_inputs[key]); }; console.log(array_for_flask) }; }); const buttonSelect = document.querySelector('.upload-files'); const fileInput = document.querySelector('.file-input'); buttonSelect.addEventListener('click', ()=>{ fileInput.click() $('.img-container').css('display', 'flex') }); fileInput.addEventListener('change', (event)=>{ event.preventDefault(); array_for_flask.push(...fileInput.files); ShowFiles(); }); function del(name) { const name_img = name.getAttribute('name'); const index = array_for_flask.findIndex(element => element.name === name_img); $(`.${name_img}`).remove(); array_for_flask.splice(index, 1); console.log(array_for_flask) }; function ShowFiles(){ const UploadDiv = document.querySelector('.img-container'); UploadDiv.innerHTML = array_for_flask.map(images =>{ const fileReader = new FileReader(); const id = `F-${Math.random().toString(32).substring(7)}`; fileReader.readAsDataURL(images); fileReader.onload = ()=>{ const url = fileReader.result; const name_img = images.name; const img = ` <img class = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'> `; UploadDiv.innerHTML +=img; }; }).join(''); };
jQuery(function ($) { function fix_size() { var images = $('.img-container img'); images.each(setsize); function setsize() { var img = $(this), img_dom = img.get(0), container = img.parents('.img-container'); if (img_dom.complete) { resize(); } else img.one('load', resize); function resize() { if ((container.width() / container.height()) < (img_dom.width / img_dom.height)) { img.width('100%'); img.height('auto'); return; } img.height('100%'); img.width('auto'); } } } $(window).on('resize', fix_size); fix_size(); }); let array_for_flask = []; const textarea = document.querySelector('textarea'); textarea.addEventListener( 'input', autosize ); function autosize(){ this.style.height = 'auto'; let applyNow = this.style.offsetHeight; this.style.height = this.scrollHeight - 20 + 'px'; } // check nonable placeholder and input after set display block for button let button = document.querySelector('.upload-btn'); button.addEventListener('click', ()=>{ let cloth_name = document.getElementById('name').value; let cloth_desc = document.getElementById('desc').value; let cloth_count = document.getElementById('count').value; let cloth_price = document.getElementById('price').value; nonable_inputs = { 'name-error':cloth_name, 'desc-error':cloth_desc, 'count-error':cloth_count, 'price-error':cloth_price, }; for (let key in nonable_inputs){ if (nonable_inputs[key] == ''){ setTimeout( () => { document.getElementById(key).style.visibility = 'visible' }, 0); setTimeout( () => { document.getElementById(key).style.visibility = 'hidden' }, 1500); }; }; if (cloth_name != '' && cloth_desc != '' && cloth_count != '' && cloth_price != ''){ for (let key in nonable_inputs){ array_for_flask.push(nonable_inputs[key]); }; console.log(array_for_flask) }; }); const buttonSelect = document.querySelector('.upload-files'); const fileInput = document.querySelector('.file-input'); buttonSelect.addEventListener('click', ()=>{ fileInput.click() $('.img-container').css('display', 'flex') }); fileInput.addEventListener('change', (event)=>{ event.preventDefault(); array_for_flask.push(...fileInput.files); ShowFiles(); }); function del(name) { const name_img = name.getAttribute('name'); const index = array_for_flask.findIndex(element => element.name === name_img); $(`.${name_img}`).remove(); array_for_flask.splice(index, 1); console.log(array_for_flask) }; function ShowFiles(){ const UploadDiv = document.querySelector('.img-container'); UploadDiv.innerHTML = array_for_flask.map(images =>{ const fileReader = new FileReader(); const id = `F-${Math.random().toString(32).substring(7)}`; fileReader.readAsDataURL(images); fileReader.onload = ()=>{ const url = fileReader.result; const name_img = images.name; const img = ` <img class = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'> `; UploadDiv.innerHTML +=img; }; }).join(''); };
Вот. HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div class = 'logo' id = 'navbar'> <h1>Ayesha</h1> </div> <section class="instruction"> <div class="text-block"> <h1>Admin</h1> </div> <div class="pic-block"> </div> </section> <div class ='card'> <div class="text-in-card"> <h1>New Coth</h1> </div> <div class="name-cloth"> <ion-icon id = 'name-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'name' type="text" value="" class="some-input" placeholder="name"> <ion-icon name="shirt-outline" class = 'icons-inp'></ion-icon> </div> <div class="description-cloth"> <ion-icon id = 'desc-error' name="alert-circle-outline" class = 'error'></ion-icon> <textarea id = 'desc' placeholder="description" id="" cols="30" rows="1" maxlength="50"></textarea> <ion-icon name="document-text-outline" class = 'icons-inp'></ion-icon> </div> <div class="count-cloth" > <ion-icon id = 'count-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'count' type="text" value="" class="some-input" placeholder="count"> <ion-icon name="layers-outline" class = 'icons-inp'></ion-icon> </div> <div class="price-cloth" > <ion-icon id = 'price-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'price' type="text" value="" class="some-input" placeholder="price"> <ion-icon name="card-outline" class = 'icons-inp'></ion-icon> </div> <div class = 'img-container'> </div> <div class="upload"> <button class = 'upload-files'><ion-icon name="images-outline"></ion-icon></button> <input class = 'file-input' type="file" name = 'files' multiple accept='image/*' hidden> <button class="upload-btn"> Upload </button> </div> </div> <div class="social-media"> <ion-icon class = 'git' name="logo-github"></ion-icon> <ion-icon class = 'vk' name="logo-vk"></ion-icon> <ion-icon class = 'ds' name="logo-discord"></ion-icon> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <script src="static/js/script.js"></script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div class = 'logo' id = 'navbar'> <h1>Ayesha</h1> </div> <section class="instruction"> <div class="text-block"> <h1>Admin</h1> </div> <div class="pic-block"> </div> </section> <div class ='card'> <div class="text-in-card"> <h1>New Coth</h1> </div> <div class="name-cloth"> <ion-icon id = 'name-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'name' type="text" value="" class="some-input" placeholder="name"> <ion-icon name="shirt-outline" class = 'icons-inp'></ion-icon> </div> <div class="description-cloth"> <ion-icon id = 'desc-error' name="alert-circle-outline" class = 'error'></ion-icon> <textarea id = 'desc' placeholder="description" id="" cols="30" rows="1" maxlength="50"></textarea> <ion-icon name="document-text-outline" class = 'icons-inp'></ion-icon> </div> <div class="count-cloth" > <ion-icon id = 'count-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'count' type="text" value="" class="some-input" placeholder="count"> <ion-icon name="layers-outline" class = 'icons-inp'></ion-icon> </div> <div class="price-cloth" > <ion-icon id = 'price-error' name="alert-circle-outline" class = 'error'></ion-icon> <input id = 'price' type="text" value="" class="some-input" placeholder="price"> <ion-icon name="card-outline" class = 'icons-inp'></ion-icon> </div> <div class = 'img-container'> </div> <div class="upload"> <button class = 'upload-files'><ion-icon name="images-outline"></ion-icon></button> <input class = 'file-input' type="file" name = 'files' multiple accept='image/*' hidden> <button class="upload-btn"> Upload </button> </div> </div> <div class="social-media"> <ion-icon class = 'git' name="logo-github"></ion-icon> <ion-icon class = 'vk' name="logo-vk"></ion-icon> <ion-icon class = 'ds' name="logo-discord"></ion-icon> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <script src="static/js/script.js"></script> </body> </html>
- Ну у тебя проблема в названии атрибута name по которому ты обращаешься. А именно в поиске по классу.
Ты сам подумай, ты обращаешься к .classname.jpeg
Js думает, что ты ищешь объект с классом class='имя класса расширение'.
Намудрил конечно... Присвой нормальное имя изображению и обратись к нему по этому имени и все у тебя удалится. Только что все проверил -
function ShowFiles(){ const UploadDiv = document.querySelector('.img-container'); UploadDiv.innerHTML = array_for_flask.map(images =>{ const fileReader = new FileReader(); const id = `F-${Math.random().toString(32).substring(7)}`; fileReader.readAsDataURL(images); fileReader.onload = ()=>{ const url = fileReader.result; const name_img = images.name; <--------- МЕНЯЕМ НА 'load_img' const img = ` <img class = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'> `; UploadDiv.innerHTML +=img; }; }).join(''); };
function ShowFiles(){ const UploadDiv = document.querySelector('.img-container'); UploadDiv.innerHTML = array_for_flask.map(images =>{ const fileReader = new FileReader(); const id = `F-${Math.random().toString(32).substring(7)}`; fileReader.readAsDataURL(images); fileReader.onload = ()=>{ const url = fileReader.result; const name_img = images.name; <--------- МЕНЯЕМ НА 'load_img' const img = ` <img class = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'> `; UploadDiv.innerHTML +=img; }; }).join(''); };
И правим функцию del
function del(name) { const name_img = name.getAttribute('name'); const index = array_for_flask.findIndex(element => element.name === name_img); $('.load_img').remove(); <--------------------------- array_for_flask.splice(index, 1); };
function del(name) { const name_img = name.getAttribute('name'); const index = array_for_flask.findIndex(element => element.name === name_img); $('.load_img').remove(); <--------------------------- array_for_flask.splice(index, 1); };
- robothot, спасибо большое тебе
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы разобраться в причинах того, почему фотография не удаляется при нажатии на неё, следует пройти несколько шагов по диагностике проблемы.
1. Проверьте JavaScript: Первым делом необходимо убедиться, что JavaScript корректно настроен на вашем сайте. Возможно, есть конфликт с другими скриптами или ошибка в самом скрипте, который отвечает за удаление фотографии.
2. Проверьте HTML: Убедитесь, что у элемента фотографии есть правильно прописанный атрибут onclick, который должен вызывать функцию удаления фотографии. Также убедитесь, что этот элемент находится внутри тега , чтобы была возможность нажатия на него.
3. Проверьте CSS: Иногда стили могут перекрывать функциональность элемента. Убедитесь, что нет никаких свойств, которые могут блокировать действие по удалению фотографии при нажатии.
4. Проверьте серверную часть: Возможно, проблема кроется не только в клиентской части кода, но и в серверной. Убедитесь, что при нажатии на фотографию отправляется правильный запрос на сервер для удаления файла.
5. Логи ошибок: Проверьте логи ошибок, как на клиентской стороне (console в DevTools), так и на серверной стороне (логи сервера). Возможно, там содержится информация о возможной причине проблемы.
Проанализировав все эти аспекты, вы сможете выявить причину того, почему фотография не удаляется при нажатии на неё и принять меры для её исправления. Важно также тестировать изменения после каждого исправления, чтобы убедиться, что проблема действительно была решена.