2017-07-25 81 views
-3

在控制檯上,它應該打印以數組形式創建的特定div的div id,並且每次創建div時,它的值都應該存儲在數組中,並且每當div被刪除時,相應div的值應該從數組中刪除。如何在javascript中添加和刪除數組中的值?

<!DOCTYPE html> 
    <html> 
    <head> 

</head> 
<body> 

<p>Click the button to make a Division element.</p> 

<button id="button" onclick="myFunctionTry()">Add</button> 

<div id="myDIV"> 
</div> 

<script> 
var counter=1; 
    function myFunctionTry() 
    { 

      var x = document.createElement("DIV"); 
      x.id="div" 

      var z= document.createElement("button"); 
      z.id="btn"; 
      x.setAttribute("style", "border :1px solid;height: 250px; width: 250px; top: 741px; left: 491px; padding:10px; margin: 50px;"); 
      z.setAttribute("style", "background: #000 url(/home/subodh/Desktop/Widget/icon_incorrect.svg) no-repeat 0px 0px; height: 30px; width:40px; top: 6px; left: 4px; float: right; margin: 0px; padding:0px; clear: both; float:right;"); 

      x.appendChild(z); 
      document.body.appendChild(x).appendChild(z); 

      var divNumber = counter; 
       counter++; 
       var arr=[]; 
       arr.push(divNumber); 

       console.log(arr); 

      z.onclick = function remove(btn) 
      { 
      x.parentElement.removeChild(x); 
      var arr1=arr; 
      console.log(arr1); 
      } 



    } 

</script> 

</body> 
</html> 

如何獲得輸出爲:[1] [1,2] [1,2,3] .......在運行上面提到的代碼。 M輸出爲[1] [2] [3] ......。這怎麼可以使用javascript來完成。

回答

0

您需要在函數之外定義數組變量。請參見下面的代碼:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 

 
    <p>Click the button to make a Division element.</p> 
 

 
    <button id="button" onclick="myFunctionTry()">Add</button> 
 

 
    <div id="myDIV"> 
 
    </div> 
 

 
    <script> 
 
    var counter = 1; 
 
    var arr = []; 
 

 
    function myFunctionTry() { 
 

 
     var x = document.createElement("DIV"); 
 
     x.id = "div" 
 

 
     var z = document.createElement("button"); 
 
     z.id = "btn"; 
 
     x.setAttribute("style", "border :1px solid;height: 250px; width: 250px; top: 741px; left: 491px; padding:10px; margin: 50px;"); 
 
     z.setAttribute("style", "background: #000 url(/home/subodh/Desktop/Widget/icon_incorrect.svg) no-repeat 0px 0px; height: 30px; width:40px; top: 6px; left: 4px; float: right; margin: 0px; padding:0px; clear: both; float:right;"); 
 

 
     x.appendChild(z); 
 
     document.body.appendChild(x).appendChild(z); 
 

 
     var divNumber = counter; 
 
     counter++; 
 

 
     arr.push(divNumber); 
 

 
     console.log(arr); 
 

 
     z.onclick = function remove(btn) { 
 
     x.parentElement.removeChild(x); 
 
     var arr1 = arr; 
 
     console.log(arr1); 
 
     } 
 

 

 

 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

+0

謝謝@milan – maggie

+0

不客氣!快樂編碼! –

相關問題