область администратора с входами для изменения имени кошки, URL-адреса и количества кликов (по умолчанию скрыто)

Question

Я создаю HTML-форму с помощью кнопки администратора и в файле .js я записал событие click в кнопке администратора, чтобы изменить его на:

style='display:none'

до:

style='display:block'

но это не работает. Почему?

var adminMode = { 
  init: function() {
    this.adminButton = document.getElementById('admin-button');
    this.adminForm = document.getElementById('admin-form');// form ID   
    this.allForm = document.getElementById('all-form'); //div ID

    this.adminButton.addEventListener('click', function (allForm) {
      this.adminForm.style.display = 'inline'
    });
  },

HTML

<button id='admin-button'>Admin</button> <br><br> 
<div id='all-form'> 
 <form id='admin-form' style='display:none'> 
   Name:<br>
     <input type="text" name="firstname" value=" "> <br><br>
   Img URL:<br> 
    <input type="text" name="lastname" value=" "> <br><br> 
    <button> Save</button>  
    <button>Cancel</button> 
 </form> 
</div>

Answer 1

var adminMode = {  init: function() {      
    this.adminButton = document.getElementById('admin-button');   
    //this.adminForm =   document.getElementById('admin-form');// form ID
    //this.allForm =  document.getElementById('all-form'); //div ID 
    this.adminButton.addEventListener('click', function (event) {
        document.getElementById('admin-form').style.display = 'inline'   
});

},

Answer 2

Это то, что вы имеете в виду

 init: function() {
    document.getElementById('admin-button').addEventListener('click', function () {
          document.getElementById('allForm').style.display = 'block';  
     });
    }

ИЛИ admin-form

 init: function() {
    document.getElementById('admin-button').addEventListener('click', function () {
          document.getElementById('admin-form').style.display = 'block';  
     });
    }

Если вы напишите function(), то this неизвестно ....

Для редактирования: введите function в script, не init()

function dispaly(){
  document.getElementById('admin-form').style.display = 'block';  
}

<button id='admin-button' onclick="dispaly()">Admin</button> <br><br> 
<div id='all-form'> 
 <form id='admin-form' style='display:none'> 
   Name:<br>
     <input type="text" name="firstname" value=" "> <br><br>
   Img URL:<br> 
    <input type="text" name="lastname" value=" "> <br><br> 
    <button> Save</button>  
    <button>Cancel</button> 
 </form> 
</div>