0

I create an HTML form with Admin Button and in the .js file I wrote a click Event in Admin Button to change from:

style='display:none'

to:

style='display:block'

but it's not working. Why?

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
smith
  • 1
  • inline OR block it's all to show the form – smith Apr 30 '18 at 11:59
  • you want when click `adminButton` display will be `block` ??? – לבני מלכה Apr 30 '18 at 12:03
  • can you please send the form? – Ankit Parmar Apr 30 '18 at 12:03
  • Also can you please send the full code? – Ankit Parmar Apr 30 '18 at 12:05
  • this.adminForm is not working in click event function – Ankit Parmar Apr 30 '18 at 12:09
  • just a tip. If you create an admin area that is hidden. you need to know that everyone can access it just by hitting 'F12', finding the element and changing it css to display block, not needing to click anywhere or make any login. – Calvin Nunes Apr 30 '18 at 12:11
  • @smith More specifically, with what is saying, is that using `display: block` just makes things invisible, but they are still there. You should use server-side code to prevent them from rendering if you want to block users. In ASP.Net this is setting `Visible=False`, in [PHP](https://stackoverflow.com/questions/44196694/apply-css-displaynone-or-use-iffalsecontent-to-block-content-at-clients)/MVC you can wrap the HTML in an If block. – Marie Apr 30 '18 at 12:16
  • @AnkitParmar thank you so much.. but still not working :( that's my HTML for more info :

    – smith Apr 30 '18 at 12:25
  • @לבנימלכה yes exactly – smith Apr 30 '18 at 12:30
  • @smith see my edit – לבני מלכה Apr 30 '18 at 12:34
  • @לבנימלכה Please add a decent comment to your suggested edit. It's fine to add code from the comments to the answer, but people who don't know it comes from the comments might reject it otherwise. – Ivar Apr 30 '18 at 13:38
  • @Ivar of course you right but I edited the question before post it in my answer :) – לבני מלכה May 01 '18 at 04:39

2 Answers2

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'   
});

},
Ankit Parmar
  • 670
  • 10
  • 24
0

That what you mean 

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

OR admin-form

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

If you write function() the this is not known....

For your Edit: put the function in script no 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>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47