javascript簡易購物車如何讓js在提交后運行呢？

請問如何能在點擊提交后實現(xiàn)下圖呢？

我寫的代碼只能實現(xiàn)下圖功能：

我的html代碼是：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>購物車</title>
        <link type="text/css" rel="stylesheet" href="../css/shop.css">
        <script type="text/javascript" src="../js/shop.js" ></script>
    </head>
    <body>
        <div id="father">
            <div class="two">簡易購物車</div>
            <div class="one_F">
                <ul class="one">
                    <li class="one1">商品名稱</li>
                    <span class="fenli fenli1"></span>
                    <li class="one2">數量(件)</li>
                    <span class="fenli"></span>
                    <li class="one3 juli">單價(元)</li>
                    <span class="fenli"></span>
                    <li class="one4 juli1">運費(元)</li>
                    <span class="fenli"></span>
                    <li class="one5">合計(元)</li>
                </ul>
            </div>
            <div>
                <form name="myform" id="subBtn">
                    <ul class="one one_F">
                        <li class="one1">
                            <input  type="text" id="shopN" value="諾基亞N95" onload="print" oninput="aa(event)"  onporpertychange="aa(event)" />
                        </li>
                        <span class="fenli"></span>
                        <li class="one2">
                            <input  type="text" name="num" id="shopNumber" value="1"/>
                        </li>
                        <span class="fenli"></span>
                        <li class="one3">
                            <input  type="text" name="price" id="shopPrice" value=""/>
                        </li>
                        <span class="fenli"></span>
                        <li class="one4">
                            <input  type="text" name="cost" id="shopFreight" value=""/>
                        </li>
                        <span class="fenli"></span>
                        <li class="one5">
                            <input  type="text" name="amount" id="shopCount" value=""/>
                        </li>
                    </ul>
                    <ul class="one">
                        <li>
                            <input type="button" name="button" id="button" value="提交訂單" onclick="cal()"/>
                        </li>
                    </ul>
                </form>
            </div>
            <div class="third">
            </div>
        </div>
    </body>
</html>

我的js代碼是

window.onload = function() {
    //獲取商品名
    var shopname= document.getElementById("shopN").value;
    //判斷商品名
    if(shopname=="諾基亞N95"){
        //獲取商品數量
        var shopNumber=document.getElementById("shopNumber").value;
        //價格price
        var price = 2200;
        //將諾基亞N95產品價格賦值到input的value中
        document.getElementById("shopPrice").value = price;
        //同上可得，運費為
        document.getElementById("shopFreight").value ="20";
        //合計
        var Count=shopNumber*price+20;
        document.getElementById("shopCount").value = Count;

    }else{
        alert('沒有該商品');
    }
}
function cal(){
              var num= parseInt(document.myform.num.value);    
                 var price=parseFloat(document.myform.price.value);    
              var cost=parseFloat(document.myform.cost.value);
              var amount=num*price+cost;
              document.myform.amount.value=amount;            
}

我的css代碼是

*{
    margin: 0px;
    padding:0px;
}
#father{
    border:1px solid #000000 ;
    width:420px;
    margin:0px auto;
}
#father .two{
    text-align: center;
    font-weight:900;
    border-bottom:1px solid #000000 ;
}
#father .one li{
    display:inline-block;
    list-style:none;
    padding:0px 10px;
    font-size:14px;
}
#father .one .one1{
    padding-left:20px;
}
#father .one .fenli{
    border-left:1px solid #000000;
    padding:4px 0px;
}
#father .one .juli{
    padding-left:14.5px;
}
#father .one .juli1{
    padding-left:14.8px;
}
#father .one .fenli1{
    padding-left:5px;
}
#father .one_F input{
    width:56px;
    outline:medium;
    border: none;
}
#father .one_F{
    border-bottom:1px solid #000000;
    padding:3px 0px;
    
    
}

回答

編輯回答

氕氘氚

JS代碼:

function cal(){
/* var num= parseInt(document.myform.num.value);    
     var price=parseFloat(document.myform.price.value);    
  var cost=parseFloat(document.myform.cost.value);
  var amount=num*price+cost;
  document.myform.amount.value=amount;    
*/
 alert(document.getElementById("shopN").value);/**/
 }

html代碼變更：

<input  type="text" id="shopN" value="諾基亞N95" onload="print"     oninput="aa(event)"  onporpertychange="aa(event)" />

<input  type="text" id="shopN" value="諾基亞N95"/>/*修改后的*/

2018年5月29日 06:11