Событие Onclick для тега <a>необходимо дважды щелкнуть

Question

Почему мне нужно дважды щелкнуть мой тег «a», чтобы запустить событие onclick? Моя цель: при нажатии тега «a» отображать как блок расположенный ниже div, который по умолчанию скрыт.

function myFunction1(num) {
  var x = document.getElementById("description");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";;
  }
}

function myFunction2(num) {
  var x = document.getElementById("benefits");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";;
    return
  }
}

function myFunction(button) {
  var x = button.id;
  switch (x) {
    case '1':
      myFunction1(x);
      break;
    case '2':
      myFunction4(x);
      break;
    default:
      return false;
  }
}
var buttons = document.getElementsByTagName('a');
for (var i = 0, len = buttons.length; i < len; i++) {
  buttons[i].onclick = function() {
    myFunction(this);
  }
};

<header class="container">
  <nav class="navbar">
    <a id="1">Description</a>
    <a id="2">Benefits</a>
  </nav>
</header>

<div class="details">
  <div class="details_object" id="description" style="display: none">
    <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
    <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>

  </div>

  <div class="details_object" id="benefits" style="display: none">
    <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
    <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>

  </div>
</div>

Я также стараюсь отображать только один .details_object за раз, поэтому, если один отображается, но вызывается другая функция, установите первый по умолчанию.

Answer 1

Я бы немного изменил ваш html, чтобы вы могли использовать атрибут href своей ссылки, а затем иметь только одну функцию для отображения и скрытия соответствующих div, а не функцию для каждой ссылки (комментарии в js, объясняющие, что я сделали):

var divs = document.getElementsByClassName('details_object'); // get all the detail divs
var buttons = document.getElementsByTagName('a'); // get all the links

for (var i = 0, len = buttons.length; i < len; i++) {
  buttons[i].addEventListener("click", function(e) { // bind your click to the buttons (pass the event into the function)
    e.preventDefault(); // stop the default click event of the anchor

    for (var j = 0; j < divs.length; j++) {
      if (divs[j].id === e.currentTarget.hash.substr(1)) { // compare the id of the div with the hash value of the link href (minus the #)
        divs[j].style.display = 'block'; // if they match - show the div
        buttons[j].classList.add('highlight');
      } else {
        divs[j].style.display = 'none'; // if they don't match - hide the div
        buttons[j].classList.remove('highlight');
      }
    }
  });
};

.highlight {
  background: green;
}

<header class="container">
  <nav class="navbar">
    <a id="1" href="#description">Description</a>
    <a id="2" href="#benefits">Benefits</a>
  </nav>
</header>

<div class="details">
  <div class="details_object" id="description" style="display: none">
    description
    <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
    <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
  </div>

  <div class="details_object" id="benefits" style="display: none">
    benefits
    <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
    <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
  </div>
</div>

Answer 2

Вы можете использовать свойство Javascript innerHTML, чтобы сделать его более оптимизированным и простым. Вы можете узнать об этом подробнее здесь .

function myFunction1 (num) {
    document.getElementById("description").innerHTML= "Description paragraph";
}

function myFunction2 (num) {
    document.getElementById("description").innerHTML= "Benefits paragraph";    
}
function myFunction (button) {
    var x = button.id;
    switch (x) {
        case '1':
            myFunction1(x);
            break;
        case '2':
            myFunction2(x);
            break;
        default:
            return false;
    }
}
var buttons = document.getElementsByTagName('a');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].onclick = function (){
        myFunction (this);
    }};

<header class="container">
    <nav class="navbar">
        <a id="1">Description</a>
        <a id="2">Benefits</a>        
    </nav> 
</header>

<div class="details">

    <div class="details_object"  id="description"/>

    <div class="details_object"  id="benefits" />
       
 </div>