ต้องการใช้ Html ให้แสดง function ที่ต้องการ

กระทู้คำถาม

การพัฒนา Web Application การพัฒนาซอฟต์แวร์

<title>เปลี่ยนสี</title><script src="" charset="utf-8"></script><header>
  <style><?php        #code color     //รายชื่อสี ?>
        .color1{ color: #00FF00; }<?php //สีเขียว ?>
          .color2{ color: #FF4500; }<?php //สีส้ม  ?>
            .color3{ color: #FF0000; }<?php //สีแดง ?>
              .color4{ color: #FFFFFF;    }<?php //สีขาว ?>
                .color5{ color: #CC00FF; }<?php //สีม่วง ?>
<?php      #backgruod color           #namecolor ?></style>
<body>เปลี่ยนสีคำ</body><br>
<input type="text"  name="ch1"id="ch1" value=""><br>
<input type="text"  name="ch2"id="ch2" value=""class="color1"><br>
<input type="button"name="   "id="   " value="กดเพื่อเปลี่ยนเป็นสี เขียว " onclick="a1();">
<input type="buuton"name="   "id="   " value="กดเพื่อเปลี่ยนเป็นสี ส้ม "  onclick="a2();">
<input type="button"name="   "id="   " value="กดเพื่อเปลี่ยนเป็นสี สีแดง" onclick="a3();">
<input type="button"name="   "id="   " value="กดเพื่อเปลี่ยนเป็นสี สีขาว" onclick="a4();">
<script type="text/javascript">
function a1() { var n1=ch1.value; ch2.value=n1;}
function a2() { var n2=ch1.value; ch2.value=n1;}
function a3() { var n3=ch1.value; ch2.value=n1;}
function a4() { var n3=ch1.value; ch2.value=n1;}
</script>
</header>

ตรง <input type="text"  name="ch2"id="ch2" value=""class="color1"><br>  อยากทำให้สีเปลี่ยนไปที่ฟังชั่นที่กำหนดอ่ะฮ่ะแต่ไม่รู้ว่าใส่อย่างไร
เลยใช้ class แทนไปก่อน อยากจะใช้ Text เดียวแล้วใช้ onclick เปลี่ยนสีไปตามที่ button ต่างๆอ่ะฮ่ะ พอทราบมั้ยจะทำอย่างไรให้เรียกใช้ class ผ่าน fuction