JavaScript-Lesson-3

學會動態修改 html 元素中的內容

by 000dd

HTML

<div class="wrap">
  <input class="name" id="keyword" type="text" placeholder="輸入用戶姓名"/>
  <div class=btn>
    <button onclick="order()">我要訂購</button>
    <button onclick="introduce()">認識工廠</button>
  </div>
 
  <div class="list">
    <p class="order">您的訂單</p>
    <hr>
    <p>顧客姓名:<span id="customer_name"></span></p>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

@keyframes example {
    0% {
    background: #4CAF50;
    transform: rotate(0deg);
  }
  
    50% {
    background: #4CAF50;
    transform: scale(1.2);
    
  }

    100% {
      background: #3e8e41;
      
  }
}

 .wrap{
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
.name{
   margin: 18px 0;
   font-weight: 800;
   border-radius: 5px;
}
.list{
   width: 300px;
   height: 330px;
   background-color: #ccc;
}
p{
  padding: 0 0 0 20px;
}
.order{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
}
  button{
    width: 70px;
    height: 30px;
    margin-bottom: 15px;
    color: white;
    background: #4CAF50;
    border: none;
    border-radius: 40px;
    box-shadow: 0px 7px #999;
    cursor: pointer;
  }

  button:hover {
    animation-name: example;
    animation-duration: 1.5s;
  }

  button:active {
    background: #3e8e41;
    box-shadow: 0px 4px #999;
  }

JavaScript

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

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