이 코드의 순환 참조는 어디에 있습니까?

Question

나는 onclick 이미지를 추가 할 수있는 테이블을 가지고있다. 테이블은 양식에서 동적으로 작성됩니다. 테이블을 로컬 스토리지에 저장하려고했지만 순환 참조 문제가 발생했습니다. 나는 이것을 Example of a circular reference in Javascript?라고 읽었지만 나는 완전한 초보자이며 이해하기 위해 고심하고있다. 너 나 한테 그것을 지적 해 줄 수 있니?

function makeChart() { 
     var table = document.createElement('table'), 
     taskName = document.getElementById('taskname').value, 
     header = document.createElement('th'), 
     numDays = document.getElementById('days').value, //columns 
     howOften = document.getElementById('times').value, //rows 
     row, 
     r, 
     col, 
     c; 



    var cel = null; 
    var myImages = new Array(); 
    myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png"; 
    myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png"; 
    var my_div = document.createElement("div"); 
    my_div.id = "showPics"; 
    document.body.appendChild(my_div); 
    var newList = document.createElement("ul"); 
    my_div.appendChild(newList); 

    if (taskName == '' || numDays == '') { 
     alert('Please enter task name and number of days'); 
    } 
    if (howOften == '') { 
     howOften = 1; 
    } 
    if (taskName != '' && numDays != '') { 

     for (var i = 0; i < myImages.length; i++) { 
      var allImages = new Image(); 
      allImages.src = myImages[i]; 
      allImages.onclick = function (e) { 
       if (sel !== null) { 
        sel.src = e.target.src; 

        my_div.style.display = 'none'; 
        sel.onclick = null; 
        sel = null; 
       } 
      }; 

      var li = document.createElement('ul'); 
      li.appendChild(allImages); 
      newList.appendChild(li); 
     } 
     my_div.style.display = 'none'; 

     header.innerHTML = taskName; 
     table.appendChild(header); 

     function addImage(col) { 
      var img = new Image(); 
      img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png"; 
      col.appendChild(img); 
      img.onclick = function() { 
       my_div.style.display = 'block'; 
       sel = img; 
      }; 
     } 
     for (r = 0; r < howOften; r++) { 
      row = table.insertRow(-1); 
      for (c = 0; c < numDays; c++) { 
       col = row.insertCell(-1); 
       addImage(col); 
      } 
     } 
     document.getElementById('holdTable').appendChild(table); 
     document.getElementById('createChart').onclick = null; 
     console.log(table); 
     localStorage.setItem(name, JSON.stringify(table)); 
     console.log(JSON.parse(localStorage.getItem(table))); 
    } 
} 

Answer 1

모든 DOM 요소는 parentNode에 당신이 캐릭터 라인 화 할 수없는 document에 대한 참조를 보유하고 있습니다. 사실 각 요소는 자식에 대한 링크를 포함하는 부모 링크를 보유합니다.

JSON.stringify을 DOM 요소에 적용 할 수 없습니다.

테이블을 실제로 저장하려는 경우 table.innerHTML을 사용하여 HTML을 저장할 수 있습니다. 우리는 다른 솔루션을 제안 할 수 있습니다 (순환 요소 또는 DOM 노드에서 JSON을 생성 할 수있는 구체화 된 구현도 있습니다). 그러나 우리는 localStorage에 테이블을 저장하려고하는 이유를 알아야합니다.