ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

พูดคุย แลกเปลี่ยน ปัญหา การเขียน 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

ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

Post by cannoi »

จากสคริปต์นี้ครับ

<html>
<head>
<title> New Document </title>
<script type="text/javascript">
<!--
score=0
function quastion(){
setSum()
if(answer==n3){
score=score+1
alert("คุณตอบ "+answer+" ถูกต้องครับ ได้คะแนน "+score)
}
if(answer!=n3){
score=score-1
alert("คุณตอบ "+answer+" ไม่ถูกครับ ได้คะแนน "+score)
}
}
function setSum(){
n1=parseInt(Math.random()*9+2)
n2=parseInt(Math.random()*9+2)
n3=n1*n2
answer=prompt(n1+" x "+n2 +" = ? ","")
}

//-->
</script>
</head>
<body><center>
<form name="myForm">
<input type=button onClick='quastion()' value="ตั้งโจทย์" >
</form></center>
</body>
</html>
//----------------------------------

จะแก้ไขไม่ใช้ prompt และ ไม่ใช้ alert
แต่เปลี่ยนเป็นให้เติมคำในช่อง textbox
เมื่อคลิกปุ่มตรวจสอบแล้ว มีข้อโต้ตอบและบอกคะแนน
ถ้าตอบถูก คะแนนก็จะเพิ่มขึ้นเรื่อยๆ
cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

Re: ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

Post by cannoi »

เคยทำเองได้แค่นี้ครับ
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
<!--
function Add(){
answer=window.document.myform.ansbox.value;
if(answer==n3){
result="คุณตอบ "+answer+" ถูกต้องครับ"
}
if(answer!=n3){
result="คุณตอบ "+answer+" ผิดครับ"
}
window.document.myform.resultbox.value=result
}
//-->
</script>
</head>
<body>
<p align=center>
<script type="text/javascript">
<!--
n1=parseInt(Math.random()*9+2)
n2=parseInt(Math.random()*9+2)
n3=n1*1+n2*1
document.write(n1+" + "+n2+" = ?")
//-->
</script>
<form name ="myform">
พิมพ์คำตอบ<input type ="text" name="ansbox" value="" size=35><br>
แจ้งผล........<input type ="text" name="resultbox" value="" size=35>
<br>
</form><br>
<input type =button onClick="Add()" value="คลิกตรวจ">
</form>
</p>
</body>
</html>

พอตอบแล้ว อยากให้มีโจทย์ขึ้นมาใหม่ แต่ทำไม่ได้
ถ้าทำเป็นสองฟังก์ชันก็ไม่work
หรือ
เมื่อทำให้ตั้งโจทย์ใหม่ได้แต่คะแนนไม่เพิ่ม

ช่วยด้วยครับ
touleg
PHP Super Member
PHP Super Member
Posts: 480
Joined: 25/01/2010 11:57 pm
Contact:

Re: ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

Post by touleg »

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<script type="text/javascript">
<!--
var n3=0;
var active=true;
function Add(){	
	var answer=parseInt(document.getElementsByName("ansbox")[0].value);	
	var result = document.getElementsByName("resultbox")[0];
	var point = document.getElementsByName('point')[0];
	if(active)
	{
		if(answer==n3){
			result.value ="คุณตอบ "+answer+" ถูกต้องครับ";
			point.value = parseInt(point.value)+1;
		}else{
			result.value ="คุณตอบ "+answer+" ผิดครับ";
		}
		active = false;
	}else{
		result.value ="กรุณากดเลือกข้อถัดไป";
	}
}

function calculate()
{
	  var n1=parseInt(Math.random()*9+2);
	  var n2=parseInt(Math.random()*9+2);
	  n3=n1+n2;
	  document.getElementById('require').innerHTML = n1+" + "+n2+" = ?";
	  active=true;
}
//--> 
</script>
</head>
<body onload="calculate();">
<div id="require"></div>
<div id="inputblock">
    <form name ="myform">
        แต้ม <input type="text" id="point" name="point" size="35" disabled="disabled" value="0"/><br />
        พิมพ์คำตอบ<input type ="text" name="ansbox"  size="35"><br />
        แจ้งผล........<input type ="text" name="resultbox" disabled="disabled"  size="35"><br />
        <input type ="button" onClick="Add();" value="คลิกตรวจ"> 
        <input type="button" onclick="calculate();" value="ข้อถัดไป" />
    </form>
</div>
</body>
</html>
cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

Re: ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

Post by cannoi »

ขอบพระคุณมากๆ
ขอบพระคุณมากๆ
ขอบพระคุณมากๆ
ขอบพระคุณมากๆ
ขอบพระคุณมากๆ
touleg
PHP Super Member
PHP Super Member
Posts: 480
Joined: 25/01/2010 11:57 pm
Contact:

Re: ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

Post by touleg »

ฝึกทำด้วยนะครับจะได้เก่งๆ
cannoi
PHP Jr. Member
PHP Jr. Member
Posts: 26
Joined: 08/08/2011 9:30 am

Re: ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

Post by cannoi »

ขอบคุณมากที่เป็นห่วง
รู้สึกว่าสคริปต์ เฟอร์นิเจอร์เยอะ
และกำลังมึนกับคำ getElementsByName
<div id="require">
<div id="inputblock
active

เพิ่งจะเริ่มเรียน การใช้ prompt alert ตัวแปรและfunction การใช้ if การใช้คำสั่งวนลูป form และการใช้หลายฟังก์ชันร่วมกัน(แบบง่ายๆ ไม่มีเฟอร์นิเจอร์)
touleg
PHP Super Member
PHP Super Member
Posts: 480
Joined: 25/01/2010 11:57 pm
Contact:

Re: ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

Post by touleg »

คือเวลาเราอ้างถึง element เราสามารถอ้างได้หลายแบบ
จะอ้างถึงเป็นลำดับขั้นแบบ dom (Document Object Model) ก็ได้
อ้างไปที่ tag ก็ได้
อ้างไปที่ name ก็ได้
อ้างไปที่ id ก็ได้

ขึ้นอยู่กับเรา กับสถานการณ์ บางทีเราไม่สามารถอ้างถึง name กับ id ได้ก็ต้องเข้าเป็นลำดับขั้นไปตามวิธีของ dom

โค้ดที่เขียนให้ลองแปลงเป็นแบบที่เรียนแล้วก็ได้นะครับ มีตรงไหนไม่เข้าใจก็มาโพสถามได้
touleg
PHP Super Member
PHP Super Member
Posts: 480
Joined: 25/01/2010 11:57 pm
Contact:

Re: ช่วยแก้สคริปต์ให้ด้วยครับ (จากการใช้ prompt เป็นการใช้ textbox ของ form)

Post by touleg »

- getElementsByName คำสั่งนี้ใช้ในการอ้างถึงชื่อของ element จะเห็นว่า Element เติม s ด้วย แสดงว่ามันอ้างถึง element ได้หลายตัว ก็แน่นอนถามว่าเรากำหนดชื่อให้กับ element เหมือนกันได้ไหม ก็ตอบว่าได้ เช่น

Code: Select all

<input type="radio" name="name1" value="1" />
<input type="radio" name="name1" value="2"/>
จากโค้ดจะเห็นว่า มันมีชื่อเดียวกันได้ เพราะฉะนั้นเวลาอ้างถึงชื่อต้องระบุด้วยว่าตัวไหน โดยตัวแรกเริ่มจาก 0
อ้างถึงตัวแรก
document.getElementsByName("name1")[0]
อ้างถึงตัวที่สอง
document.getElementsByName("name1")[1]

- <div id="require"> คือ ?

Code: Select all

document.getElementById('require').innerHTML

<div id="require"></div>
ยกโค้ดมาอธิบายให้ดู ก่อนอื่นดูที่ div ก่อนผมตั้ง id ให้กับมัน เพื่อไว้ใช้ในการอ้างถึง โดยใช้ชื่อว่า require
เวลาใช้ javascript อ้างถึงก็อ้างไปที่ id นี้ ถ้าเราอ้างจาก tag div มันจะลำบาก เพราะว่าในโค้ดมี div อยู่หลายอัน เราไม่รุ้ว่าจะเข้าถึง div อันไหน ดังนั้นก็เลยใช้ id เป็นตัวอ้างถึงง่ายกว่า

แต่จะเห็นว่าผมใช้ innerHTML ในการกำหนดค่า ทำไมไม่ใช้ value ก็เพราะว่ามันไม่ใช้ input form แต่มันเป็นแค่ block ดังนั้นเวลาจะอ่านค่าจาก block หรือกำหนดค่าให้มันเราต้องใช้ innerHTML

- ส่วน <div id="inputbox"> ผมใส่ครอบเป็นบล็อกไว้เฉยๆ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “JavaScript & Jquery Ajax”

Who is online

Users browsing this forum: No registered users and 6 guests