JSFiddle - React, Tailwind, and code Playground

by CryptoMars

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<h1 class="text-bg-primary p-3">成衣工廠線上下單</h1>

<form >   
   <div class="mb-3">
     <label class="form-label" for="name">姓名：</label>
     <input class="form-control w-auto" type="text" id="name" placeholder="請輸入姓名">
   </div>
   
   <button type="button" class="btn btn-success mb-3" onclick="order()">我要訂購</button>

  <div>
    <button type="button" class="btn btn-info" onclick="about()">認識工廠</button>
  </div>
</form>

JavaScript

function order(){
	const cname = document.getElementById("name").value;
  
	alert(cname + "您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！");
}

function about(){
	alert("我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！");
}