javascript - 删除我的按钮并让 JavaScript 自动计算

Question

我的问题是我似乎无法删除此按钮并自动计算我的价格。

我尝试了很多方法，但似乎无法弄清楚。

var current_division,
       desired_division;


function current1() {
    var Amt = document.priceCalc.CRANK1;
    var Qty = document.priceCalc.CRANK2;
    return parseInt(Qty.value) * parseFloat(Amt.value);
}

function desiredd() {
    var Amt = document.priceCalc.DRANK1;
    var Qty = document.priceCalc.DRANK2;
    return price = parseInt(Qty.value) * parseFloat(Amt.value);
    
}

function total() {
    if(isNaN(current1())) {
        current_division = 0;
    } else {
        current_division = current1();
    }   
    
    if(isNaN(desiredd())){
       desired_division = 0;   
    } else {
       desired_division = desiredd();
    }
    
    var totalPrice = current_division+desired_division;
    
    document.getElementById('prices').value = totalPrice;
}

document.getElementById('submit_button').addEventListener('click', function(){

    total();
})
                                                         

select:valid {
  background-color: white;
  border-radius: 1px solid grey;
  text-align-last:left;
  
  
    border-radius: 5px;
    background: 	#D3D3D3;
    padding: 20px; 
    width: 200px;
    height: 150px; 


    border-radius: 5px;
    border: 1px solid	#D3D3D3;
    padding: 20px; 
    width: 200px;
    height: 150px; 


    border-radius: 5px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 1px; 
    width: 150px;
    height: 25px; 

   
  }
  form {
    display: inline-block;
    text-align: right;
}

   input {
    display: inline-block;
    text-align: right;
    border-radius: 1px solid white;
}

<form name="priceCalc" action="">Current Division
    <br/>Rank:
    <select name="CRANK1">
        <option type="text" value="1">Bronze</option>
        <option type="text" value="2">Silver</option>
        <option type="text" value="3">Gold</option>
        <option type="text" value="4">Platinum</option>
        <option type="text" value="5">Diamond</option>
    </select>
     <br>
    <br/>Division:
    <select name="CRANK2">
        <option type="text" value="6">Division V</option>
        <option type="text" value="7">Division IV</option>
        <option type="text" value="8">Division III</option>
        <option type="text" value="9">Division II</option>
        <option type="text" value="10">Division I</option>
    </select>
    <br>
    <br>
    <br/>Desired Division
    <br/>Rank:
    <select name="DRANK1" >
        <option type="text" value="1">Bronze</option>
        <option type="text" value="2">Silver</option>
        <option type="text" value="3">Gold</option>
        <option type="text" value="4">Platinum</option>
        <option type="text" value="5">Diamond</option>
    </select>
     <br>
     <br/>Division:
    <select name="DRANK2" >
        <option type="text" value="6">Division V</option>
        <option type="text" value="7">Division IV</option>
        <option type="text" value="8">Division III</option>
        <option type="text" value="9">Division II</option>
        <option type="text" value="10">Division I</option>
    </select>
    <br>
    <br>
    <input type="text" id="prices">
    <br/>
    <input type="button" value="Figure out pricing!" id="submit_button">
    <br>
</form>

Answer 1

您需要向每个下拉列表添加一个 change 事件监听器。将 select 元素上的“name”字段更改为 id 字段，并使用 JS 通过 ID 获取它们。然后，添加一个事件监听器，每当您的下拉值更新时，该事件监听器都会运行您的 total() 函数。

document.getElementById("CRANK1").addEventListener('change', total);
document.getElementById("CRANK2").addEventListener('change', total);
document.getElementById("DRANK1").addEventListener('change', total);
document.getElementById("DRANK2").addEventListener('change', total);

var current_division,
       desired_division;


function current1() {
    var Amt = document.priceCalc.CRANK1;
    var Qty = document.priceCalc.CRANK2;
    return parseInt(Qty.value) * parseFloat(Amt.value);
}

function desiredd() {
    var Amt = document.priceCalc.DRANK1;
    var Qty = document.priceCalc.DRANK2;
    return price = parseInt(Qty.value) * parseFloat(Amt.value);
    
}

function total() {
    if(isNaN(current1())) {
        current_division = 0;
    } else {
        current_division = current1();
    }   
    
    if(isNaN(desiredd())){
       desired_division = 0;   
    } else {
       desired_division = desiredd();
    }
    
    var totalPrice = current_division+desired_division;
    
    document.getElementById('prices').value = totalPrice;
}

document.getElementById("CRANK1").addEventListener('change', total);
document.getElementById("CRANK2").addEventListener('change', total);
document.getElementById("DRANK1").addEventListener('change', total);
document.getElementById("DRANK2").addEventListener('change', total);
                                                         

select:valid {
  background-color: white;
  border-radius: 1px solid grey;
  text-align-last:left;
  
  
    border-radius: 5px;
    background: 	#D3D3D3;
    padding: 20px; 
    width: 200px;
    height: 150px; 


    border-radius: 5px;
    border: 1px solid	#D3D3D3;
    padding: 20px; 
    width: 200px;
    height: 150px; 


    border-radius: 5px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 1px; 
    width: 150px;
    height: 25px; 

   
  }
  form {
    display: inline-block;
    text-align: right;
}

   input {
    display: inline-block;
    text-align: right;
    border-radius: 1px solid white;
}

<form name="priceCalc" action="">Current Division
    <br/>Rank:
    <select id="CRANK1">
        <option type="text" value="1">Bronze</option>
        <option type="text" value="2">Silver</option>
        <option type="text" value="3">Gold</option>
        <option type="text" value="4">Platinum</option>
        <option type="text" value="5">Diamond</option>
    </select>
     <br>
    <br/>Division:
    <select id="CRANK2">
        <option type="text" value="6">Division V</option>
        <option type="text" value="7">Division IV</option>
        <option type="text" value="8">Division III</option>
        <option type="text" value="9">Division II</option>
        <option type="text" value="10">Division I</option>
    </select>
    <br>
    <br>
    <br/>Desired Division
    <br/>Rank:
    <select id="DRANK1" >
        <option type="text" value="1">Bronze</option>
        <option type="text" value="2">Silver</option>
        <option type="text" value="3">Gold</option>
        <option type="text" value="4">Platinum</option>
        <option type="text" value="5">Diamond</option>
    </select>
     <br>
     <br/>Division:
    <select id="DRANK2" >
        <option type="text" value="6">Division V</option>
        <option type="text" value="7">Division IV</option>
        <option type="text" value="8">Division III</option>
        <option type="text" value="9">Division II</option>
        <option type="text" value="10">Division I</option>
    </select>
    <br>
    <br>
    <input type="text" id="prices">
    <br/>
    <input type="button" value="Figure out pricing!" id="submit_button">
    <br>
</form>