重新加载后，按钮仅在第二次单击时起作用

Question

I'm creating a board with tiles that can be clicked to change colors. I have a "Clear Board" button that effectively clears the board so all tiles are white again, but for some reason the button only works on the second click after each page reload. I've tried wrapping my JavaScript in a document ready function but that didn't help. How can I get it to work on the first click after a reload?

HTML:

<h1 class="title">Wacky Painter</h1>
    <div class="easel">
    </div>
    <form class="clear_board">
        <button type="button" id="clear_button" class="btn" onclick="clearBoard()">Clear Board</button>
    </form>

CSS:

body {
  font-family: sans-serif;
  color: #ff757a;
}

.easel {
  width: 300px;
  outline: #c8c8c8 5px solid;
  margin: 0 auto;
}

.square {
  width: 20px;
  height: 20px;
  outline: thin solid #c8c8c8;
  display: inline-block;
  margin-top:-2px;
}

form {
  margin: 10px auto;
}

.title {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
}

JavaScript (with jQuery):

window.setUpEasel = function() {
    var squareString = "";
    for(var i=0; i < 195; i++) {
        squareString+='<div class="square"></div>';
    }
    $('.easel').append(squareString)
}

window.giveColor = function() {
    $('.easel').on('click', '.square', function() {
        var letters = '0123456789ABCDEF'.split('');
        var randomColor = '#';
        for (var i = 0; i < 6; i++ ) {
            randomColor += letters[Math.round(Math.random() * 15)];
        }
        $($(this)).css('background-color', randomColor);
    })
}
window.clearBoard = function() {
    $('#clear_button').on('click', function () {
        $('.square').css('background-color', 'white');
    })
}

    $(function () {
        setUpEasel();
        giveColor();
    });

Here's a working jsfiddle: http://jsfiddle.net/MichelleGlauser/yz6mdx1f/1/

Answer 1

You don't set up your jQuery click event handler on the clear button until you click on the button (using the event handler assigned in the button attributes). Try this instead:

// code above stays the same

// Adjust so that it is merely responsible for clearing the background
window.clearBoard = function() {
    $('.square').css('background-color', 'white');
};

$(function() {
    setUpEasel();
    giveColor();

    // Assign the click handler on DOM-ready
    $('#clear_button').on('click', function () {
        clearBoard();
    });
});

And finally, remove the inline onclick attribute from your button markup.

• DEMO