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

【问题标题】：Why my function in html code is not being called?为什么我的 html 代码中的函数没有被调用？
【发布时间】：2021-03-23 01:55:41
【问题描述】：

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

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>

【问题讨论】：

你必须声明变量，例如const toggletoggleCountriesHandler=()=>{}。你错过了 const
@SandrinJoy 不，你没有。如果没有关键字，它会分配一个全局变量。
JavaScript 控制台有错误吗？
好的，谢谢你的信息？？？？ @Barmar
????‍♀️????‍♂️不客气

标签： javascript html css tailwind-css

【解决方案1】：

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

const toggletoggleCountriesHandler=()=>{}

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

【讨论】：