Change Page Content

ကၽြန္ေတာ္တို႕ေတြ JavaScript နဲ႕ DOM object ကို ရယူျပီးေတာ့ အထဲမွာ ရိွတဲ့ content ေတြကိုလည္း ေျပာင္းလဲ ႏိုင္ပါတယ္။ ကၽြန္ေတာ္တုိ႕ေတြ id နဲ႕ DOM ကို ရယူပါမယ္။ ျပီးေတာ့ innerHTML method ကို သံုးျပီး အထဲက HTML code ကို ေျပာင္းလဲႏိုင္ပါတယ္။ ေအာက္မွာ ဥပမာ code ေလးၾကည့္ရေအာင္။

<html>
<head>
  <title>JavaScript</title>
  <script>
  function updateText()
  {
    document.getElementById('content').innerHTML = document.getElementById('update_text').value;
  }
  </script>
</head>
<body>

  <section>
    <input type="text" value="" id="update_text">
    <input type="button" value="Update" onclick="updateText()">
  </section>

  <section id="content">
    Hello World!
  </section>
</body>
</html>

ဒီ code ေလးမွာ text box ထဲကို စာရိုက္ထည့္ျပီး update လုပ္လိုက္တဲ့ အခါ Hello World! ဆိုတဲ့စာ အစား text box က စာ ေျပာင္းသြားတာကို ေတြ႕ရပါလိမ့္မယ္။

Figure 10-13

Figure 10-13

Figure 10-13

Figure 10-14

Text box ထဲက data ကို လုိခ်င္ရင္ value property နဲ႕ ဖတ္ရပါတယ္။ div , section စတဲ့ elemnt ထဲက HTML data ေတြကို ေျပာင္းခ်င္ရင္ေတာ့ innerHTML property ကို update လုပ္ေပးရပါတယ္။

results matching ""

    No results matching ""