<!DOCTYPE html> <%@page contentType="text/html; charset=UTF-8"%> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("body").css("background-color","yellow"); $("#div2").hide(); $("#btn1").click(function(){ $("#div2").show(); $("#div1").text($("#txt1").val()); $("#div1").css("background-color","Green"); $("#div2").css("background-color","Red"); $("body").css("background-color","pink"); alert("ชื่อของคุณคือ ="+$("#div1").text()); }); }); </script> </head> <body> <p>กรุณากรอกชื่อ..</p> <span id="div2">ชื่อของคุณคือ = </span> <span id="div1"></span><br> <input type="text" id="txt1"> <input type="button" id="btn1" value="ตกลง"> </body> </html>