การใช้ getElementById และ innerHTML

พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

การใช้ getElementById และ innerHTML

Post by cannoi »

พบ โค้ดสองโคดที่แสดงวันที่ โดยใช้ getElementById , innerHTML และไม่ใช้ ดังต่อไปนี้

โค้ดที่ 1 ไม่ใช้...

Code: Select all

<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html> 
โค้ดที่ 2 ใช้...

Code: Select all

<html>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html> 
ส่วนที่ต่างกัน

โค้ดที่ 1

Code: Select all

document.write("<p>" + Date() + "</p>");
โค้ดที่ 2

Code: Select all

<p id="demo"></p>

document.getElementById("demo").innerHTML=Date();
=======================================

หมายเหตุ ขณะนี้กำลังเรียนอยู่ที่นี่ครับ
http://www.w3schools.com/js/js_howto.asp
รู้เรื่องบ้างไม่รู้เรื่องบ้าง อาจจะตั้งคำถามไปด้วย
Last edited by cannoi on 11/08/2011 11:48 pm, edited 2 times in total.

cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

Re: การใช้ getElementById และ innerHTML

Post by cannoi »

มีโค้ดตัวอย่างการใช้ getElementById แต่ยังดูไม่รู้เรื่อง

<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3Schools";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">

</body>
</html> มันทำงานยังไง ยังงงอยู่ กำลังทำความเข้าใจ

cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

Re: การใช้ getElementById และ innerHTML

Post by cannoi »

โค้ดตัวอย่างอีกอันหนึ่ง (นำมาเพื่อศึกษาเอง และเผื่อผู้เข้ามาอ่าน)

Code: Select all

<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>  
  <script type="text/javascript">
			function answer(){
					var textBox = document.getElementById('myText');
					if(textBox.value != "")
								alert("คุณตอบว่า: " + textBox.value)
					else
								alert("พิมพ์คำตอบซิครับ")		
			}
</script>
</HEAD> 
<BODY>
				<input type='text' id='myText' />
				<input type='button' onclick='answer()' value='ตรวจสอบการตอบ' />
 </BODY>
</HTML>
-----------------------------------------------------------
When using the getElementById function, you need to remember a few things to ensure that everything goes smoothly. You always need to remember that getElementById is a method (or function) of the document object. This means you can only access it by using document.getElementById.

Also, be sure that you set your HTML elements' id attributes if you want to be able to use this function. Without an id, you'll be dead in the water.

If you want to access the text within a non-input HTML element, then you are going to have to use the innerHTML property instead of value. The next lesson goes into more detail about the uses of innerHTML.

เมื่อใช้ฟังก์ชัน getElementById ที่คุณต้องจำสิ่งบางอย่างเพื่อให้มั่นใจว่าทุกอย่างเป็นไปอย่างราบรื่น คุณจำเป็นต้องจำ getElementById ว่าเป็น method (หรือฟังก์ชั่น) ของdocument object ซึ่งหมายความว่าคุณเท่านั้นที่สามารถเข้าถึงได้โดยใช้ document.getElementById
สรุปว่า.....

นอกจากนี้ยังให้แน่ใจว่าคุณตั้งค่าคุณสมบัติของHTML elements' id D ของคุณ'ถ้าคุณต้องการสามารถใช้ฟังก์ชันนี้ โดยปราศจากID คุณจะตายในน้ำ
สรุปว่า.....


ถ้าคุณต้องการเข้าถึงข้อความภายในที่ไม่ใช่ - input องค์ประกอบ HTML แล้วคุณจะไปได้ที่จะใช้คุณสมบัติ innerHTML แทนค่า บทเรียนต่อไปจะเข้าสู่รายละเอียดเพิ่มเติมเกี่ยวกับการใช้งานของ innerHTML
สรุปว่า.....

(แปลโดย Google อ่านแล้วงง)
Last edited by cannoi on 12/08/2011 7:06 pm, edited 1 time in total.

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 25211
Joined: 22/09/2008 6:18 pm
Contact:

Re: การใช้ getElementById และ innerHTML

Post by mindphp »

กำหนดว่า id ที่เลือก เราจะทำอะไรกับมัน
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

Re: การใช้ getElementById และ innerHTML

