javascript - 是什么原因导致无法调用已定义的js函数

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


  未捕获的TypeError：addstep不是函数
  
  button.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);
}

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

最佳答案

当你做

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

您定义一个名为addstep的新变量。这是外部的一个阴影，它是您从函数内部看到的唯一一个。而且它不是一个函数，因此无法调用。

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