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

Question

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

我尝试了很多方法，但我似乎无法弄明白。

＆＃13;

＆＃13;

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();
})
                                                         

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要为每个下拉列表添加一个change事件侦听器。更改＆＃34;名称＆＃34; select元素到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);

＆＃13;

＆＃13;

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);
                                                         

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以向表单添加一个事件侦听器，而不是为每个选择添加一个事件侦听器。 您在表单中添加了一个ID：

<form id="myform" name="priceCalc" action="">Current Division

然后你将eventListener添加到它：

document.getElementById('myform').addEventListener('change', function(){
total();
})

这是一个工作示例

＆＃13;

＆＃13;

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('myform').addEventListener('change', function(){

    total();
})
                                                         

＆＃13;

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;
}

＆＃13;

<form id="myform" name="priceCalc" action="">Current Division
    <br/>Rank:
    <select name="CRANK1" 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 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>

＆＃13;

＆＃13;

＆＃13;