document.getElementById（）返回null

Question

I'm writing a library for JS that allows the creation and deletion and editing of widgets. When you create a new widget, it automatically gets an id like "widget5" or whatever is the next number in the array. On deletion, document.getElementById() can't find the id and returns null.

I realize there are a lot of questions about this problem, and the answer usually has to do with the JavaScript loading before the page, but since the widget library I am writing adds widgets after the page is loaded, that shouldn't be the problem.

I think the problem is that when creating a widget using JS, the JS can't find it for some reason. For example, if I hard-coded in a widget the JS has no problem finding the id. How can I fix this?

Any help is much appreciated!

http://codepen.io/amstrudy/pen/grxpOK

    //this is just the function that is supposed to find the id, check the codepen above for the full code

    function deleteWidget(){
        var widget = document.getElementById("delList");
        widget = widget.options[widget.selectedIndex].text;
        window.alert(widget);
        widget = document.getElementById(widget);
        window.alert(widget);
        document.getElementById("body").removeChild(widget);
    }

Answer 1

There's a space inside your widget ids:

div.setAttribute("id", " widget" + widgetNum);
                       ^ here

Answer 2

所选选项的值存储在value属性中：

widget = widget.options[widget.selectedIndex].value; // instead of .text

Answer 3

You have a leading space within the id .

In your deleteWidget function change :

widget = document.getElementById(widget);

to :

widget = document.getElementById(" " + widget);

or just remove the space

div.setAttribute("id", "widget" + widgetNum);

fixed here : http://codepen.io/theConstructor/pen/XKabpj

Hope this helps