2013-09-29 182 views
0

我有用於創建許多輸入字段和下拉基於大量用戶將轉換爲文本,場區盒子還真有些過於複雜的JavaScript。
基本描述:它會計算出您是否使用數字,然後計算出數字是否小於5,然後計算出它是哪個數字。然後我複製並粘貼文本字段和操作,具體取決於它的編號。很顯然,我吸了一份JavaScript
下面的代碼(和語法正確。):我需要幫助簡化一些JavaScript

function calculator() { 
var boxNumber= document.getElementById('boxNumber').value; 
var boxInt= parseInt(boxNumber); 
var limit= new Number(5); 

if (Math.floor(boxInt)== boxInt) { 

    if (boxInt <= limit) { 

     x= boxInt; 

     if (x==5){ 

      document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>" 

     } 

     else { 

      if (x==4) { 

       document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>" 

      } 

      else { 

       if (x==3) { 

       document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>" 

      } 

       else { 

        if (x==2) { 

         document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>" 

        } 

        else { 

        if (x==1) { 

         document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>" 

        } 

        else { 

         alert("No zeros or negatives please") 

        } 

        } 

       } 

      } 

     } 

    } 

    else { 
    alert ("Use a number less than 5") 
    } 
} 

else { 
    alert("Use a number") 
} 
} 

你的想法。這是計算器的前身,其中文本字段將定義操作數字,下拉菜單將定義操作。任何幫助是極大的讚賞。

+0

你能解釋一下你通過壓縮的JavaScript是什麼意思? – user1600124

+0

使它不那麼寬敞 –

+0

你只是想簡化它,並擺脫所有的重複? – Barmar

回答

0
function calculator() { 
    var boxNumber = document.getElementById('boxNumber').value; 
    var boxInt = Math.floor(parseInt(boxNumber, 10)); 
    var limit = 5; 
    var htmlString = '<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>'; 

    function repeatString(str, num) { 
     return new Array(num + 1).join(str); 
    } 

    if (!isNaN(boxInt) && boxInt <= limit && boxInt > 0) { 
     document.getElementById('opSpace').innerHTML = repeatString(htmlString, boxInt); 
    } else if (boxInt < 0) { 
     alert('Use a number between 0-' + limit); 
    } 
} 
0

喜歡的東西

if(x>limit) 
{ 
    ... show error... 
} 
else if(x<= 0) 
{ 
    ... show error... 
} 
else 
{ 
    var el = document.getElementById('opSpace'); 
    el.innerHTML = ''; 
    for(var i = 0; i<x; i++) 
    { 
     el.innerHTML += "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"; 
    } 
} 
+0

This Works!太感謝了! –

1
function calculator() { 
    var boxNumber= document.getElementById('boxNumber').value; 
    var boxInt= parseInt(boxNumber, 10); 
    var limit= 5; 

    if (Math.floor(boxInt)== boxInt) { 
     if (boxInt <= limit && boxInt > 0) { 
      var html = ''; 
      for (var i = 0; i < boxInt; i++) { 
       html += "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"; 
      } 
      document.getElementById('opSpace').innerHTML = html; 
     } else { 
      alert("No zeros or negatives please") 
     } 
    } else { 
     alert ("Use a number less than 5") 
    } 
} 
+0

這也適用。謝謝你們的幫助! –