Question

我正在尝试执行两个函数，但它只执行第一个函数。我认为当我更改HTML变量值时，javascript会停止执行。

这是我正在执行的代码： HTML：

<div class="funcion" onclick="country_function();setGeo(1)">

JavaScript的：

function country_function(){        
        region_hide();
        class_hide();
        country_show();
    };

function country_show(){
        var popup = document.getElementById("countrypopmenu");
        popup.classList.toggle("show");
    };
    function country_hide(){
        var popup = document.getElementById("countrypopmenu");
        popup.classList.toggle("hidden");
    };
    function region_show(){
        var popup = document.getElementById("regionpopmenu");
        popup.classList.toggle("show");
    };
    function region_hide(){
        var popup = document.getElementById("regionpopmenu");
        popup.classList.toggle("hidden");
    };
    function class_show(){
        var popup = document.getElementById("classpopmenu");
        popup.classList.toggle("show");
    };
    function class_hide(){
        var popup = document.getElementById("classpopmenu");
        popup.classList.toggle("hidden");
    };

    function setGeo(geoVal) {
      document.getElementByID('geodata').value= geoVal;
      window.alert(geoVal);
    };

有谁知道为什么它不执行所有功能？

Answer 1

satGeo函数中有一个拼写错误：

 document.getElementById('geodata').value= geoVal;

＆＃13;

function country_function(){        
        console.log("Inside function 1");
    };

  function setGeo(geoVal) {
    console.log("inside function 2");
  };

＆＃13;

<div class="funcionff" onclick="country_function();setGeo(1);">click</div>

＆＃13;

Answer 2

在setGeo中，您错误地大写.getElementById()。

但是，除此之外，您还有大量不需要的代码，而且解决方案很脆弱，无法随着需求的变化而扩展。

你真的只需要一个带有两个参数的函数 - 要显示/隐藏/切换的元素以及要对其执行的操作（显示/隐藏/切换）。

此外，通过HTML事件属性设置事件处理程序的做法是一项25年以上的技术，可以追溯到有Web标准和 there are many reasons 之前不使用这个古老的技术今天。完全将您的JavaScript与HTML分开，并使用现代标准进行事件配置。

// Get your DOM references 
var f = document.querySelector(".function");
var c = document.querySelector(".country");
var r = document.querySelector(".region");
var l = document.querySelector(".locale");

// Set up your event handlers in JavaScript, not HTML
f.addEventListener("click", function(){
  // Just call the single function as many times as needed
  // with the appropriate arguments each time:
  showHideToggle(c,"show");
  showHideToggle(r,"hide");
  showHideToggle(l,"toggle");
});

// One function to do all operations
function showHideToggle(element, operation){
 // For show/hide/toggle operations just do the right
 // thing with the "hidden" class. 
 switch (operation.toLowerCase()) {
   case "show":
     element.classList.remove("hidden");
     break;
   case "hide":
     element.classList.add("hidden");
     break;
   default:
     element.classList.toggle("hidden");
     break;      
 }
}

div { opacity:1; transition:all 1s;  }
.function { cursor:pointer; user-select:none; margin:1em; }
.hidden { opacity:0; }

<div class="function">Click Me</div>
<div class="country hidden">Country</div>
<div class="region">Region</div>
<div class="locale hidden">Locale</div>

Answer 3

我建议只将一个函数附加到onclick属性，然后在该事件处理程序中执行所需数量的函数。

例如：

<div class="function" onclick="onFunctionButtonClick()"></div>

function onFunctionButtonClick () {
  region_hide();
  class_hide();
  country_show();
  setGeo(1);
}

甚至可以将侦听器逻辑放在JavaScript中，这样您就可以使HTML远离主应用程序逻辑并拥有更清晰的HTML。

<div class="function"></div>

var functionButton = document.getElementsByClassName('function')[0];
functionButton.addEventListener('click', onFunctionButtonClick);

具有多个功能的onclick（）仅执行第一个

3 个答案: