iT邦幫忙

1

新手問題 - 判斷式的使用

我是個從來沒學習過程式的新手

以我的邏輯實在不懂下面到底有什麼差??

我正在嚐試在一天內利用 Javascript 來控制 HTML內表單的Select元素(自學)。
我希望可以藉由A.Select選擇時,可以「選擇性」表示出不同的B.Select.Option

--成功的例子--

function gT(x)
	{
	
  var op = document.getElementById("??????").getElementsByTagName("option");
  //召入HTML的下拉式選單進入「變數OP」
  document.getElementById('test').value='';
  //重置偵錯字串
  for (var i = 0; i < op.length; i++) {
  //做迴圈跑OPTION數
	   if(op[i].selected == true)
       //如果下拉式選單,某一個被選擇
        {
			if(op[i].index > 4)//如果下拉式選單選第4個以後。
				{
					gTA();//在下面
					document.getElementById('test').value="["+op[i].selected+op[i].index+"]";//偵錯
					break;
				}         
			else
				{
					gTB();//在下面
					document.getElementById('test').value="["+op[i].selected+op[i].index+"]";//偵錯
					break;
				}
        }
	else
		{//偵錯啦?不行喔。
					document.getElementById('test').value='what?';
		}  
 }
		
	}
function gTA(x)
{
    document.getElementById('groupTypeA01').style.display = ''
	document.getElementById('groupTypeA02').style.display = ''
	document.getElementById('groupTypeA03').style.display = ''
	document.getElementById('groupTypeA04').style.display = ''
	document.getElementById('groupTypeA05').style.display = ''
	document.getElementById('groupTypeA06').style.display = ''
	document.getElementById('groupTypeB01').style.display = 'none'
	document.getElementById('groupTypeB02').style.display = 'none'
}
	function gTB(x)
{
    document.getElementById('groupTypeA01').style.display = 'none'
	document.getElementById('groupTypeA02').style.display = 'none'
	document.getElementById('groupTypeA03').style.display = 'none'
	document.getElementById('groupTypeA04').style.display = 'none'
	document.getElementById('groupTypeA05').style.display = 'none'
	document.getElementById('groupTypeA06').style.display = 'none'
	document.getElementById('groupTypeB01').style.display = ''
	document.getElementById('groupTypeB02').style.display = ''
}
</script>

但是我不瞭解的是,上面這樣可以。
那為什麼下面這樣不行??

