2013-05-03 44 views
-2

很好地編輯這與東西看起來好多了,多虧了托馬斯W的一個很好的例子。我只是稍微改變了它,但現在看起來工作得很好。而托馬斯現在已經學習並理解了一種新的方式來做某件事,我不會再以另一種方式去做。 :)即將更改clearbox(表單)中的代碼。Javascript問題與正確的文本到文本區域的地方文本

感謝

<HTML> 
<HEAD> 
<SCRIPT LANGUAGE="JavaScript"> 
window.onload = function(){ 
     windows1.style.fontWeight = "bold"; 
     windows1.style.fontSize = "12pt"; 
     changetabs(1) 
     } 
var split_text; 
var urls_1; 
var numbercount=0; 
var totals; 
var check_time; 
var wait = 0; 
var itemCounter = 0; 
var tabs=1; 
var tabspicked=1; 

    function addto_boxes(form) { 
     split_text = document.getElementById("text_to_split").value; 
     urls_1 = split_text.split(" ", 100000); 
     totals = urls_1.length-1; 
     var boxNum = 1; 
     var x=0; 
     while (x <= totals -1) { 
      var box = document.getElementById("input_box"+boxNum); 
      box.value = box.value + urls_1[x] + " "; 
      boxNum += 1; 
      if (boxNum > tabspicked) boxNum = 1; 
      x++; 
      clearbox(this.form) 
     } 
    } 


    function clearbox(form) { 
    document.getElementById("text_to_split").value = ""; 
    var input_box = document.getElementById("input_box1").value; 
    var input_box_2 = document.getElementById("input_box2").value; 
    var input_box_3 = document.getElementById("input_box3").value; 
    var input_box_4 = document.getElementById("input_box4").value; 
    var input_box_5 = document.getElementById("input_box5").value; 
    var input_box_6 = document.getElementById("input_box6").value; 
    var input_box_7 = document.getElementById("input_box7").value; 
    var input_box_8 = document.getElementById("input_box8").value; 
    var input_box_9 = document.getElementById("input_box9").value; 
    var input_box_10 = document.getElementById("input_box10").value; 
    urls = input_box.split(" ", 100000); 
    urls2 = input_box_2.split(" ", 100000); 
    urls3 = input_box_3.split(" ", 100000); 
    urls4 = input_box_4.split(" ", 100000); 
    urls5 = input_box_5.split(" ", 100000); 
    urls6 = input_box_6.split(" ", 100000); 
    urls7 = input_box_7.split(" ", 100000); 
    urls8 = input_box_8.split(" ", 100000); 
    urls9 = input_box_9.split(" ", 100000); 
    urls10 = input_box_10.split(" ", 100000); 
    document.getElementById("box1").innerHTML = urls.length-1; 
    document.getElementById("box2").innerHTML = urls2.length-1; 
    document.getElementById("box3").innerHTML = urls3.length-1; 
    document.getElementById("box4").innerHTML = urls4.length-1; 
    document.getElementById("box5").innerHTML = urls5.length-1; 
    document.getElementById("box6").innerHTML = urls6.length-1; 
    document.getElementById("box7").innerHTML = urls7.length-1; 
    document.getElementById("box8").innerHTML = urls8.length-1; 
    document.getElementById("box9").innerHTML = urls9.length-1; 
    document.getElementById("box10").innerHTML = urls10.length-1; 
    document.getElementById("displaytotal").innerHTML = urls.length-1 + urls2.length-1 + urls3.length-1 + urls4.length-1 + urls5.length-1 + urls6.length-1 + urls7.length-1 + urls8.length-1 + urls9.length-1 + urls10.length-1; 
    } 

    function bold_selected_tab(tab_to_bold) { 
     document.getElementById("windows1").style.fontSize = "10pt"; 
     document.getElementById("windows2").style.fontSize = "10pt"; 
     document.getElementById("windows3").style.fontSize = "10pt"; 
     document.getElementById("windows4").style.fontSize = "10pt"; 
     document.getElementById("windows5").style.fontSize = "10pt"; 
     document.getElementById("windows6").style.fontSize = "10pt"; 
     document.getElementById("windows7").style.fontSize = "10pt"; 
     document.getElementById("windows8").style.fontSize = "10pt"; 
     document.getElementById("windows9").style.fontSize = "10pt"; 
     document.getElementById("windows10").style.fontSize = "10pt"; 

     document.getElementById("windows1").style.fontWeight = "normal"; 
     document.getElementById("windows2").style.fontWeight = "normal"; 
     document.getElementById("windows3").style.fontWeight = "normal"; 
     document.getElementById("windows4").style.fontWeight = "normal"; 
     document.getElementById("windows5").style.fontWeight = "normal"; 
     document.getElementById("windows6").style.fontWeight = "normal"; 
     document.getElementById("windows7").style.fontWeight = "normal"; 
     document.getElementById("windows8").style.fontWeight = "normal"; 
     document.getElementById("windows9").style.fontWeight = "normal"; 
     document.getElementById("windows10").style.fontWeight = "normal"; 
     tab_to_bold.style.fontWeight = "bold"; 
     tab_to_bold.style.fontSize = "12pt"; 
    } 

    function changetabs(tabs) { 
     document.getElementById("tabesselected").innerHTML = tabs; 
     tabspicked = tabs; 
    } 


