onclick () с несколькими функциями выполняет только первый - PullRequest
Новая
       21

onclick () с несколькими функциями выполняет только первый

0 голосов
/ 12 июня 2018

Я пытаюсь выполнить две функции, но выполняется только первая.Я думаю, что когда я изменяю значение переменной 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);
    };

Кто-нибудь знает, почему он не выполняет все функции?

Ответы [ 3 ]

0 голосов
/ 12 июня 2018

Я предлагаю присоединить только одну функцию к атрибуту 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);
0 голосов
/ 12 июня 2018

В setGeo вы неправильно набрали .getElementById().

Но помимо этого у вас есть тонна кода, который не нужен, и решение, которое хрупко и не будетмасштабируется по мере изменения ваших потребностей.

Вам действительно нужна только одна функция, которая принимает два аргумента - какой элемент показать / скрыть / переключить и какую операцию выполнить с ним (показать / скрыть / переключить).

Кроме того, практика установки обработчиков событий с помощью атрибутов событий HTML - это более чем 25-летний метод, который восходит к тому времени, когда появились веб-стандарты, и есть много причин не делать этогоиспользуйте эту древнюю технику сегодня.Полностью отделите ваш 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>
0 голосов
/ 12 июня 2018

В функции satGeo есть опечатка: 

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


function country_function(){        
        console.log("Inside function 1");
    };

  function setGeo(geoVal) {
    console.log("inside function 2");
  };
<div class="funcionff" onclick="country_function();setGeo(1);">click</div>
...