第二個按鈕點擊產生異常

考慮以下HTML第二個按鈕點擊產生異常

<div id="parent" class="parent"> 
    <div id="child" class="child"> 
     <input type="text" class="text"/> 
     <input id="submit" value="submit" type="submit" onclick="doThis()"/> 
    </div> 
<div>

和JS代碼

function doThis(){ 
    var span= document.createElement("span"); 
    var parent=document.getElementById("parent"); 
    var child=document.getElementById("child"); 
    var submit=document.getElementById("submit"); 
    child.insertBefore(span,submit); 
    myKeys=[]; 
    myKeys.push(getAllKeyValuePair(submit)); 
    span.innerHTML=myKeys; 
} 
function getAllKeyValuePair(obj){ 
    var str=""; 
    for(var key in obj){ 
     try{ 
      str=str+"{"+key+", "+obj[key]+"}"; 
     } 
     catch(e){ 
      console.log(key); 
     } 
    } 
    return str; 
}

JSFIDDLE。第二次點擊submit按鈕生成以下錯誤Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.爲什麼發生此錯誤？如何解決這個問題？

來源

2013-12-13 St.Antario

通過與innerHTML插入由函數getAllKeyValuePair()創建的數據時，也被複制下面的代碼

...}{outerHTML, 
<input id="submit" type="submit" onclick="doThis()" value="submit"> 
}{...

即由JavaScript readed作爲與ID「提交」複製標識符，使所述另一元件當您嘗試再次執行

var submit=document.getElementById("submit"); 
    child.insertBefore(span,submit);

來源

2013-12-13 16:47:42 kawashita86

你行span.innerHTML=myKeys;導致問題，因爲它會導致頁面上的提交按鈕元素的重複錯誤。只需將span.innerHTML=myKeys;更改爲span.textContent = myKeys;，它應該可以正常工作。

jsFiddle example

來源

2013-12-13 16:53:31 j08691

第二個按鈕點擊產生異常

回答

相關問題