</SCRIPT> 
</HEAD> 
<BODY> 
Select Number of tab to use. Tabs selected <b><span style="font-size:12pt" id="tabesselected"></span><br></b> 
<input type="button" id="windows1" style="height: 24px; width: 72px" value="Tabs: 1" onclick="changetabs(1);bold_selected_tab(windows1);" />&#160; 
<input type="button"id="windows2" style="height: 24px; width: 72px" value="Tabs: 2" onclick="changetabs(2);bold_selected_tab(windows2);" />&#160; 
<input type="button"id="windows3" style="height: 24px; width: 72px" value="Tabs: 3" onclick="changetabs(3);bold_selected_tab(windows3);" />&#160; 
<input type="button"id="windows4" style="height: 24px; width: 72px" value="Tabs: 4" onclick="changetabs(4);bold_selected_tab(windows4);" />&#160; 
<input type="button"id="windows5" style="height: 24px; width: 72px" value="Tabs: 5" onclick="changetabs(5);bold_selected_tab(windows5);" />&#160; 
<input type="button"id="windows6" style="height: 24px; width: 72px" value="Tabs: 6" onclick="changetabs(6);bold_selected_tab(windows6);" />&#160; 
<input type="button"id="windows7" style="height: 24px; width: 72px" value="Tabs: 7" onclick="changetabs(7);bold_selected_tab(windows7);" />&#160; 
<input type="button"id="windows8" style="height: 24px; width: 72px" value="Tabs: 8" onclick="changetabs(8);bold_selected_tab(windows8);" />&#160; 
<input type="button"id="windows9" style="height: 24px; width: 72px" value="Tabs: 9" onclick="changetabs(9);bold_selected_tab(windows9);" />&#160; 
<input type="button"id="windows10" style="height: 24px; width: 72px" value="Tabs 10" onclick="changetabs(10);bold_selected_tab(windows10);" /><br><br> 
<input id="Split" type="button" value="Add to boxes" onclick="addto_boxes(this.form);"/>____<input id="clearbutton" type="button" value="Clear" onclick="clearbox(this.form);"/><Br><br> 
Paste urls into this box and click add to boxes<br> 
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea><br><br><br><br> 


<FORM NAME="myform" ACTION="" METHOD="GET"> 
<textarea NAME="inputbox" id="input_box1" VALUE="" rows="2" cols="5"></textarea> 
<textarea NAME="inputbox2" id="input_box2" VALUE="" rows="2" cols="5"></textarea> 
<textarea NAME="inputbox3" id="input_box3" VALUE="" rows="2" cols="5"></textarea> 
<textarea NAME="inputbox4" id="input_box4" VALUE="" rows="2" cols="5"></textarea> 
<textarea NAME="inputbox5" id="input_box5" VALUE="" rows="2" cols="5"></textarea><br> 
<textarea NAME="inputbox6" id="input_box6" VALUE="" rows="2" cols="5"></textarea> 
<textarea NAME="inputbox7" id="input_box7" VALUE="" rows="2" cols="5"></textarea> 
<textarea NAME="inputbox8" id="input_box8" VALUE="" rows="2" cols="5"></textarea> 
<textarea NAME="inputbox9" id="input_box9" VALUE="" rows="2" cols="5"></textarea> 
<textarea NAME="inputbox10" id="input_box10" VALUE="" rows="2" cols="5"></textarea><br> 
<INPUT TYPE="reset"> 
</FORM> 
</BODY> 
</HTML> 

