为什么我的 html 代码中的 function 没有被调用？

Question

我正在开发一个使用 TailwindCSS 和 AlpineJS 的 Laravel Livewire 项目。 但我的问题是关于我的 setCountry() function 没有被调用。 我可以看到参数被正确传递，但 function 本身没有被调用。 toggleCountriesHandler() function 运行良好。 我敢打赌这是我眼皮底下的东西，但我仍然无法弄清楚，而且我是编程的初学者。 这是我的代码片段：

 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>

Answer 1

我发布我的评论作为结束这个问题的答案。

const toggletoggleCountriesHandler=()=>{}

const通常用于 function 声明，因为人们不会更改它。 你仍然可以使用var ， let也用于声明