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函数。然后将其返回值分配给onClick属性。

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

b1.onClick = startGame();

到这个

b1.onClick = startGame;

如何制作button.onClick不能在开始时运行

1 个答案: