JSFiddle - React, Tailwind, and code Playground

HTML

<input id="username"type="text"placeholder="請輸入姓名" value="王小明"/>

<button class='btn'onclick="myFunction()">我要訂購</button>

<button class='btn' onclick="myFunction2()">認識工廠</button>


<div class="order">
<h2>【我要訂購】</h2>
<div>
<ul>
  <li>你的訂單</li>
  <li>顧客姓名：<span id="ordername"></span></li>
</ul>
</div>
</div>

CSS

.btn {
  border:1px solid grey;
  border-radius:5px;
  background-color:#fff;
  box-shadow: rgba(149, 157, 165, 0.2) 1px 8px 24px;
}

.btn:hover{
 background-color:#58B2DC;
 cursor:pointer;
}

#username{
  border:1px solid grey;
  border-radius:5px;
  box-shadow: rgba(149, 157, 165, 0.2) 1px 8px 24px;
  width:10vw;
}

.order{
  margin:1rem;
 width:30vw;
 height:100vh;
 background-color:#f5ebe0;
 box-shadow: rgba(149, 157, 165, 0.2) 1px 8px 24px;
 border-radius:5px;
}

.order h2{
  text-align:center;
}

#ordername{
  font-weight:bold;
}


li{
  margin:5px;
  list-style-type: none;

}

JavaScript

const myFunction=()=>{
//取得Text輸入框內的文字
let username = document.getElementById("username").value;
alert(username + "您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！");

document.getElementById("ordername").textContent = username;

//也可以使用模版字符串
//alert(`${username}您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`);
}

const myFunction2=()=>{
alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
}