2017-04-03 53 views
1

在用户计算输入结果后,如何显示推荐列表等内容?例如,让用户输入家庭工资并计算PCI(人均收入),然后键入并按下计算按钮,然后根据家庭所拥有的PCI数量触发推荐列表( ?也许表显示根据不同类别的PCI不同的结果)如何在计算某个结果后显示建议?

<!DOCTYPE html> 
<html> 

<head> 
<script src="common.js"></script> 
<script> 
    function cal() 
    { 
     var salary1 = document.getElementById('salary1').value; 
     var salary2 = document.getElementById('salary2').value; 
     var salary3 = document.getElementById('salary3').value; 
     var salary4 = document.getElementById('salary4').value; 
     var members = document.getElementById('members').value; 


     var total = (parseInt(salary1) + parseInt(salary2) + parseInt(salary3) + parseInt(salary4))/parseInt(members); 
     document.getElementById('total').value = total; 

     alert (total); 
    } 

</script> 
</head> 

<body> 
<h1>Want to know which bursary your eligible?</h1> 
<input id="salary1" value="" placeholder="Enter your 1st family income..."/> 
<input id="salary2" value="" placeholder="Enter your 2nd family income..."/> 
<input id="salary3" value="" placeholder="Enter your 3rd family income..."/> 
<input id="salary4" value="" placeholder="Enter your 4th family income..."/> 
<input id="members" value="" placeholder="Enter the total number of family members..."/> 
<br> 
<button onclick="cal()"> Calculate PCI!</button> 
<br> 
Total: <input id="total"> </input> 
</body> 

</html> 

回答

0

您可以创建一个隐藏的div保存数据则显示,DIV,当用户点击该按钮

HTML:

<div id="divToShow" style="display:none;" class="table_list" > 
    //put your data table here 
    </div> 

    <input type="button" name="myButton" value="Show Div" onclick="showDiv()" /> 

Java脚本:

function showDiv() { 
    document.getElementById('divToShow').style.display = "block"; 
} 
0

这应该让你在那里:Jsfiddle

<form id="form"> 
    <input id="number1" type="number" min="1" name="number" placholder="add value one"> + 
    <input id="number2" type="number" min="1" name="number" placholder="add value one"> 
    <button>Submit</button> 
</form> 

var form = document.getElementById('form'); 
    number1 = document.getElementById('number1'); 
    number2 = document.getElementById('number2'); 
form.onsubmit = function() { 
    var total = +number1.value + +number2.value; // add + before 
    alert(total); 
}; 
0

 function cal(){ 
 
var salary1 = document.getElementById('salary1').value; 
 
     var salary2 = document.getElementById('salary2').value; 
 
     var salary3 = document.getElementById('salary3').value; 
 
     var salary4 = document.getElementById('salary4').value; 
 
     var members = document.getElementById('members').value; 
 
     var recommanted; 
 
     var recommandations=[ 
 
     {maxpci:1000,recommandation:'first_recommandation'}, 
 
     {maxpci:2000,recommandation:'second_recommandation'}, 
 
     {maxpci:3000,recommandation:'third_recommandation'}, 
 
     {maxpci:6000,recommandation:'fourth_recommandation'} 
 
     ]; 
 

 
     var total=(parseInt(salary1) + parseInt(salary2) + parseInt(salary3) + parseInt(salary4))/parseInt(members); 
 

 

 

 
     if(recommandations[recommandations.length - 1].maxpci < total){recommanted=recommandations[recommandations.length - 1].recommandation;} 
 
     else{ 
 
     for (var i = 0; i < recommandations.length; i++) { 
 
     if(total <= recommandations[i].maxpci){ 
 

 
     recommanted=recommandations[i].recommandation;break;} 
 

 
     }} 
 

 

 
     document.getElementById('result').innerHTML = "Your PCI : "+total+"</br>Recommandation : "+recommanted; 
 
}
<h1>Want to know which bursary your eligible?</h1> 
 
    <input id="salary1" type="number" value="" placeholder="Enter your 1st family income..."/> 
 
    <input id="salary2" type="number" value="" placeholder="Enter your 2nd family income..."/> 
 
    <input id="salary3" type="number" value="" placeholder="Enter your 3rd family income..."/> 
 
    <input id="salary4" type="number" value="" placeholder="Enter your 4th family income..."/> 
 
    <input id="members" type="number" value="" placeholder="Enter the total number of family members..."/> 
 
    </br> 
 
    <button onclick="cal()"> Calculate PCI!</button> 
 
    </br> 
 
     <div id="result"> 
 

 
     </div>

+0

在回答一个问题,它总是一个好主意,解释问题/解决方案,而不是仅仅发布一个代码块。 – JasperZelf

相关问题