在javascript中创建第2个html元素删除第一个

我有一个javascript代码，可以动态创建一个包含文件数据的选择框。他们有点大，我会尝试，然后移动到外部的js，而不是一旦一切正常工作正常。我的问题是，当我尝试运行相同的脚本时，似乎在不同的文件上，它清除了第一个脚本中的信息。所以我结束了一个选择元素填充和一个空白。最后一个脚本是唯一持有的脚本，这就是为什么我认为它是以某种方式清除第一个脚本的原因。有什么建议么。我正在建立一个菜单，所以我需要这个代码是模块化的。提前致谢。在javascript中创建第2个html元素删除第一个

*更新* 我拆分了processcsv文件，我仍然得到相同的结果。在函数的每一个秋天，我都会传递一个不同的select元素。在网页上，我只会看到最后一个执行与选择处理后的耳毛呈现空白。我认为这个问题是，我的第一个xmlrequest从来没有达到readystate == 4，但最后一个。我不知道我能做些什么来控制这种情况，为什么这只是最后一次失败。

我的HTML

<div class="menu_container"> 
    <div class="menu_element" id="plant_div"> 
     <select class="Menu" id="plant_select"> 
     <script>  
      <!--var plant_select = document.createElement("select"); --> 
      var datafile = ''; 
      var xmlhttp = new XMLHttpRequest(); 

      xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true); 
      xmlhttp.send(); 
      xmlhttp.onreadystatechange = function() 
      { 
       if(xmlhttp.status==200 && xmlhttp.readyState==4) 
       { 
        processCSV(xmlhttp.responseText, plant_select,"select plant"); 
       } 
      } 
     </script> 
     </select> 
    </div> 
    <div class="menu_element" id="plantType_div"> 
     <select class="Menu" id="plantType_select"> 
     <script> 
      <!--var plant_select = document.createElement("select"); --> 
      var datafile = ''; 
      var xmlhttp = new XMLHttpRequest(); 

      xmlhttp.open("GET","http://localhost:8080/res/planttypes.csv",true); 
      xmlhttp.send(); 
      xmlhttp.onreadystatechange = function() 
      { 
       if(xmlhttp.status==200 && xmlhttp.readyState==4) 
       { 
        processCSV(xmlhttp.responseText, plantType_select,"select PLant Type); 
       } 
      } 
     </script> 
     </select> 
    </div> 

</div>

包含

function processCSV(file,parentNode,defaultmessage) 
      { 
       var frag = document.createDocumentFragment() 
       , lines = file.split('\n'), option;     
       var intial_option = document.createElement("option"); 

       intial_option.setAttribute("value",""); 
       intial_option.setAttribute("disabled","disabled"); 
       intial_option.setAttribute("selected","selected"); 
       intial_option.innerHTML = defaultmessage; 
       frag.appendChild(intial_option) 

       for (var i = 0, len = lines.length; i < len; i++){ 
        option = document.createElement("option"); 
        option.setAttribute("value", lines[i]); 
        option.innerHTML = lines[i];       
        frag.appendChild(option); 
        } 

       parentNode.appendChild(frag); 
      }

来源

2013-10-14 TheCodeNovice

'plant_select'真的有一个html评论吗？如果没有，它什么时候添加到DOM？ –

为什么'processCSV（）'重复？ – DontVoteMeDown

@DontVoteMeDown我希望重用每个选择的功能。我试图将它移出到它自己的js文件，但它仍然不起作用。 – TheCodeNovice

具有相同名称的第二个功能覆盖了第一个一个单独的js文件。

Use two methods of the same name in different .js files

使用唯一的函数名，或只是移动的功能，并调用它的两倍。

function processCSV(file,parentNode) {...} 

processCSV('/my/file/path', myParentNode);

来源

2013-10-14 19:05:13 isherwood

是否有无论如何使我的脚本模块化，所以我可以使用它多次，而不诉诸func1 func2 func3等...... – TheCodeNovice

当然。你只需要为每个调用指定参数。答案已更新。 – isherwood

我已经按照你所说的完成了它，并将它分开，并让它在DOM中传递了不同的父节点。它仍然在消灭第一次通话中完成的事情。有任何想法吗？我上面更新了我的代码。 – TheCodeNovice

您从不选择要添加项目的元素。每次你打电话时都要通过document.getElementById(idOfParentNode)到processCSV。您也不需要在select标签中内联呼叫。

（也就是说，plant_select和plantType_select没有被定义为显示在你的代码的任何东西）

而且，因为你正在做的一切，我们可以在全球范围内看到的JavaScript，这些变量都附加到窗口....这意味着你正在通过重新初始化你的xmlhttp对象。考虑在单个脚本块中封装更多更好的功能。

来源

2013-10-14 20:47:04

我想你是用xmlhttp语句来说的。我的第一个从来没有真正完成，但我的第二个。无论如何解决这个问题？你是什么意思封装更多？ – TheCodeNovice

在javascript中创建第2个html元素删除第一个

回答

相关问题