Почему не удаляется фотография при нажатии на неё?

Question

flstamn @flstamn

JavaScript

Почему не удаляется фотография при нажатии на неё?

Написан код для добавления картинки и ее удаления при нажатии на нее,из массива 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('');
};

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>

Вопрос задан 04 апр.
138 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

flstamn @flstamn Автор вопроса

вот полный 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('');
};

Вот. 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>

Написано 04 апр.

robothot @robothot

Ну у тебя проблема в названии атрибута name по которому ты обращаешься. А именно в поиске по классу.
Ты сам подумай, ты обращаешься к .classname.jpeg
Js думает, что ты ищешь объект с классом class='имя класса расширение'.
Намудрил конечно... Присвой нормальное имя изображению и обратись к нему по этому имени и все у тебя удалится. Только что все проверил

Написано 04 апр.

robothot @robothot

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

Написано 04 апр.

flstamn @flstamn Автор вопроса

robothot, спасибо большое тебе

Написано 04 апр.

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Средний
Писал ли кто-то автотесты с помощью Cypress по виджетам на amCharts 5? Можете помочь разъяснить структуру и синтаксис этого дела?
- 1 подписчик
- 21 минуту назад
- 5 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как решить проблему сохранения данных в React?
- 1 подписчик
- час назад
- 16 просмотров
0

ответов
JavaScript

Простой
Как не прекращая цикл пройтись?
- 1 подписчик
- 2 часа назад
- 39 просмотров
0

ответов
JavaScript

Средний
Можно ли прописать формулу расчёта с нефиксированной скидкой?
- 1 подписчик
- 3 часа назад
- 45 просмотров
1

ответ
JavaScript

Простой
Как инициировать скрипт при определенной ширине экрана?
- 1 подписчик
- 6 часов назад
- 40 просмотров
1

ответ
JavaScript

Простой
Как задать тригер onchange при изменении value?
- 1 подписчик
- 7 часов назад
- 48 просмотров
1

ответ
JavaScript

Средний
Как можно менять ::backdrop через JS?
- 1 подписчик
- 8 часов назад
- 47 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Не могу понять почему не работает код Apps Script?
- 1 подписчик
- 9 часов назад
- 47 просмотров
0

ответов
JavaScript

Простой
Как в этой задаче работает вложенный цикл?
- 1 подписчик
- 9 часов назад
- 93 просмотра
1

ответ
JavaScript

Простой
Как вывести правильный формат даты в JS?
- 1 подписчик
- 10 часов назад
- 95 просмотров
2

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Разместить шаблон сайта с личным кабинетом под хостинг серверов

28 нояб. 2024, в 00:33

5000 руб./за проект

Нужно записать видео уроки по машинному обучению

28 нояб. 2024, в 00:20

2400 руб./за проект

Внесение изменений в Open Source Delphi программу

27 нояб. 2024, в 23:27

8000 руб./за проект

Answer 1 · 2024-04-04 19:15:08

Ты посмотри в консоль, она же тебе пишет

Uncaught ReferenceError: array_for_flask is not defined

Ты обращаешься к array_for_flask, а у тебя она не объявлена, соответственно все что дальше вообще не выполняется. Не знаю какая картинка у тебя там появляется...
Этот код не работает. Либо, если не полный скинул, то кидай остальное

Почему не удаляется фотография при нажатии на неё?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт