refactor функция делает форму

Question

У меня есть рабочая функция, но я думаю, что она должна стать намного меньше и лучше, но я не вижу ее. может кто-то помочь мне улучшить эту функцию, сделать ее лучше:

Я делаю новый li-item в неупорядоченном списке. там есть омская информация в 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 = document.getElementById('startdatum').value; 
    var uren_form = document.getElementById('uren').value; 
    var ordernummer_form = document.getElementById('ordernummer').value; 

может быть

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; 
}