{Day22} 小公主訂單網頁嘗試集＿第二十二集＿實作初天

2022 iThome 鐵人賽

DAY 22

Modern Web

訂單網頁嘗試集系列第 22 篇

14th鐵人賽網頁教學網頁設計

icetong

2022-10-07 18:37:33

408 瀏覽

分享至

恭喜大家開了雙十連假的前端，也邁入第四週了，484特累特想睡呢～沒事的我們終於要開始結合之前用過的功能了！
算是複習！

首先訂購的話，要有商品圖，並讓消費者可以選擇數量！在顯示出選擇的數量＆項目

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    </head>
  
<div class="title">
<h1>歡迎光臨小公主網頁嘗試集！</h1>
<h2>訂單網頁嘗試集＿初</h2>
<link rel="stylesheet" href="day21.css">

</div>

<body>

    <h3>限購！每人最多三個！</h3>
    <img id="dolphin" title="海豚"src="https://cdnappimg.yubaike.com/data/attachment/forum/202008/10/1597074050_380673.jpg" alt="可愛海豚" >
    <script>   </script>

    
    <select id="list" onchange="select()">
        <option value="drop-down"selected="selected">請選擇數量</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>

    <h4 id="show"></h4>


<script>
    function select (){
    var x = document.getElementById("list").value;   
    var y = document.getElementById("dolphin").title;

    document.getElementById("show").innerHTML="你選擇的是"+x+"個"+y;
    document.getElementById
}
</script>

</body>
</html>

網頁呈現：