Nie uruchamia się kod JS w szablonie Twig

Hej,

czy jest ktoś w stanie mi powiedzieć dlaczego skrypt JS nie działa, nie ma żadnej reakcji w przeglądarce, również konsola nie pokazuje żadnych błędów

{% extends 'base.html.twig' %}

{% block title %}
	Dodaj nowy plik
{% endblock %}

{% block body %}
	<div class="my-14">
		<h1 class="text-4xl">Nowy plik</h1>
		<div class="w-full">
			<div class="mb-6">

				{# <form method="POST" action="{{ path('posts.new') }}" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"> #}
				{{ form_start(form, {'attr': {'class': 'bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4'}}) }}


				<div class="mb-6">
					{# {{ form_label(form.file, 'Wybierz plik do wysłania', {'label_attr': {'class': 'block text-gray-700 font-bold mb-2'}})}} #}

					{{ form_widget(form.file, {'attr': 
                        {
                            'class': 'shadow appearance-none border rounded w-full
							py-2 px-3 text-gray-700 mb-2 leading-tight focus:outline-none focus:shadow-outline'
                        }, 
                        'value':'',
						'id': 'fileInput',
						'onchange': 'updateFileName()'
                        }
                        ) 
                        }}

				</div>


				<div class="mb-6">
					{{ form_label(form.name, 'File name', {'label_attr': {'class': 'block text-gray-700 font-bold mb-2'}}) }}

					{% set name_error = form_errors(form.name) ? 'border-red-500' : '' %}

					{{ form_widget(form.name, {'attr':
                            {
                                'class': 'shadow appearance-none border rounded w-full
                        py-2 px-3 text-gray-700 mb-2 leading-tight focus:outline-none focus:shadow-outline', 
                                
                                'placeholder':'write file name here',
								'id': 'name'
                                }
                                }
                                ) 
                                }}
					{% if form.name.vars['errors']|length > 0 %}
						<p class="text-red-500 text-xs italic">
							{% for error in form.name.vars['errors'] %}
								<span>{{error.message}}</span>
							{% endfor %}
						</p>
					{% endif %}
				</div>

				<div class="mb-6">
					{{ form_label(form.path, 'File path', {'label_attr': {'class': 'block text-gray-700 font-bold mb-2'}}) }}

					{% set path_error = form_errors(form.path) ? 'border-red-500' : '' %}

					{{ form_widget(form.path, {'attr':
                        {
                            'class': (path_error)~'shadow appearance-none border rounded w-full
                    py-2 px-3 text-gray-700 mb-2 leading-tight focus:outline-none focus:shadow-outline', 
                            'value':'',
                            'placeholder':'write path file here',
							'id': 'file_path'
                            }
                            }
                            ) 
                            }}
					{% if form.path.vars['errors']|length > 0 %}

						<p class="text-red-500 text-xs italic">

							{% for error in form.path.vars['errors'] %}
								<span>{{error.message}}</span>
							{% endfor %}

						</p>

					{% endif %}
				</div>

				<div class="mb-6">
					{{ form_label(form.description, 'File description', {'label_attr': {'class': 'block text-gray-700 font-bold mb-2'}})}}
					{% set description_error = form_errors(form.description) ? 'border-red-500' : '' %}
					{{ form_widget(form.description, {'attr': 
                        {
                            'class': 'drop-shadow-lg w-full h-60 p-4 border 
                                    focus:outline-none focus:shadow-outline',
                            'placeholder':'write post content here'
                        }, 
                        'value':''
                        }
                        ) 
                        }}
					{% if form.description.vars['errors']|length > 0 %}
						<p class="text-red-500 text-xs italic">
							{% for error in form.description.vars['errors'] %}
								<span>{{error.message}}</span>
							{% endfor %}
						</p>
					{% endif %}

				</div>
				<div class="mb-6">
					{{ form_label(form.fileToCompany, 'Company name', {'label_attr': {'class': 'block text-gray-700 font-bold mb-2'}}) }}

					{% set name_error = form_errors(form.fileToCompany) ? 'border-red-500' : '' %}

					{{ form_widget(form.fileToCompany, {'attr':
                            {
                                'class': 'shadow appearance-none border rounded w-full
                        py-2 px-3 text-gray-700 mb-2 leading-tight focus:outline-none focus:shadow-outline', 
                                'value':'',
                                'placeholder':'write file name here',
								'id': 'fileToCompany'
                                }
                                }
                                ) 
                                }}
					{% if form.fileToCompany.vars['errors']|length > 0 %}
						<p class="text-red-500 text-xs italic">
							{% for error in form.fileToCompany.vars['errors'] %}
								<span>{{error.message}}</span>
							{% endfor %}
						</p>
					{% endif %}
				</div>

				<div class="flex justify-center">
					{{ form_widget(form.save, {'attr': {'class': 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4
                rounded cursor-pointer '}}) }}
				</div>


				

				{{ form_end(form) }}
{# 
				 <script>
				    function updateFileName() {
				        const selectedFile = document.getElementById('fileInput').files[0];
				        if (selectedFile) {
				            // Ustaw pole 'name' na nazwę pliku bez rozszerzenia
				            const fileNameWithoutExtension = selectedFile.name.replace(/\.[^/.]+$/, '');
				            document.getElementById('name').value = fileNameWithoutExtension;
				        }
				    }
				</script> #}

			</div>
		</div>

		 <script>
			function updateFileName() {
    const selectedFile = document.getElementById('fileInput');
    const fileNameField = document.getElementById('name');
    
    if (selectedFile && fileNameField) {
        const selectedFile = selectedFile.files[0];
        if (selectedFile) {
            // Ustaw pole 'name' na nazwę pliku bez rozszerzenia
            const fileNameWithoutExtension = selectedFile.name.replace(/\.[^/.]+$/, '');
            fileNameField.value = fileNameWithoutExtension;
        }
    }
}
    </script>

	{% endblock %}

dodam że korzystam z tailwind, symfony6

A jaki jest wynikowy HTML?

{# #} To są bloki komentarzy, czy zakomentowałeś ten skrypt.
Zrób porządek przede wszystkim.
W tym drugim miejscu gdzie masz kod szukasz elementu o id name. Może po prostu nie widzę go w tym gąszczu tekstu bez formatowania, ale chyba nie ma takiego elementu.

LukeJL napisał(a):

A jaki jest wynikowy HTML?

Nie za bardzo wiem o co chodzi z tym wynikowym HTML, formularz wyświetla się prawidłowo, po wybraniu pliku z dysku nie podstawia się nazwa w label o id name, a za to powinien odpowiadać skrypt. Consola w przeglądarce nie pokazuje żadnych błędów.

@LukeJL: jeden skrypt jest zakomentowany jednak pod spodem jest jeszcze jeden, a pole o id name jest w drugim labelu wstawionym w formularzu.

Dobra. To może inaczej.
gdy Twój kod wygląda jak kupa - debuguj przez console.log('pupa')
wywołanie funkcji w js masz on.chnage. postaw sobie console.log('aaa') w pierwszej linijce wewnątrz funkcji js i zobacz czy w ogóle wchodzi tutaj.
zrób sobie console.log wartości tych pól i zoabcz co się dzieje też.

jurek1980 napisał(a):

Dobra. To może inaczej.
gdy Twój kod wygląda jak kupa - debuguj przez console.log('pupa')
wywołanie funkcji w js masz on.chnage. postaw sobie console.log('aaa') w pierwszej linijce wewnątrz funkcji js i zobacz czy w ogóle wchodzi tutaj.
zrób sobie console.log wartości tych pól i zoabcz co się dzieje też.

wywołanie console.log() działa, pokazuje mi informacje po odświeżeniu strony, także skrypt jest zaczytywany

rchudy napisał(a):

Nie za bardzo wiem o co chodzi z tym wynikowym HTML, formularz wyświetla się prawidłowo, po wybraniu pliku z dysku nie podstawia się nazwa w label o id name, a za to powinien odpowiadać skrypt. Consola w przeglądarce nie pokazuje żadnych błędów.

Chodzi mi o to, co wyświetla się w przeglądarce internetowej, po tym jak wybierzesz z menu "pokaż źródło".
To, co wrzuciłeś, to szablon po stronie serwera, który dopiero musi być przemielony i wysłany internetem, żeby przeglądarka go mogła dostać i dopiero na tym etapie będzie można odpalić JavaScript.

Bo może problem jest w szablonie.