function gT(x)
	{
	
  var op = document.getElementById("??????").getElementsByTagName("option");
    //召入HTML的下拉式選單進入「變數OP」
  document.getElementById('test').value='';
    //重置偵錯字串
  for (var i = 0; i < op.length; i++) {
	   if((op[i].selected == true)&&(op[i].index > 4)
       //下拉式選單的情況:如果被選擇,同時超過第四個。
        {
					gTA();//在下面
					document.getElementById('test').value="["+op[i].selected+op[i].index+"]";//偵錯
					break;
				}         
			else
				{
					gTB();//在下面
					document.getElementById('test').value="["+op[i].selected+op[i].index+"]";//偵錯
					break;
 }
		
	}
function gTA(x)
{
    document.getElementById('groupTypeA01').style.display = ''
	document.getElementById('groupTypeA02').style.display = ''
	document.getElementById('groupTypeA03').style.display = ''
	document.getElementById('groupTypeA04').style.display = ''
	document.getElementById('groupTypeA05').style.display = ''
	document.getElementById('groupTypeA06').style.display = ''
	document.getElementById('groupTypeB01').style.display = 'none'
	document.getElementById('groupTypeB02').style.display = 'none'
}
	function gTB(x)
{
    document.getElementById('groupTypeA01').style.display = 'none'
	document.getElementById('groupTypeA02').style.display = 'none'
	document.getElementById('groupTypeA03').style.display = 'none'
	document.getElementById('groupTypeA04').style.display = 'none'
	document.getElementById('groupTypeA05').style.display = 'none'
	document.getElementById('groupTypeA06').style.display = 'none'
	document.getElementById('groupTypeB01').style.display = ''
	document.getElementById('groupTypeB02').style.display = ''
}
</script>

第一個利用判斷式IF巢狀迴圈來做,很成功。
但第二個是我怎麼做都失敗到很無言,才改做巢狀迴圈。
我不行利用 && || 附加多重的判斷像打電路板那樣 and or xor去控制嗎?
if((op[i].selected == true)&&(op[i].index > 4)這樣不行?
我如果每個電路板都像Javascript這樣搞「巢狀迴圈」來做,不就累死了?

奇怪的是我利用FOR迴圈去跑option的項次.
為了偵錯,所以特別寫
document.getElementById('test').value="["document.getElementById('test').value+op[i].selected+op[i].index+"]";
出現的結果竟然是
[false1false2true3false4false5false6]

為什麼不是下面這樣?我明明是用迴圈去跑啊。
[false1][false2][true3][false4][false5][false6]

這到底是莫名奇妙什麼鬼東西。

優悠 iT邦新手 4 級 ‧ 2020-01-21 17:03:12 檢舉
console.log();
配合右鍵檢查
一步一步看你哪邊數值異常吧!
優悠 iT邦新手 4 級 ‧ 2020-01-21 17:23:04 檢舉
(op[i].index > 4)可以簡化成
(i>3)
index 也是從零開始吧,有點忘了
BeEvil_Y iT邦新手 5 級 ‧ 2020-01-22 14:54:09 檢舉
謝謝,原來有?console.log();
但這是偷懶的寫法,我好想把他寫成「依特定串符來判斷」,而不是INDEX超過低於。
但Javascript關於字串的提取、使用、拆分,都讓我想要哭啊。
5
小魚
iT邦大師 1 級 ‧ 2020-01-21 17:01:54
最佳解答
if((op[i].selected == true)&&(op[i].index > 4)

最後面少一個括號,
然後你中間要插一個

else if(op[i].selected == true)

才會跟原本一樣.

不過我的話比較傾向你原本的寫法,
比較看得懂在寫什麼.

看更多先前的回應...收起先前的回應...
Homura iT邦高手 1 級 ‧ 2020-01-21 17:31:18 檢舉

剛趕完東西再來在這題
看到都眼花/images/emoticon/emoticon06.gif
結果回答那麼多只有小魚大看出問題XD

BeEvil_Y iT邦新手 5 級 ‧ 2020-01-22 15:01:05 檢舉

@小魚 最後面少一個括號,然後你中間要插一個

怪不得有問題,原來我的餅沒切好。
成功的那個,我有切好四等分。
失敗的那個,我只切了一半,另一半亂切。
謝謝。

BeEvil_Y iT邦新手 5 級 ‧ 2020-01-22 15:15:14 檢舉

@Homura剛趕完東西再來在這題
看到都眼花/images/emoticon/emoticon06.gif
結果回答那麼多只有小魚大看出問題XD

嗯...可能大家想法不用吧
而且我的CODE太亂了

小魚 iT邦大師 1 級 ‧ 2020-01-23 08:42:26 檢舉

有幫到你的話,
麻煩按一下最佳解答,
謝謝~

BeEvil_Y iT邦新手 5 級 ‧ 2020-01-30 22:29:25 檢舉

雖然迴圈那裡沒人要解釋,是有點可惜。
但有二位大師的解惑,已經很好了。
也許是我的問題太幼稚,所以IT邦幫忙的某位Javascript好手不屑理我。
盼不到他來解題,謝謝各位了。

2
dragonH
iT邦大師 1 級 ‧ 2020-01-21 15:57:42

卡個位

然後 Java ≠ Javascript

["document.getElementById('test').value+op[i].selected+op[i].index+"]"

這樣寫本來就會拿到一個

[組完的結果]

根據選擇決定第二個 select 的項目

codepen

看更多先前的回應...收起先前的回應...

哎呀 我也能經這麼以為/images/emoticon/emoticon25.gif

BeEvil_Y iT邦新手 5 級 ‧ 2020-01-21 16:49:02 檢舉

您好,可是啊。
迴圈跑第一次時,得到的就是 [原來+op[0].value+op[0].index]
跑第二次時,才會變成[原來+op[0].value+op[0].index]+[op[1].value+op[1].index]

如果Javascript是這樣設定
那我的

if((op[i].selected == true)&&(op[i].index > 4))

就鐵定不行了啊?
因為他是整組拿下去判斷。

變這樣
false1false2true3false4false5false6==true
and
false1false2true3false4false5false6>4

我都已經用迴圈去指定[0][1][2][3]了

Javascript如果是這樣,我真的快不能把他當程式語言了,最多當個插件,輔助用的。

我可以問一下 你每次都重置

document.getElementById('test').value

你怎麼拿到那個值的

dragonH iT邦大師 1 級 ‧ 2020-01-21 17:20:31 檢舉

最簡單的

你把你有疑問的

console.log 就了解了

BeEvil_Y iT邦新手 5 級 ‧ 2020-01-22 14:37:24 檢舉

謝謝
我可以再問幾個小問題嗎?

我看了你的codepen裡面的東西之後

  1. 裡面的E還有el是指什麼?
    如果是指Element,為什麼還有分e與EL?
    為什麼我GOOGLE半天沒網站在寫e與el
    我看的出來那是縮寫,像是HTML語言裡的li、ul、ol
    就是list、Unorderlist、orderlist

  1. 我嚐試去修改 length: 5 變成 length:12753。
    結果改完執行以後,我電腦就當機了,為什麼?
    他一直秀一大堆視窗,上面寫記憶體溢出,關都關不完。

  1. 為什麼你的HTML長那樣?正常不是會有大小於包起來?
    是因為有用了JQ或NODE嗎?還是VUE??
    或是less,LASS?
BeEvil_Y iT邦新手 5 級 ‧ 2020-01-22 14:53:41 檢舉

@dragonH
最簡單的 你把你有疑問的 都 console.log 就了解了

感謝,自從開始用console.log來看結果後。
發現Javascript是個很神奇的語言。

BeEvil_Y iT邦新手 5 級 ‧ 2020-01-22 15:05:57 檢舉

@listennn08
我可以問一下 你每次都重置,你怎麼拿到那個值的

你好,我一定要重置。
其實你們看的是有盲點的,因為避免你們眼花,我只貼javascript,其他的我都沒有貼。
如果你們只是單純把我的CODE貼到指定「軟體、平台」去跑,一定跑不出來。

  document.getElementById('test').value='';

因為我的做法就是Sum=Sum+1。

而除非網頁重整或閒置過久(記憶體出狀況),不然永遠都不會是「初始值」。

所以他每按一次「下拉式清單」,就會在我指定的ID為「Test」的不管是div,p,span,h1~h6,text等等,先把資料清掉,再把「數值」加進去。

BeEvil_Y iT邦新手 5 級 ‧ 2020-01-22 15:14:21 檢舉

???為什麼我回覆的帖是下方,都會跑來這串,是不是IT邦幫忙的CODE架構有問題

我明明按的是「最下面回覆的」回應旁的送出(BUTTON),為什麼重整以後,訊息是跑到這串?有誰可以幫忙回報給這個「網站管理人」嗎?

這個網站的留言系統「資料庫主鍵」是不是沒設定好?
還是說如果我有在這串打字,但我跑的下面的留言串打字在按送出。
這樣會促成「我按送出後」在最下面的那串字,會跑來覆蓋掉我最前面打的字,然後「主鍵」是算在前面?

如果「問題:發在別串的回應,會跑到其它串」是因為使用者「在分別二串都點擊了,並留下回應」。
導致「按下送出後,系統會把最後面的回覆拿到第一個串來計算」
那這網站的程式碼是不是要再加幾個FUNCTION來判斷?

1
listennn08
iT邦新手 2 級 ‧ 2020-01-21 16:23:04
if((op[i].selected == true)&&(op[i].index > 4)

你看要改這樣

if((op[i].selected == true)&&(op[i].index > 4))

還這樣

if(op[i].selected == true && op[i].index > 4)

其實更精簡的話,這樣也可以吧(?

if(op[i].selected && op[i].index>4)

畢竟如果op[i].selected真的等於true的話,他也是回傳true,所以op[i].selected算是多餘的。
PS:如果我有在跟錯鞭小力點

可以啊 我只是照著他打而已XD

BeEvil_Y iT邦新手 5 級 ‧ 2020-01-22 14:58:15 檢舉

我原本很不想用switch...case,因為判斷式複雜度沒有大於5,或是要「過濾」。
就不是那種超過百萬筆的大型資料庫,還要分裝分類(過濾)減少伺服器負擔。
所以我的邏輯思維~如下
頂多就讓他菱型走(是/否)帶過去就好了。
事實證明我是錯的,謝謝。

我要發表回答

立即登入回答