Javascript JS构造函数可以';找不到全局变量

Javascript JS构造函数可以';找不到全局变量,javascript,oop,constructor,Javascript,Oop,Constructor,这个问题的关键是,将变量分配给html元素在构造函数中不起作用 一定有办法,对吧 我发现的最有效的方法是在构造函数中创建一个返回元素的方法 有问题的变量是“box” 我在一开始就注释掉了我试图使box成为全局变量的部分,但是构造函数找不到box变量。这对我来说是最奇怪的部分 下面是我的示例代码: window.onload = function() { document.getElementById("sub_button").onclick = adder; document.

这个问题的关键是,将变量分配给html元素在构造函数中不起作用

一定有办法,对吧

我发现的最有效的方法是在构造函数中创建一个返回元素的方法

有问题的变量是“box”

我在一开始就注释掉了我试图使box成为全局变量的部分,但是构造函数找不到box变量。这对我来说是最奇怪的部分

下面是我的示例代码:

window.onload = function()
{
    document.getElementById("sub_button").onclick = adder;
    document.getElementById("scrap_it").onclick = remover;
}

//var box = document.getElementById("contact_list");
//refers to the select tag containing contact names as options

var Contacts = function()
{
    this.box = function (){ return document.getElementById("contact_list");}
    this.list = [];
    this.contact_info = document.getElementById("contact_info");

    this.find = function(personName){
        var found = "missing";
        for(var i = 0; i < this.list.length; i++)
        {
            if(this.list[i].personName == personName)
            {
                found = i;
            }
        }
        return found;
    }


    this.addPerson = function(personName, phone)
    {      
        if (this.find(personName) == "missing")
        {
            personName = personName;
            contact =
            {
                personName: personName,
                phone: phone
            }

            this.list.push(contact);
            this.update();
        }
        else
        {
        alert("Sorry, this contact name is already in use. Please choose another.");
        }
    }

    this.update = function()
    {
        this.box().innerHTML = "";

        for (var i = 0; i <this.list.length; i++)
        {
            option_element = document.createElement("OPTION");
            option_node = document.createTextNode(this.list[i].personName);
            option_element.appendChild(option_node);
            this.box().appendChild(option_element);
        }
    }

    this.remove = function(name_to_delete)
    {
        var index_to_remove = name_to_delete;
        this.list.splice(index_to_remove, 1);
        this.update();
    }

    this.postInfo = function(contact_to_display)
    {
        var index_to_display = contact_to_display;
        alert(this.list[index_to_display].personName);
        alert(this.list[index_to_display].phone);
    }
}

var myList = new Contacts();

function adder()
{
    myList.addPerson(document.getElementById("contact_name").value, document.getElementById("contact_phone").value);
}

function remover()
{
    myList.remove(myList.box().selectedIndex);
}

function showInfo()
{
    myList.postInfo(myList.box().selectedIndex);
}
window.onload=function()
{
document.getElementById(“sub_按钮”).onclick=adder;
document.getElementById(“报废”).onclick=remover;
}
//var box=document.getElementById(“联系人列表”);
//将包含联系人姓名的select标记作为选项引用
var Contacts=function()
{
this.box=function(){return document.getElementById(“contact_list”);}
this.list=[];
this.contact_info=document.getElementById(“contact_info”);
this.find=函数(personName){
var found=“缺失”;
for(var i=0;i对于(var i=0;i尝试这样的方法

var box;
 window.onload = function()
{
   document.getElementById("sub_button").onclick = adder;
   document.getElementById("scrap_it").onclick = remover;
    //refers to the select tag containing contact names as options
   box = document.getElementById("contact_list");
}

您的代码不起作用,因为您的脚本是在dom中呈现元素之前执行的,因此您的box变量将一无所获。

可能是您很难缩小问题的范围,但是如果您可以将问题缩小到一个较小的测试用例中,您就更有可能获得帮助。如果您正在构造e例如,在交互式环境中,例如
var box;
 window.onload = function()
{
   document.getElementById("sub_button").onclick = adder;
   document.getElementById("scrap_it").onclick = remover;
    //refers to the select tag containing contact names as options
   box = document.getElementById("contact_list");
}