Как изменить текст меток при выборе файла в форме с помощью Javascript

спасибо, что посмотрели мой вопрос.

Я задал вопрос, похожий на этот вопрос, по ссылке ниже. К сожалению, ответ приведен в fragmentе кода, но не на моем сайте. Я создал пустой HTML-документ и вставил в него следующий код. Основы того, что я пытаюсь сделать, это. Тег ввода файла будет скрыт с помощью CSS. Затем я использую тег метки, чтобы взять на себя управление входным тегом. Как только файл выбран, я хочу, чтобы имя файла (а не путь) отображалось в метке, а также сохраняло изображение видимым для пользователя. Как было сказано ранее в моем последнем вопросе, я НЕ хочу использовать jQuery. Заранее спасибо за то, что посмотрели мой код и помогли!

Heres мой предыдущий вопрос: Как мне изменить текст ярлыка HTML, как только файл был выбран с помощью Javascript

Сохраняет код в моем файле index2.php:

   var profilePic = document.getElementById('profilepic'); /* finds the input */ function changeLabelText() { var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */ var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */ profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */ var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */ if (profilePicValue !== '') { profilePicLabelText.textContent = profilePicValue; /* changes the label text */ } } profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */    


Поместите в самый конец документа непосредственно перед .

Таким образом, все DOM уже загружены, и вам не нужно будет слушать onload или событие onDOMContentLoaded .

Оглядываясь на ваш предыдущий вопрос, и это ответ. Я вижу, что нет проверки, чтобы увидеть, что DOM загружен. Если вы скопировали и вставляли этот код в ответ, он не должен работать на вашем сайте.

Попробуйте использовать один из них:

 document.addEventListener('DOMContentLoaded', function() { myFunction(); }); 

или

 window.onload = myFunction(); 

или

   

Я рекомендую первый вариант. Вам нужно будет инкапсулировать код, который был написан для вас внутри функции (например, myFunction ();), а затем вызвать его с помощью одного из этих методов. В противном случае код пытается сделать материал для DOM, который еще не загружен.

для разработки: вам нужно поместить свой код внутри функции onload – неважно, как вы его назовете.

  

Я, наконец, с помощью других людей по двум вопросам пришел к выводу. Вот код FINAL, который работает в любом браузере. Спасибо всем за вашу помощь!