JSFiddle - React, Tailwind, and code Playground

by wenwu

HTML

<div all>
<div class ="title">
  <lable for="" class="">名字</lable> 
  <input id ="name" type="text"   placeholder="輸入您的大名">
</div>



<div class="button">
  <button onclick="mf()">我要訂購</button>
  <button onclick="mf1()">認識工廠</button>
</div>


  <div class="order">
      <h3 class="h3"> 你的訂單</h3>
      <span>顧客姓名:</span>
      <span id="customer"></span>
  </div>
</div>

CSS

/* .all{
  width: 80%;
   display: flex;
   justify-content: center;
    gap: 20px;
    height: 500px;
    margin: 0 auto;
    align-items: center;
    flex-flow: column;
} */

.title{
  text-align: center;
}
.button {
  /* width: 200px; */
  font-size: 25px;
 text-align: center;

}


.h3{
  margin: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-align: center;
}

.order{
 width: 100%;
 text-align: center;
}

JavaScript

/* function mf() {
  alert('謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');

} */

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

}

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

/* var str = '萬事順利'; */
/* document.getElementById('welcome').textContent = str; */