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

此问题的症结在于，将变量分配给html元素在构造函数中不起作用。JS构造函数无法找到全局变量

一定有办法解决这个问题吗？

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

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

我在开始部分注释掉了我试图使框变成全局变量的部分，但构造函数找不到框变量。这是我最奇怪的部分。

下面是我的示例代码：

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>

来源

2013-01-02 user1937279

这可能是因为你正在缩小问题的难度，但如果可以将问题减少到更小的测试用例，则更有可能获得帮助。如果您在交互式环境（如http://jsfiddle.net/）中重新构建示例，这也很有帮助 –

尝试这样的事情

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-02 06:16:03

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

回答

相关问题