也感謝托馬斯,因爲你的例子我也能夠改變功能bold_selected_tab()來。我想即時掌握它。現在,如果clearbox(表單)函數看起來像下面那樣。

function bold_selected_tab(tab_to_bold) { 
     var x=1; 
     while (x <= 10) { 
      var box = document.getElementById("windows"+x); 
      box.style.fontSize = "10pt "; 
      x++; 
     } 

     var x=1; 
     while (x <= 10) { 
      var box = document.getElementById("windows"+x); 
      box.style.fontWeight = "normal"; 
      x++; 
     } 

     tab_to_bold.style.fontWeight = "bold"; 
     tab_to_bold.style.fontSize = "12pt"; 
    } 
+0

你需要使用循環和數組,而不是這種石器時代的重複。這是嚴重的結構(缺乏結構)。你有10個按鈕,10個textareas,所有代碼重複10次..這太可怕了。 – 2013-05-03 01:36:24

+0

當*你*明顯是初學者時,不要忽視JQuery,並且不知道你在做什麼。這裏不是問題,但你應該選擇它 - 用它編碼,比沒有它更簡單和更可靠。 – 2013-05-03 01:38:23

+0

托馬斯。不管它是否是否定的......這是一個辦法。只是告訴我使用循環和數組並不能幫助我。無論如何,這是個人用途......我並不擔心它如何「看起來」。只需要它正常工作。還要注意,這是爲了一個更大的項目...所以數組意味着整個重新編碼。但是你沒有考慮到這一點?什麼也沒有。 – 2013-05-03 01:58:03

回答

1

當我說循環&數組,我的意思是不重複你的內部塊10次。

var doneChecking = false; 
for (var tab = 1; tab <= 10 && ! doneChecking; tab++) { 
    if (tabspicked >= tab) { 
     if (numbercount >= totals){ 
      numbercount = 0; 
      clearbox(this.form); 
      doneChecking = true; 
      break; 
     } 
     if (numbercount <= totals){ 
      var elementId = "input_box"+tab; 
      var urlIndex = numbercount + tab - 1; // why? 
      document.getElementById(elementId).value = document.getElementById(elementId).value + urls_1[ urlIndex] + " "; 
     } 
    } 
} 

越早編寫這個乾淨&得當,越早你就會明白你實際上要怎樣做。你可以選擇嘗試&學習這個東西,或不。由你決定。

如果您嘗試在N個文本框中分配空格分隔的輸入字符串,則可以這樣做。

var boxNum = 1; 
var numBoxes = tabspicked; // are these Boxes or Tabs? I'm calling them Boxes. 
for (var url : urls_1) { 
    // add to Current Box. 
    var box = document.getElementById("input_box"+boxNum); 
    box.value = box.value + urls + " "; 

    // advance Box, rotating around the N boxes. 
    boxNum += 1; 
    if (boxNum > numBoxes) boxNum = 1; 
} 

這應該是一個簡單的方法。看看你如何去做。

+0

好吧,我們都不能只是神奇地知道如何編碼所有乾淨整潔等。這與實踐和應用程序。你覺得我在做什麼?此外,那個答案甚至沒有做任何我能看到的事情。至少我笨拙的代碼實際上給了我一些結果。但謝謝你的嘗試。 – 2013-05-03 03:40:36

+0

我的錯誤。錯過了一些東西。 :)但它不會繼續添加東西到第一個盒子,如果你選擇少於10:P例如。鍵入b c d e f g並選擇3,它只會將b c放入前3個框然後停止...所以說說我。 – 2013-05-03 03:51:29

+0

那是我可以理解的方法。試圖找出如何去做。我發佈的方法是有效的。第一個想到的。似乎無法讓第二個人工作。不知道我做錯了什麼。在沒有任何東西正在工作的情況下添加該部分之後... :(需要聲明的所有東西都已經被聲明瞭 – 2013-05-03 05:26:44