input="file"を押したときに2回目からの画像名が上手く取得されない【javascript】

Question

javascript初心者です。
今回input="file"をデザインし、画像を選択した際に画像名が横にでるようにしたいと思いました。
無事出るようにはなったのですが、なぜか2回目から上手く取得しなくなってしまうので、こちらの原因と解決方法をご教授願いたいです。

html

 <div class="file"><label><input type="file" name="img1" size="30">ファイルを選択</label></div>

scss

.file {
    label {
        display: inline-block;
        background: #545454;
        vertical-align: middle;
        position: relative;
        color: #fff;
        margin: 10px;
        line-height: 1.25;
        border: none;
        border-radius: 2px;
        padding: 10px 12px;
        min-height: auto;
        font-size: 14px;
        margin: 0 3px;
        input[type="file"] {
            opacity: 0;
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
            position: absolute;
            right: 0;
            top: 0;
            margin: 0;
            font-size: 18px;
            cursor: pointer;
        }
        &:after {
            content: "選択されていません";
            color: #333;
            font-size: 14px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            right: -135px;
            top: calc(50% - 10px);
        }
        &.changed:after {
            content: "";
        }
    }

javascript

function init() {
	let formInputs = document.querySelectorAll(".file input");
	let length = formInputs.length;
	for (let i = 0; i < formInputs.length; i++) {
		formInputs[i].onchange = function init() {
			let file = this.files[0].name;
			let label = this.parentNode;
			if (!label.classList.contains("changed")) {
				let span = document.createElement("span");
				console.log(span);
				span.className = "filename";
				span.textContent = file;
				label.classList.add("changed");
				label.parentNode.appendChild(span);
			}
		};
	};
};
window.onload = init;

画面の挙動

2回目からはファイル名が変わらない
以上何卒よろしくお願い致します。

Answer 1

一度変更すればchangedのクラスを付与しているので、2回目以降はif (!label.classList.contains("changed"))の条件に当てはまらず、処理から抜けます。

Comments

[kamiya_k]

返信ありがとうございます。
onchange が上手く動いてないと決めつけちゃってました。
ちょっと荒い対応になりますが、if文にelseでの処理を追加して無事対応することができました。
ベストアンサーにさせていただきます。

[kamiya_k]

解決したコード
※やり方が荒いかもしれませんがご了承下さい

function init() {
let formInputs = document.querySelectorAll(".file input");
let length = formInputs.length;
for (let i = 0; i < formInputs.length; i++) {
formInputs[i].onchange = function init() {
let file = this.files[0].name;
let label = this.parentNode;
if (label.className == 'changed') {
this.classList.remove('changed');
}
let span = document.createElement("span");
span.className = "filename";
if (!label.classList.contains("changed")) {
span.textContent = file;
label.classList.add("changed");
let spanCont = label.parentNode.appendChild(span);
} else {
this.parentNode.nextSibling.remove();
span.textContent = file;
let spanCont = label.parentNode.appendChild(span);
}
};
};
};
window.onload = init;