javascript - 什么会导致已经定义的js函数无法被调用

Question

我有一些 JS 代码，当单击按钮时，它会向页面添加元素，但由于某种原因，当按下按钮时，它告诉我我尝试调用的函数返回错误

Uncaught TypeError: addstep is not a function

buttons.onclick @ add.js:124

function addstep(x)
{
    if(x === undefined)
    {
        x = 1;
    }

    // Define Variables
    var steps = document.getElementById("steps");
    var addstep = document.getElementById('addstep');
    var newstep = document.createElement("textarea");
    newstep.name = "step" + x;
    newstep.idName   = "txtr";
    newstep.className = "txtr";

    var step = "Step " + x + ": ";

    steps.innerHTML = step;
    steps.appendChild(newstep);

    x++;

    var buttons = document.createElement("button");
    var text    = document.createTextNode("Add Step");
    buttons.appendChild(text);
    buttons.onclick = function(){ addstep(x);};
    addstep.appendChild(buttons);    
}

我似乎无法在我的代码中找到问题，我在运行时加载此代码，该代码有效，但在按下按钮时无效？

Answer 1

当你这样做时

var addstep = document.getElementById('addstep');

您定义了一个名为addstep的新变量。这个遮蔽了外部的，它是你从函数内部看到的唯一一个。而且它不是一个函数，所以不能被调用。

最简单的解决方案是为该变量指定另一个名称。