Я работаю над проектом Laravel Livewire, в котором используются TailwindCSS и AlpineJS. Но моя проблема в том, что моя функция setCountry() не вызывается. Я вижу, что параметры передаются правильно, но сама функция не вызывается. Функция toggleCountriesHandler() работает хорошо. Бьюсь об заклад, это что-то у меня под носом, но я до сих пор не могу понять, а я новичок в программировании. Вот мой фрагмент кода:
toggleCountriesHandler = () => {
let toggleCountries = document.getElementById("countriesOpen");
if (toggleCountries.style.display === "none") {
toggleCountries.style.display = "block";
} else {
toggleCountries.style.display = "none";
}
}
setCountry = (country_id, country_code, country_name) => {
document.getElementById("country-id").value = country_id;
document.getElementById("selected-country").innerHTML = "<img class='w-5 h-5 rounded-full' src='img/flags/16/" + country_code + ".png'>" + "<span class='block ml-3 font-normal truncate'>" + country_name + "</span>";
document.getElementById("countriesOpen").style.display = "none";
}<link href = "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css" rel = "stylesheet" />
<span class = "block text-sm font-medium text-gray-700 transform translate-y-5">{{__("Country")}</span>
<div style = "height: 42px;" class = "relative flex items-center justify-center w-full pl-3.5 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<button onclick = "toggleCountriesHandler()" class = "block w-full truncate focus:outline-none">
<label id = "selected-country" class = "flex flex-row items-center text-gray-500">{{__("Select your country")}}</label>
</button>
<div class = "absolute top-0 right-0 w-full mt-12 bg-white rounded-md shadow-lg sm:bg-white">
<input id = "country-id" type = "hidden" name = "country_id">
<ul id = "countriesOpen" style = "display: none;" class = "py-1 overflow-auto text-base rounded-md sm:border max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
@foreach(DB::table('countries')->get() as $country)
<li role = "option" class = "relative ">
<button onclick = "setCountry({{ $country->id }}, '{{ $country->code }}', '{{ $country->name }}')" type = "button" class = "flex items-center w-full py-2 pl-3 space-x-3 cursor-default select-none text-extrading-text-primary sm:text-gray-900 pr-9 focus:outline-none hover:bg-indigo-600 hover:text-white">
<img class = "w-5 h-5 rounded-full" src = "{{ asset('img/flags/16/' . $country->code . '.png') }}">
<span class = "block font-normal truncate">
{{$country->name}}
</span>
</button>
</li>
@endforeach
</ul>
</div>
</div>🤔 А знаете ли вы, что...
JavaScript можно использовать для манипуляции DOM (Document Object Model), что позволяет изменять содержимое и структуру веб-страницы.