button

by Fanny60714

HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <div class="box">
    <div id="form">
      姓名:<input id="name" type="text" value="Gina" /><br>
      服裝分類:
      <select id="types">
        <option value="boy">男裝</option>
        <option value="girl">女裝</option>
      </select><br>
      服裝類型:
      <select id="genres">
        <option value="coat">外套</option>
        <option value="cloth">上衣</option>
        <option value="pants">下身</option>
      </select>
    </div>
    <div>
      <button onclick="buy()" id="btn1">我要訂購</button>
      <button onclick="more()" id="btn2">認識工廠</button>
    </div>
  </div>
  <div class="box">
    <h2>您的訂單</h2><hr>
    顧客姓名:<span id="p"></span><br>
    服裝分類:<span id="c"></span><br>
    服裝類型:<span id="t"></span>
  </div>
</body>
</html>

CSS

#btn1 {
  background-color: #fcc428;
  border: 1px solid;
  border-radius: 15px;
  padding: 8px;
}

#btn1:hover {
  background-color: #ebbf44;
}

#btn2 {
  background-color: #9aedf5;
  border: 1px solid;
  border-radius: 15px;
  padding: 8px;
}

#btn2:hover {
  background-color: #86d2d9;
}

#form {
  margin: 10px 0px 10px 0px;
}

input {
  border-radius: 15px;
  padding: 8px;
  margin: 0px 0px 0px 5px
}

select {
  border-radius: 15px;
}

.box {
  margin: 5px;
  padding: 8px;
  border: 1px dotted;
  border-radius: 15px;
}

JavaScript

function buy(){
	var name = document.getElementById('name').value;
  
  var types = document.getElementById('types');
  var index2 = types.selectedIndex;
  var type = types.options[index2].text;
  
  var genres = document.getElementById('genres');
  var index = genres.selectedIndex;
  var genre = genres.options[index].text;
  
	alert(name+"您好!謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！");
  document.getElementById('p').textContent = name;
  document.getElementById('c').textContent = type;
  document.getElementById('t').textContent = genre;
  
  if(type == 'boy'){
  	alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
  } else if(type = 'girl'){
  	alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！")
  }
}

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