JavaScript - функция Toggle

Question

Im пытается скрыть/показать функцию JS, которую я определил в расширении хром.

То, что я до сих пор: классы пролетных Я пытаюсь скрыть это ярлык:

dspan.className = "cExtension"; 

//Create toggle button: 

function createToggleButton(){ 
    var toggleButton = document.createElement("button"); 
    toggleButton.innerHTML = "Toggle Overlay"; 
    toggleButton.id = "Toggle" 
    var header = document.getElementById("header"); 
    header.appendChild(toggleButton); 
    toggleExtension(); 
} 

// find all spans and toggle display: 

function toggleExtension(){ 
    var spans = document.getElementsByTagName('span'); 
    var toggle = function() {  
     for (var i = 0, l = spans.length; i < l; i++) { 
      if (spans[i].getAttribute('class') == 'cExtension') 
       if (spans[i].style.display == 'none') spans[i].style.display = ''; 
       else spans[i].style.display = 'none'; 
     } 
    } 
    document.getElementById('Toggle').onclick = toggle; 
} 

Кнопка показывает на заголовок, однако это unclickable. Если я изменю document.getElementById('Toggle').onclick = toggle; на document.getElementById('Toggle').onclick = alert{"Hello");, то предупреждение запускается при загрузке страницы, а не onclick. Я пытаюсь сделать это в чистом JS. Где я иду не так?

Answer 1

Прежде всего, document.getElementById("Toggle").onclick = alert("Hello"); установит событие onclick на то, что возвращает функция предупреждения, а не сама функция предупреждения. Таким образом, функция оповещения происходит при загрузке страницы, поэтому она может выяснить, что вернуть. Таким образом, вы можете сделать это: document.getElementById("Toggle").onclick = function(){alert("Hello");}; и это может сработать.

Edit: Царапины все, что было здесь: я пропустил эту toggle набор переменных для функции в toggleExtension.

Я не тестировал все это, поэтому я не могу гарантировать, что все это будет работать в вашем конкретном случае.

Answer 2

Почему бы не использовать jQuery?

Это сделает все, что вам нужно.

http://api.jquery.com/toggle/

Ура!

Answer 3

если виден установлен удалить его, в противном случае добавить его

div.classList.toggle("visible"); 

добавить/удалить видимым, в зависимости от теста условной, я менее 10

div.classList.toggle("visible", i < 10); 

Убедитесь, что поддержка браузера: http://caniuse.com/#feat=classlist