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

Question

我正在做一个使用TailwindCSS和AlpineJS的Laravel Livewire项目。但是我的问题是我的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>

​

Answer 1

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

const toggletoggleCountriesHandler=()=>{}

const通常用于函数声明，因为人们不会更改它。您仍然可以使用var、let进行声明