Как заменить картинку при помощи скрипта, после выполнения условия?

Question

[Soer44]

Есть два инпута для файлов в форме картинок.
Нажимаешь на картинку, появляется окно для загрузки файла, выбираешь файл, нажимаешь ОК и картинка должна поменяться. Как такое можно сделать?
Вот у меня есть два инпута:

<div class="input__wrapper">
							<input type="file" name="file" id="input__file" class="input input__file">
							<label for="input__file" class="input__file-button"><img class="input__file-icon" src="img/cart1.png"
									alt=""></label>

							<input type="file" name="file" id="input__file" class="input input__file">
							<label for="input__file" class="input__file-button"><img class="input__file-icon" src="img/cart2.png"
									alt=""></label>
						</div>

В стилях всё скрыто, так что инпуты выглядят как картинки. Нажимая на них и загружая файл, нужно поменять начальную картинку на другую.

Вешаю обработчик события и скрытие элемента и ничего не работает:

let inputs = document.querySelectorAll('.input__file');
    Array.prototype.forEach.call(inputs, function (input) {
      let label = input.nextElementSibling,
        labelVal = label.document.getElementById("input__file-icon").style.display='none';
	  }
	)

Answer 1

[LJ322]

У вас на лейбле класс, а не айдишник висит. И вы неправильно к потомку обращаетесь:

let inputs = document.querySelectorAll('.input__file');
inputs.forEach(function (input) {
  input.addEventListener('change', function() {
    let label = this.nextElementSibling;
    let image = label.children[0]
    image.style.display = "none:
  }
);

Comments

[Soer44]

поменял всё равно не работает(

[LJ322]

Soer44, я поправил

[Soer44]

let input = document.querySelectorAll('.input__file');
    Array.prototype.forEach.call(inputs, function (input) {
      let label = input.nextElementSibling,
	  labelVal = label.children[0].style.display='none';
	  }
	)

Всё равно картинка не исчезает(

[LJ322]

Soer44, а у вас обработчика вообще нет?

let inputs = document.querySelectorAll('.input__file');
inputs.forEach(function (input) {
  input.addEventListener('change', function() {
    let label = this.nextElementSibling;
    let image = label.children[0]
    image.style.display = "none:
  }
);

[Soer44]

LJ322,

<script>
let inputs = document.querySelectorAll('.input__file');
Array.prototype.forEach.call(inputs, function (input) {
  input.addEventListener('change', function() {
          let label = this.nextElementSibling;
          label.children[0].style.display = "none";
      })
	})


</script>

Вот такой код заработал!!! Но исчезает один инпут. Второй так и остаётся. Подскажите, как прописать чтобы инпут не исчезал, а на месте него появлялась другая картинка?

[Soer44]

LJ322,
image.style.display = "none"
Как в этой строчке прописать не исчезание, а замену картинки?

[LJ322]

Soer44, 2 часть, там очень подробная инструкция как пользоваться браузерным API

[Soer44]

LJ322, посмотрел, но не нашёл ответа по замене....

[Soer44]

LJ322, решил. Вопрос не актуален) Спасибо за помощь выше, вы очень мне помогли разобраться.

Answer 2

[Soer44]

Для замены картинки:

<script>
let inputs = document.querySelectorAll('.input__file1');
Array.prototype.forEach.call(inputs, function (input) {
  input.addEventListener('change', function() {
          let label = this.nextElementSibling;
          label.children[0].src="img/activecart1.png";
      })
	})

	let inpts = document.querySelectorAll('.input__file2');
Array.prototype.forEach.call(inpts, function (input) {
  input.addEventListener('change', function() {
          let label = this.nextElementSibling;
          label.children[0].src="img/activecart2.png";
      })
	})


</script>