JSFiddle - React, Tailwind, and code Playground

by CryptoMars

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<nav>
  <div class="navbar text-bg-primary p-3">
    <h1 class="m-0">成衣工廠線上下單</h1>
    <ul class="navbar-nav list-unstyled">     
        <li>
    <button type="button" class="btn btn-info" onclick="about()">認識工廠</button>
  </li>      
    </ul>
  </div>
</nav>
<div class="container">
  <div class="d-flex align-items-center my-3">
     <label class="form-label mb-0" for="name">姓名：</label>
     <input class="form-control w-auto" type="text" id="name" placeholder="請輸入姓名">
   </div> 
  <form>
    <button type="button" class="btn btn-success mb-5" onclick="order()">我要訂購</button>
    <hr>
    <section>
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">您的訂單</h3>
        </div>
        <div class="card-body">
          <ul class="list-unstyled">
            <li>顧客姓名：<span class="order-cname"></span></li>
          </ul>   
        </div>
      </div>    
    </section>   
</form>
</div>

JavaScript

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

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