Question

在用户根据输入计算结果后，如何显示推荐列表之类的内容？例如，让用户键入家庭的工资并计算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>

Answer 1

您可以创建一个隐藏的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()" />

使用Javascript：

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

Answer 2

这应该会让你：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 );
};

Answer 3

     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>

如何在计算某个结果后显示建议？

3 个答案: