vip选择不同套餐的价钱和有效期的变化 input的type的类型

最近在写一个关于用户选择不同的vip套餐之后，对应的价钱以及有效日期的变化，其实也不难，但就是其中的一个小点困扰了我很多天，今天终于解决了，可能对于别人不是难事，但却1令我百思不得其解，而最后的原因竟然是我我没有进行强制类型转换，代码如下，页面不好，审美的问题。
Html的代码：

<div class="time-type">
                                <p class="product-time">开通时长</p>
                                <div class="choose-type">
                                    <div class="one-year vipTime" name="12">
                                      <p >12个月<span class="price" >150元</span></p>
                                    </div>
                                    <div class="six-month vipTime" name="6">
                                        <p>6个月<span class="price" >90元</span></p>
                                    </div>
                                    <div class="three-month vipTime" name="3">
                                        <p>3个月<span class="price" >45元</span></p>
                                    </div>
                                    <div class="each-month vipTime">
                                        <p class="monthly" >按月:<input class="much" type="text" value="1" maxlength="4" autocomplete="off">个月</p>
                                    </div>

                                </div>
                            </div>
<!--                            应付金额-->
                            <div class="pay">
                                <p class="product-pay">应付金额:</p>
                                <div class="finally-money"></div>
                            </div>
<!--                            vip有效日期-->
                            <div class="date">
                                <p class="product-date">VIP有效日期:</p>
                                <div class="finally-date"></div>
                            </div>

JS的代码

// 计算不同年份所要交的具体钱数
var vipTime = document.getElementsByClassName('vipTime');
var money = document.getElementsByClassName('finally-money')[0];
var dates=document.getElementsByClassName('finally-date')[0];
var much=document.getElementsByClassName("much")[0];
var b=0;
for(let i = 0;i < vipTime.length;i++){
    vipTime[i].onclick = function(){
        for(var a = 0;a < vipTime.length;a++){
            vipTime[a].style.border ='solid 1px gray';
            vipTime[a].style.backgroundColor='white';
        }
        this.style.border = 'solid 1px  #cd0429';
        this.style.backgroundColor='#fff9f9';
        // 计算所要交的钱数
        money.innerHTML = this.children[0].children[0].innerHTML;

        // 计算vip的有效日期

        var gap = function (n)
        {
            var now = new Date;
            now.setUTCMonth(now.getUTCMonth()+n);
            console.log(now);
            return now;
        }
        //一定要转换成int类型，否则时间就会报错可以用parseInt()，也可以用1*，下边的还可以在input里面写一个type="number"
        // console.log(gap(this.getAttribute("name")));//2063年之类的，
        dates.innerHTML=gap(1*(this.getAttribute("name"))).toLocaleString();
        // if(i==0){
        //     dates.innerHTML=gap(12).toLocaleString();
        // }else if(i==1){
        //     dates.innerHTML=gap(6).toLocaleString();
        // }else if(i==2){
        //     dates.innerHTML=gap(3).toLocaleString();
        // }

        if(i==3){
            let j=1*(much.value); //1 2 3
            money.innerHTML=15*(much.value)+"元";
            if(much.value==12){
                money.innerHTML=150+"元";
            }
           dates.innerHTML=gap(j).toLocaleString();
        }
    }
}

重点：
一定要进行强制类型转换
最终效果图：
input:
text:定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
password:定义密码字段。该字段中的字符被掩码;
email:可以判断邮箱格式是否正确;
image:定义图像形式的提交按钮;
radio:定义单选按钮;
submint:定义提交按钮。提交按钮会把表单数据发送到服务器;
range:会出现一个进度条；
number:数字；
file:定义输入字段和 "浏览"按钮，供文件上传;
button:定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）;
mouth:定义 month 和 year 控件（不带时区);
week：定义 week 和 year 控件（不带时区）;
url:定义用于输入时间的控件（不带时区)
等等，可以去搜