0

この問題の核心は、html 要素への変数の割り当てがコンストラクター関数内で機能しないことです。

これを回避する方法があるはずですよね？

私が見つけた最も効果的な方法は、要素を返すコンストラクター関数内にメソッドを作成することです。

問題のある変数は「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>
4

1 に答える 1

0

このようなことを試してください

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でレンダリングされる前にスクリプトが実行され、ボックス変数が何も取得しないため、コードが機能していません。

于 2013-01-02T06:16:03.530 に答える