Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > getElementByID ไม่แสดง ผล แต่ ใส่ชื่อ ตามฟอร์มเลย แสดง ผล ทำไมเป็นเช่นนั้น

getElementByID ไม่แสดง ผล แต่ ใส่ชื่อ ตามฟอร์มเลย แสดง ผล ทำไมเป็นเช่นนั้น

เริ่มหัวข้อใหม่

เมจิ

โพสกระทู้ ( 116 )
บทความ ( 2 )

สมมติ มี txtbox ชื่อ a b c

ลองเขียน

Code (Java)

var aArr= new Array();
aArr[0]='a';
aArr[1]='b';
aArr[2]='c';
var i=0;

for(i=0;i<=2;i++)
{
     document.form.aArr[i].value='';  //  แบบนี้ก็ไม่ออก                                         
     document.form.getElementByID(aArr[i]).value='';  // แบบนี้ก็ไม่ออก               
}
// หากทำการ Block  For ทั้งหมด หรือลบ Loop For ทิ้ง แล้วพิพม์แค่  document.form.a.value='';    แบบนี้ ค่าในฟอร์มหายเลย
// อยากทราบว่า การเชื่อมต่อ ด้วย ตัวแปร์ ใน java ใช้ยังไง

เมื่อ script ทำงาน txtbox ชื่อ a b c มันไม่เท่ากับค่าว่างเปล่า

Tag : PHP, JavaScript, JAVA

Date : 2013-03-01 12:02:50

By : เจ้าปัญหา

View : 2843

Reply : 9

No. 1

earthchie

โพสกระทู้ ( 65 )
บทความ ( 1 )

ชื่อ กับ ไอดี ไม่เหมือนกันนะครับ

ถ้าเป็นแบบนี้ ต้องใช้ getElementsByName นะครับ

Code

ผลลัพทธ์จากฟังก์ชันนี้ จะได้ element ออกมาเป็น array
ซึ่งต่างกับ getElementById ที่ได้ element มาแค่ตัวเดียว

ดังนั้น ในกรณีนี้ มี element แต่ละชื่อแค่อันเดียว เวลาเรียกใช้ต้องใส่ index ด้วยนะครับ

Code (JavaScript)

var aArr= new Array();
aArr[0]='a';
aArr[1]='b';
aArr[2]='c';
var i=0;

for(i=0;i<=2;i++)
{                                
     var elements = document.getElementsByName(aArr[i]);
     elements.[0].value = '';          
}

Date : 2013-03-01 12:15:08

By : earthchie

No. 2

เมจิ

โพสกระทู้ ( 116 )
บทความ ( 2 )

<input type="text" name="a" id="a" />
เหมือนกันทั้งสองเลยนะ ใช้
แต่ยังใช้ getElementsByID ไม่ได้จ้า

ต้องทำไงหรอ ขอตัวอย่างการใส่ index หน่อยจ้า

Date : 2013-03-01 13:55:54

By : เจ้าปัญหา

No. 3

earthchie

โพสกระทู้ ( 65 )
บทความ ( 1 )

getElementsByID ไม่มี s หลัง Element นะครับ เป็น getElementById

เรื่อง index ข้ามไปก่อนก็ได้ครับ เดี๋ยวจะงง

ลองเอาโค้ดนี้ไปใส่ notepad แล้วเซฟชื่อเป็น อะไรก็ได้ .html แล้วรันดูนะครับ
น่าจะทำให้เข้าใจการทำงานของ javascript มากขึ้น

Code

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test</title>
</head>
<body>
	A: <input type="text" name="a" id="a" value="a" /><br/>
	B: <input type="text" name="b" id="b" value="b" /><br/>
	C: <input type="text" name="c" id="c" value="c" /><br/>
	
	<br />
	<br />
	
	<input type="button" value="Clear A" onClick="clearValueById('a')" />
	<input type="button" value="Clear B" onClick="clearValueById('b')" />
	<input type="button" value="Clear C" onClick="clearValueById('c')" />
	
	
	<script type="text/javascript">
	function clearValueById(id){
		document.getElementById(id).value = '';
	}
	</script>
</body>
</html>

Date : 2013-03-01 14:23:40

By : earthchie

No. 4

เมจิ

โพสกระทู้ ( 116 )
บทความ ( 2 )

คือตอนนี้ ใส่แค่
ในฟอร์ม เป็น
<img name="a"></img>
<img name="b"></img>
<img name="c"></img>
......... จนถึง z โน้น แต่รู้จำนวนรอบที่แท้จริง

document.form.a.src='images/check_16x16.gif'; ภาพ ออก ชัวส์

แต่อยากทำเป็น array จ้า ไม่รู้ว่าต้องทำอย่างไร เลยพยามเขียนได้ว่า

Code (Java)

var aArr= new Array();
aArr[0]='a';
aArr[1]='b';
aArr[2]='c';
var i=0;

for(i=0;i<=2;i++)
{
     document.form.aArr[i].src='images/yahoomail.png';  //  แบบนี้ก็ไม่ออก                                         
     document.form.getElementByID(aArr[i]).src='images/yahoomail.png';  // แบบนี้ก็ไม่ออก               
}


// แต่ลบ  for{} ออก จากนั้นพิมพ์ แค่ document.form.a.src='images/yahoomail.png'  แบบนี้ รูปแสดงเลย

