refactor a functionwich가 양식을 만든다

Question

나는 작동하는 기능을 가지고있다. 그러나 그것이 훨씬 더 작아 져야한다고 생각한다. 그러나 나는 그것을 보지 않는다. 누군가가 내가이 기능을 개선하도록 도와 줄 수 있습니까?

정렬되지 않은 목록에서 새로운 li 항목을 만들고 있습니다. 그곳에는 3 개 부서의 정보가 있습니다. 각 부서는 반편성을하면서 서로를 떠납니다.

이 코드는 내가 사용했던 코드이며, 그 코드가 모두 나열되어 있고, 더 잘 만들 수 있으며, 내 코드를 더 리팩토링하는 법을 배우기를 희망합니다.

// making new li item inn <ul> 
function addproduction(){ 
    // getting info from form 
    var startdatum_form = document.getElementById('startdatum').value; 
    var uren_form = document.getElementById('uren').value; 
    var ordernummer_form = document.getElementById('ordernummer').value; 

    // new li element 
    var newli = document.createElement('li'); 
    newli.setAttribute('class', 'ui-state-default'); 

    var div1 = document.createElement('div'); 
    div1.setAttribute('class', 'div1'); 
    var sortableicon = document.createElement('span'); 
    sortableicon.setAttribute('class', 'ui-icon ui-icon-arrowthick-2-n-s'); 

    // count current li elements in UL: 
     var number = 0; 
     var ullist = document.getElementById('sortable'); 
     for(i=0;i< ullist.childNodes.length;i++){ 
      if(ullist.childNodes[i].nodeName=='LI'){ 
       number++; 
      } 
     } 
    newli.setAttribute('id', 'p'+(number+1)); 


    // text node (item x) 
    var nrText = document.createTextNode('Item ' + (number+1)); 
    div1.appendChild(sortableicon) 
    div1.appendChild(nrText); 
    var div2 = document.createElement('div'); 
    div2.setAttribute('class', 'div1'); 
     var indiv1 = document.createElement('div'); 
     indiv1.appendChild(document.createTextNode('Title')); 
     var indiv2 = document.createElement('div'); 
     indiv2.appendChild(document.createTextNode('Start')); 
     var indiv3 = document.createElement('div'); 
     indiv3.appendChild(document.createTextNode('End')); 
     var indiv4 = document.createElement('div'); 
     indiv4.appendChild(document.createTextNode('Uren')); 
      div2.appendChild(indiv1); 
      div2.appendChild(indiv2); 
      div2.appendChild(indiv3); 
      div2.appendChild(indiv4); 
    var div3 = document.createElement('div'); 
    div3.setAttribute('class', 'div3'); 
     var indiv5 = document.createElement('div'); 
     indiv5.appendChild(document.createTextNode(ordernummer_form)); 
     var indiv6 = document.createElement('div'); 
     indiv6.appendChild(document.createTextNode(startdatum_form)); 
     var indiv7 = document.createElement('div'); 
     indiv7.appendChild(document.createTextNode('end')); 
     var indiv8 = document.createElement('div'); 
     indiv8.appendChild(document.createTextNode(uren_form)); 
      div3.appendChild(indiv5); 
      div3.appendChild(indiv6); 
      div3.appendChild(indiv7); 
      div3.appendChild(indiv8); 

    newli.appendChild(div1); 
    newli.appendChild(div2); 
    newli.appendChild(div3); 

    // add new production to list 
    document.getElementById('sortable').appendChild(newli); 
    saveNewEntry((number+1), ordernummer_form, startdatum_form, uren_form); 
} 

Answer 1

내가 보이지 않음에 의해

var startdatum_form = get_value('startdatum'); 
var uren_form   = get_value('uren'); 
var ordernummer_form = get_value('ordernummer'); 

function get_value(field) { 
    return document.getElementById(field).value; 
}