Take and display user's order details

HTML

<label for="name" style="font-size: 30px;">姓名:
  <input type="text" id="name" placeholder="請輸入名字">
</label>
<br>
<select  id="gender" style="margin: 30px; font-size: 30px;">
  <option value="man">男性</option>
  <option value="woman">女性</option>
</select>
<br>

<select  id="mycloth" style="margin: 30px;">
  <option value="coat">外套</option>
  <option value="colth">上衣</option>
  <option value="pants">褲子</option>
</select>
<br><br><br>


<label for = 'ordernumber' style='font-size:30px;'>訂購數量:
  <input type='text' id='ordernumber' placeholder='請輸入數量'>

</label>
<br>
<br>
<br>

<div class="list" >
  <div>您的訂單</div>
  <br>
  <div>您的名字：<span id="changname"></span></div>
  <br>
  <div>衣服分類：<span id="cloth1"></span></div>
  <br>
  <div>衣服類型：<span id="cloth2"></span></div>
  <br>
  <div>訂購數量：<span id="orders"></span><span>件</span></div>
  <br>
  <div>初步估價：<span id="price"></span><span>元</span></div>

  <br>
</div>



<br>
<button class="order" onclick="myorder()">我要訂購</button>
<button class="rez" onclick="myrez()">認識工廠</button>

CSS

body {
  text-align: center;
  background-color:pink;
}
        

button {
  width: 100px;
  height: 40px;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  margin: 20px;
  font-family: 'Courier New', Courier, monospace;
}

input {
  width: 200PX;
  height: 30px;
  font-size: 30px;
}

.list {
  font-size: 30px;
}

#mycloth {
  font-size: 30px;
}

.list {
  background-color: antiquewhite; 
  width: 200px; 
  height: auto; 
  font-size: 20px;
  margin: auto;
}

JavaScript

function myorder() {
let orderNumber = document.getElementById('ordernumber').value;
let priceAll = 0 ;
if (orderNumber ==='' || isNaN(orderNumber) || parseInt(orderNumber) <= 0) {
alert('請輸入件數。');
return
}

const nameAll =document.getElementById('name').value;
alert(nameAll +' 您好! 謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');
  document.getElementById('changname').textContent = nameAll;
let menu = document.getElementById('mycloth');
let index = menu.selectedIndex;
let texttt = menu.options[index].text;
document.getElementById('cloth2').textContent = texttt; 

let genderrr = document.getElementById('gender');
let  choose = genderrr.selectedIndex;
let chooose = genderrr.options[choose].text;
document.getElementById('cloth1').textContent = chooose;



if (genderrr.value === 'man') {
alert('「最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！」' )
}else {
alert('「最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！」')
}

alert('您訂購的種類:'+texttt+';您訂購的類型' + chooose);



if (genderrr.value === 'man'){
priceAll = parseInt(orderNumber) * 600
alert(`價格是${priceAll}`)
}else {
priceAll = parseInt(orderNumber) * 500
alert(`價格是${priceAll}`)
}

document.getElementById('orders').textContent = orderNumber;
document.getElementById('price').textContent = priceAll;
}

function myrez() {
const nameAll = document.getElementById('name').value;
alert(nameAll + ' 您好! 我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！')
}