ยังไม่ค่อยเข้าใจ จำวพก getElementByID , Name และการใช้ index ที่ ได้เกริน มา ค่ะ

Date : 2013-03-01 14:24:59

By : เจ้าปัญหา

No. 5

เมจิ

โพสกระทู้ ( 116 )
บทความ ( 2 )

ไม่ใช่อ้า ผิดๆ ยังไม่ออก เลย ขอลองแปบ

ประวัติการแก้ไข
2013-03-01 14:29:04

Date : 2013-03-01 14:26:17

By : เจ้าปัญหา

No. 6

earthchie

โพสกระทู้ ( 65 )
บทความ ( 1 )

ต่อเลยนะครับ ผมเอาโค้ดคุณเมจิด้านบน มาทำเป็นฟังก์ชันชื่อ clearValue()
ซึ่งก็ทำงานได้ดีครับ

Code

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test</title>
</head>
<body>
	A: <input type="text" name="a" id="a" value="a" /><br/>
	B: <input type="text" name="b" id="b" value="b" /><br/>
	C: <input type="text" name="c" id="c" value="c" /><br/>
	
	<br />
	<br />
	
	<input type="button" value="Clear A" onClick="clearValueById('a')" />
	<input type="button" value="Clear B" onClick="clearValueById('b')" />
	<input type="button" value="Clear C" onClick="clearValueById('c')" />
	
	<input type="button" value="Clear All" onClick="clearValue()" />
	
	
	<script type="text/javascript">
	function clearValueById(id){
		document.getElementById(id).value = '';
	}
	
	function clearValue(){
		var aArr = new Array();
		aArr[0]='a';
		aArr[1]='b';
		aArr[2]='c';
		
		var i=0;

		for(i=0;i<=2;i++)
		{       
			document.getElementById(aArr[i]).value = '';
		}
	}
	</script>
</body>
</html>

Date : 2013-03-01 14:30:21

By : earthchie

No. 7

earthchie

โพสกระทู้ ( 65 )
บทความ ( 1 )

อ้อ เคครับ งั้นล่าสุด มีแต่ name ไม่มี id เนาะครับ

Code (JavaScript)

	var aArr= new Array();
	aArr[0]='a';
	aArr[1]='b';
	aArr[2]='c';
	var i=0;

	for(i=0;i<=2;i++)
	{
		var img = document.getElementsByName(aArr[i]); // สังเกตว่า เป็น getElements คือมี s หลัง Element นั่นหมายความว่ามันจะให้ผลลัพธ์ออกมาเป็น array ครับ
		img[0].src = 'images/yahoomail.png'; // ตรงนี้แหละครับ ที่บอกให้ใส่ index ด้วย ซึ่ง index คือ 0
	}

Date : 2013-03-01 14:34:17

By : earthchie

No. 8

เมจิ

โพสกระทู้ ( 116 )
บทความ ( 2 )

ตอบความคิดเห็นที่ : 7 เขียนโดย : earthchie เมื่อวันที่ 2013-03-01 14:34:17

รายละเอียดของการตอบ ::

มันทำไม วนไม่ครบ 3 รอบ อ้า มันทำแค่รอบเดียวเอง

เปลี่ยนรูปเดียวเอง

ประวัติการแก้ไข
2013-03-01 14:40:26

Date : 2013-03-01 14:39:08

By : เจ้าปัญหา

No. 9

earthchie

โพสกระทู้ ( 65 )
บทความ ( 1 )

คือมันเป็นอย่างงี้ครับ ฟังก์ชัน พวกตระกูล getElement เนี่ยมันมีหลายอัน

getElementById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()

สังเกตว่า ทุกอัน มี s หลัง Elements หมดเลย ยกเว้น getElementById()

มาลองดูนะครับ ว่า input ตัวนี้อันเดียว จะเรียกใช้งานผ่านฟังก์ชันแต่ละแบบด้านบนได้อย่างไร

Code

<input type="text" name="myName" id="myID" class="myClass" />

จะยกตัวอย่างเป็นการใส่คำว่า sample value ลงไปใน value ของมันนะครับ

1. getElementById()

Code (JavaScript)

document.getElementById('myId').value = 'sample value';

2. getElementsByName()

Code (JavaScript)

var element = document.getElementsByName('myName');
element[0].value = 'sample value';

3. getElementsByTagName()

Code (JavaScript)

var element = document.getElementsByTagName('input');
element[0].value = 'sample value';

4. getElementsByClassName()

Code (JavaScript)

var element = document.getElementsByClassName('myClass');
element[0].value = 'sample value';

ทั้งนี้เราต้องมั่นใจนะครับ ว่าในหน้านั้น ไม่มี element ที่เข้าเงื่อนไขตัวอื่นอยู่จริง
ไม่เช่นนั้น element[0] อาจจะไม่ใช่ element ที่เราอยากได้ก็ได้ครับ
ทางที่ดี และเจาะจงที่สุด คือการกำหนด id ให้กับ element นั้นๆ แล้วเรียกใช้งานผ่าน getElementById() ครับ

Date : 2013-03-01 14:41:18

By : earthchie

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : getElementByID ไม่แสดง ผล แต่ ใส่ชื่อ ตามฟอร์มเลย แสดง ผล ทำไมเป็นเช่นนั้น

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก