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

cannoi · **โพสต์แล้ว:** 08/08/2011 9:48 am

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

<html>
<head>
<title> New Document </title>
<script type="text/javascript">

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

จะแก้ไขไม่ใช้ prompt และ ไม่ใช้ alert
แต่เปลี่ยนเป็นให้เติมคำในช่อง textbox
เมื่อคลิกปุ่มตรวจสอบแล้ว มีข้อโต้ตอบและบอกคะแนน
ถ้าตอบถูก คะแนนก็จะเพิ่มขึ้นเรื่อยๆ

cannoi · **โพสต์แล้ว:** 08/08/2011 10:29 am

เคยทำเองได้แค่นี้ครับ
<html>
<head>
<title> New Document </title>
<script type="text/javascript">

</script>
</head>
<body>
<p align=center>
<script type="text/javascript">

</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 · **โพสต์แล้ว:** 08/08/2011 4:54 pm

โค้ด:

<!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 · **โพสต์แล้ว:** 08/08/2011 8:13 pm

ขอบพระคุณมากๆ
ขอบพระคุณมากๆ
ขอบพระคุณมากๆ
ขอบพระคุณมากๆ
ขอบพระคุณมากๆ

touleg · **โพสต์แล้ว:** 08/08/2011 8:16 pm

ฝึกทำด้วยนะครับจะได้เก่งๆ

cannoi · **โพสต์แล้ว:** 08/08/2011 11:08 pm

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

เพิ่งจะเริ่มเรียน การใช้ prompt alert ตัวแปรและfunction การใช้ if การใช้คำสั่งวนลูป form และการใช้หลายฟังก์ชันร่วมกัน(แบบง่ายๆ ไม่มีเฟอร์นิเจอร์)

touleg · **โพสต์แล้ว:** 08/08/2011 11:46 pm

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

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

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

touleg · **โพสต์แล้ว:** 09/08/2011 12:04 am

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

โค้ด:

<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"> คือ ?

โค้ด:

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"> ผมใส่ครอบเป็นบล็อกไว้เฉยๆ