如何制作按钮.单击“开始时不运行”

How to make button.onClick not run at start

本文关键字:运行 开始时 何制作 按钮 单击      更新时间:2023-09-26

我很困惑为什么我的函数会在按下启动按钮之前执行。我环顾四周,他们说如果你不这样做,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);

使用括号,您将立即调用startGame函数。然后将其返回值分配给onClick属性。

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

b1.onClick = startGame();

到这个

b1.onClick = startGame;