Question

我想通过JS vanilla中的按钮单击显示一个表单，但没有任何效果。这是我的代码

＆＃13;

/* ======= Model ======= */

var model = {
    currentCat: null,
    cats: [
        {
            clickCount : 0,
            name : 'Tabby',
            imgSrc : 'img/434164568_fea0ad4013_z.jpg',
            imgAttribution : 'https://www.flickr.com/photos/bigtallguy/434164568'
        },
        {
            clickCount : 0,
            name : 'Tiger',
            imgSrc : 'img/4154543904_6e2428c421_z.jpg',
            imgAttribution : 'https://www.flickr.com/photos/xshamx/4154543904'
        },
        {
            clickCount : 0,
            name : 'Scaredy',
            imgSrc : 'img/22252709_010df3379e_z.jpg',
            imgAttribution : 'https://www.flickr.com/photos/kpjas/22252709'
        },
        {
            clickCount : 0,
            name : 'Shadow',
            imgSrc : 'img/1413379559_412a540d29_z.jpg',
            imgAttribution : 'https://www.flickr.com/photos/malfet/1413379559'
        },
        {
            clickCount : 0,
            name : 'Sleepy',
            imgSrc : 'img/9648464288_2516b35537_z.jpg',
            imgAttribution : 'https://www.flickr.com/photos/onesharp/9648464288'
        }
    ]
};


/* ======= Octopus ======= */

var octopus = {

    init: function() {
        // set our current cat to the first one in the list
        model.currentCat = model.cats[0];

        // tell our views to initialize
        catListView.init();
        catView.init();
        adminView.init();
    },

    getCurrentCat: function() {
        return model.currentCat;
    },

    getCats: function() {
        return model.cats;
    },

    // set the currently-selected cat to the object passed in
    setCurrentCat: function(cat) {
        model.currentCat = cat;
    },

    // increments the counter for the currently-selected cat
    incrementCounter: function() {
        model.currentCat.clickCount++;
        catView.render();
    }
};


/* ======= View ======= */

var catView = {

    init: function() {
        // store pointers to our DOM elements for easy access later
        this.catElem = document.getElementById('cat');
        this.catNameElem = document.getElementById('cat-name');
        this.catImageElem = document.getElementById('cat-img');
        this.countElem = document.getElementById('cat-count');

        // on click, increment the current cat's counter
        this.catImageElem.addEventListener('click', function(){
            octopus.incrementCounter();
        });

        // render this view (update the DOM elements with the right values)
        this.render();
    },

    render: function() {
        // update the DOM elements with values from the current cat
        var currentCat = octopus.getCurrentCat();
        this.countElem.textContent = currentCat.clickCount;
        this.catNameElem.textContent = currentCat.name;
        this.catImageElem.src = currentCat.imgSrc;
    }
};

var catListView = {

    init: function() {
        // store the DOM element for easy access later
        this.catListElem = document.getElementById('cat-list');

        // render this view (update the DOM elements with the right values)
        this.render();
    },

    render: function() {
        var cat, elem, i;
        // get the cats we'll be rendering from the octopus
        var cats = octopus.getCats();

        // empty the cat list
        this.catListElem.innerHTML = '';

        // loop over the cats
        for (i = 0; i < cats.length; i++) {
            // this is the cat we're currently looping over
            cat = cats[i];

            // make a new cat list item and set its text
            elem = document.createElement('li');
            elem.textContent = cat.name;

            // on click, setCurrentCat and render the catView
            // (this uses our closure-in-a-loop trick to connect the value
            //  of the cat variable to the click event function)
            elem.addEventListener('click', (function(catCopy) {
                return function() {
                    octopus.setCurrentCat(catCopy);
                    catView.render();
                };
            })(cat));

            // finally, add the element to the list
            this.catListElem.appendChild(elem);
        }
    }
};

var adminView = {

      init: function() {
        this.formElement = document.getElementById('admin-form');
        this.buttonAdmin = document.getElementById('admin-button');
        console.log(this);
        this.render();
      },

      render: function() {
        this.formElement.style.display = 'none';
        console.log(this);
        this.buttonAdmin.addEventListener('click', (function(form){
         return  form.style.display = 'block';
        })(this.formElement));
        console.log(this);
      }
};

// make it go!
octopus.init();

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cat Clicker</title>
</head>
<body>
    <ul id="cat-list"></ul>
    <div id="cat">
        <h2 id="cat-name"></h2>
        <div id="cat-count"></div>
        <img id="cat-img" src="" alt="cute cat">
    </div>
    <div>
      <button type="button" id="admin-button">Admin</button>
    </div>
    <div id="admin-form">
      <p>Name</p>
      <input type="text" name="new-cat-name" value="">
      <p>Img URL</p>
      <input type="text" name="new-img-url" value="">
      <p># Count</p>
      <input type="text" name="new-count-number" value="">
      <br>
      <button type="button" name="save">Save</button>
      <button type="button" name="cancel">Cancel</button>
    </div>
    <script src="js/app.js"></script>
    <script>
  if(!document.getElementById('admin-button').active){
    document.getElementById('admin-form').style.display ='none';
  }
  </script>
</body>
</html>

＆＃13;

我不明白为什么在加载页面时会显示表单（#admin- form），只有在点击按钮（#admin-按钮）时才会显示。

更新：我添加了脚本以隐藏HTML文件中的表单。

Answer 1

这是你的问题：

    this.buttonAdmin.addEventListener('click', (function(form){
      return  form.style.display = 'block';
    })(this.formElement));

将处理函数包装在parens中并立即调用它。尝试：

    this.buttonAdmin.addEventListener('click', function(){
      this.formElement.style.display = 'block';
    }.bind(this));

或者，如果您不想因任何原因使用bind：

    var form = this.formElement;
    this.buttonAdmin.addEventListener('click', function(){
      form.style.display = 'block';
    });

如何通过按钮切换表单？

1 个答案: