Question

这个问题的关键在于将变量赋值给html元素在构造函数中不起作用。

这个权利必须有办法吗？

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

有问题的变量是“盒子”。

我在开头注释掉了我试图使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);
}

HTML：

<html>
<head>
<title>Address Book</title>
<script type="text/javascript" src="beta3.js"></script>
</head>

<body>
    <form id="contact_form">
        <label for="contact_name">Name: </label>
        <input type="text" id="contact_name" /><br />
        <label for="contact_phone">Phone: </label>
        <input type="text" id="contact_phone" /><br />
        <input type="button" name="submit" value="submit" id="sub_button" />
    </form>
    <br />
    <div>
        <a href="#" id="scrap_it">Delete</a>
    </div>
    <br />
    <div>
        <select name="contact_list" id="contact_list" size="10" multiple="multiple" style="width: 450px">

        </select>
    </div>
    <div>
        <textarea id="contact_info">

        </textarea>
    </div>
</body>
</html>

Answer 1

尝试这样的事情

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变量什么都没有。

JS构造函数无法找到全局变量

1 个答案: