Блог

Главная - Вопросы по программированию - Javascript : почему я должен щелкнуть 2 раза, чтобы запустить функцию?

Javascript : почему я должен щелкнуть 2 раза, чтобы запустить функцию?

#javascript

#javascript

Вопрос:

 window.onload = function(){
   var about2 = document.getElementById("about");
   about2.addEventListener("click",about);

}

function about(){
var divabout = document.getElementById("aboutme");
 if(divabout.style.display == "none"){
    divabout.style.display = "flex";
    divabout.style.justifyContent ="center";
 }else{
    divabout.style.display ="none"; 
 }
}

пожалуйста, скажите мне причину, по которой я должен щелкнуть дважды, чтобы запустить эту функцию.И как это исправить, пожалуйста. большое спасибо .
я просто установил display: none для 1 тега div в css , и я хочу изменить атрибуты отображения .

Комментарии:

1. Пожалуйста, весь весь связанный код (HTML и CSS), чтобы мы могли повторить вашу проблему.

2. Объект element style будет содержать только свойства, установленные непосредственно в HTML-разметке через style атрибуты; стили, на которые влияют правила CSS, присутствовать не будут. Добавление и удаление class элемента, как правило, намного лучший способ выполнения действий.

3. @Pointy и с чем это связано, что мне нужно щелкнуть дважды, чтобы запустить функцию? пожалуйста, объясни мне, братан, я все еще не понимаю: (

4. divabout.style.display == "none" будет, только true если в HTML есть атрибут «style», который задает свойство «display».

Ответ №1:

Потому что вы не установили никакого свойства dislplay для вашего HTML по умолчанию. Вот почему при первом нажатии javascript устанавливает все, что ему нужно. затем начал работать со 2-го щелчка.

Вот ваш код, в котором вы не добавили стиль в html 

 <идентификатор div="about"> Привет</div>
 <идентификатор div="aboutme"> Обо мне</div>

И вот если я исправлю / добавлю это style=»display:flex;justify-content: center;» в вашем «обо мне» вот так

 <идентификатор div="about"> Привет</div>
 <идентификатор div="о себе" style="display: flex;justify-content: center;">Обо мне</div>

Теперь вы можете проверить, что для запуска требуется всего один щелчок

 window.onload = function() {
  var about2 = document.getElementById("about");
  about2.addEventListener("click", about);

}

function about() {
  var divabout = document.getElementById("aboutme");
  if (divabout.style.display == "none") {
    divabout.style.display = "flex";
    divabout.style.justifyContent = "center";

  } else {
    divabout.style.display = "none";

  }
}  
 <div id="about">Hello</div>
<div id="aboutme" style="display:flex;justify-content: center;">OK About Me</div>