为什么我在 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 也用于声明

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

Why my function in html code is not being called?

html

javascript

css

tailwind-css