如何在开始时使 button.onClick 而不是运行

Question

我对为什么我的函数在按下开始按钮之前执行感到困惑。我环顾四周，他们说如果您不这样做，onclick 将在开始时运行而是在函数中单击按钮时要执行的代码。但是我的是一个函数......这段代码应该在按下开始按钮时创建 4 个按钮。但是现在 4 个按钮立即出现。

编辑：这是完整的代码。

var log = document.getElementById("Log");
log.addEventListener("click", login);  // Runs the Login Function

var email;
var password;


// Makes an alert to test input values.
function login() {
    form = document.getElementById("form");
    var text = "E-Mail: " + form.elements[0].value + " Password: " + form.elements[1].value;
    alert (text);
}


// Testing Function
function helloWorld() {
    alert ("Hello World");
}



//create the snake
function createSnake() {
    var bodyLength = 5;  //snake length
    var body = [];   //snake body
    var head = [10, 10];  //snake head starting position;

    // create the variables to edit for the body positions loop
    var row = head[0];
    var col = head[1];
    // set the snake body positions
    for (var i=0;i<bodyLength; i++) {
        body[body.length] = [row, col];
        var cord = row + "_" + col;
        // Set the head Green
        if (i == 0) {        document.getElementById(cord).style.backgroundColor = 'green';
        }
        // Set the Body blue
        else {document.getElementById(cord).style.backgroundColor = 'blue';}
        row++;
    }
}

var snakeBool = false; //Bool to test if the snake game has been pressed.

// Create a table function. Creates a gray table for Snake.
function createTable() {
    if (!snakeBool) {
    // create a table of data

    //target the activity div
    var activity = document.getElementById("activity");

    //create table
    var tbl = document.createElement("table");

    //table styles
    tbl.style.borderCollapse = "collapse";
    tbl.style.marginLeft = '12.5px';

    //create size var
    //var size = '5px';

    //set the row and column numbers
    var tr_num = 30;
    var td_num = 25;

    //start the loops for creating rows and columns
    for (var i = 0; i < tr_num; i++) {

        var tr = document.createElement("tr"); // create row
        //tr style
        tr.style.height = '7px';

        for (var j = 0; j < td_num; j++) { //start loop for creating the td

            var td = document.createElement("td"); //create td
            td.style.width = '5px';
            if (i == 0 || i == (tr_num-1) || j == 0 || j == (td_num-1)) {
                td.style.backgroundColor = "white";
            }
            else {
            td.style.backgroundColor = "gray";
            }
            td.id = i + "_" + j;  //set id to td

            //td.appendChild("data"); //append data to td
            tr.appendChild(td); //append td to row
        }
    tbl.appendChild(tr); //append tr to the table
    }

    activity.appendChild(tbl); //append the table to activity div

    createSnake();  //Creates the snake body.

    snakeBool = true; //Sets the Snake Bool to true since game has been created.

    //create Start button
    var b1 = document.createElement("input");
    b1.type = "button";
    b1.value = "Start";
    b1.onClick = startGame;
    activity.appendChild(b1);
} // end of if Function
}


function startGame() {
    createButtons();
}

function createButtons() {
    var b1 = document.createElement("input");
    b1.type = "button";
    b1.value = "Up";
    //b1.onClick = func
    activity.appendChild(b1);

    var b2 = document.createElement("input");
    b2.type = "button";
    b2.value = "Down";
    //b1.onClick = func
    activity.appendChild(b2);

    var b3 = document.createElement("input");
    b3.type = "button";
    b3.value = "Left";
    //b1.onClick = func
    activity.appendChild(b3);

    var b4 = document.createElement("input");
    b4.type = "button";
    b4.value = "Right";
    //b1.onClick = func
    activity.appendChild(b4);
}

// when button is pressed, do createTable function
document.getElementById("gamesButton").addEventListener("click", createTable);

Answer 1

使用括号，您将立即调用 startGame 函数。然后将其 return 值分配给 onClick 属性.

您很可能想分配函数本身，因此它会在 onClick 事件触发时执行。为此，请更改此

b1.onClick = startGame();

至此

b1.onClick = startGame;

如何在开始时使 button.onClick 而不是运行

How to make button.onClick not run at start

javascript

onclick

button

如何在开始时使 button.onClick 而不是 运行

How to make button.onClick not run at start

javascript

onclick

button

如何在开始时使 button.onClick 而不是运行