Post by cannoi »

จาก Script นี้

<HTML>
<HEAD>
<TITLE> การใช้ geElemenById </TITLE>
</HEAD>

<BODY>
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('aaa').innerHTML = userInput;
}
</script>
<p>ขอต้อนรับคุณ <b id='aaa'>ผู้มาเยี่ยม</b> </p>
<input type='text' id='userInput' value='' />
<input type='button' onclick='changeText2()' value='พิมพ์ชื่อแล้วคลิก'/>

</BODY>
</HTML>

มี id 2 ตัว คือ
ตัวที่ 1 ทำหน้าที่ รับข้อมูลที่ผู้ใช้ป้อนเข้ามา
ตัวที่ 2 ทำหน้าที่ เป็นตัวแปรที่จะเปลี่ยนข้อความตามข้อ1

ไม่ทราบว่าเข้าใจถูกไหมครับ
คำอธิบายที่ยกมาในความเห็นข้างบนนั้นอ่านแล้ว(ทั้งไทย-อังกฤษ) ไม่รู้เรื่องเลย

cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

Re: การใช้ getElementById และ innerHTML

Post by cannoi »

<HTML>
<HEAD>
<TITLE> innerHTML </TITLE>
</HEAD>

<BODY>
<script type="text/javascript">

function changeText(){ document.getElementById('aaa').innerHTML = 'จงมีความสุขตลอดปี';
}

function changeText2(){ document.getElementById('aaa').innerHTML = 'ให้คนไทยทุกท่านสุขโข';
}

</script>

<p>สวัสดีปีใหม่ <b id='aaa'>ประเทศไทยจงเจริญ</b> </p>
<input type='button' onclick='changeText()' value='เปลี่ยนข้อความ'/>
<input type='button' onclick='changeText2()' value='เปลี่ยนข้อความ2'/>

</BODY>
</HTML>
=========================================
ตัวอย่างนี้มี id ตัวเดียว ทำหน้าที่ใช้ในการเปลี่ยนข้อความ

touleg
PHP Super Member
PHP Super Member
Posts: 480
Joined: 25/01/2010 11:57 pm
Contact:

Re: การใช้ getElementById และ innerHTML

Post by touleg »

id ไม่ได้ใช้ในการเปลี่ยนข้อความครับ มันก็เหมือนชื่อที่เรากำหนดให้แท็กต่างๆ โดยแท็กต่างๆเค้าก็มีค่าเป็นของเค้าเอง
เวลาเราจะไปบอกให้เค้าเปลี่ยนค่าเราก็แค่ส่งคำสั่งเป็นภาษาของเค้าไปบอก ในที่นี้ก็คือ javascript
ซึ่งคำที่ใช้ติดต่อกับ id นี้ก็คือ getElementById('ชื่อidที่จะติดต่อด้วย')
แล้วต่อไปเราจะให้เค้าทำอะไรก็บอกเค้าโดยใช้ method หรือฟังก์ชั่น ที่ต้องการเหมือนกับเป็นคำกริยา การกระทำไปบอกว่าเราต้องการให้เค้าทำอะไร เช่น

Code: Select all

document.getElementById('ชื่อidที่จะติดต่อด้วย').innerHTML
ฟังก์ชั่น innerHTML จะบอกกับไอดีนี้ว่าขอทราบค่าที่คุณมีอยู่หน่อยนะ
แต่ถ้าจะกำหนดค่าให้เค้าก็ให้ใช้

Code: Select all

document.getElementById('ชื่อidที่จะติดต่อด้วย').innerHTML = "ค่าที่ต้องการ"
= "ค่าที่ต้องการ" คือการส่งค่าไปให้ไอดีนี้ ให้เค้าเปลี่ยนค่าใหม่เป็นแบบที่เรากำหนดให้นะ

ส่วน document คือ object ของเอกสารหน้าที่เราเปิดอยู่ ดังนั้นจะทำอะไรกับเอกสารหน้านี้ก็ต้องอ้างไปที่ document ก่อน

cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

Re: การใช้ getElementById และ innerHTML

Post by cannoi »

ขอบคุณมากครับ

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “JavaScript & Jquery Ajax”

Who is online

Users browsing this forum: No registered users and 4 guests