Как создать таблицы в Javascript, чтобы она рассчитывала ввод пользователя? - PullRequest
Новая
       10

Как создать таблицы в Javascript, чтобы она рассчитывала ввод пользователя?

0 голосов
/ 14 февраля 2020

Можете ли вы помочь мне?

Я пытаюсь создать таблицу / форму, чтобы пользователь мог

  1. добавить имя из списка (который в идеале должен быть "выпадающим списком")
  2. затем добавьте часы, которые человек проработал
  3. , и добавьте всего чаевых sh и общих советов по кредитной карте.

А остальные вещи будут рассчитаны для пользователь по javascript.

В идеале это должно выглядеть примерно так. TipSheetForm

Заранее спасибо.

ЗДЕСЬ мой код: 

<body>
<h1>
TOTAL POINTS <span id="totalPoints">0</span>
</h1>
<label>Total Credit Cards 
<input type="number" min="0" id="totalCreditCards" placeholder="Enter Total" step="50" required>
</label>
<label>Credit Cards Value:
<span id="ccValueTotal">0</span>

<p></p>
    </label>
    <label>Total CASH: 
    <input type="number" min="0" id="totalCash" placeholder="Enter Total" step="5" required>
    </label>
    <label>CASH Value:
    <span id="cashValueTotal">0</span>
    </label>


<p></p>
<p></p>

<hr>

<b>
<p><p>
SERVERS 5 PTS
</b>
<p></p>
<p></p>
<input type="text" id="name1" placeholder="Name">
<input type="hidden" id="points1" value="5" >
<input type="number" id="hours1" step="0.5" min="0" placeholder="Hours">
<label>Points: <span id="totalPoints1"></label>
<label>CCTip: $<span id="ccTip1">    </label>
<label>CASHTip: $<span id="cashTip1">    </label>
<p></p>
<p></p>
<input type="text" id="name2" placeholder="Name">
<input type="hidden" id="points2" value="5" >
<input type="number" id="hours2" step="0.5" placeholder="Hours">
<label>Points: <span id="totalPoints2"></label>
<label>CCTip: $<span id="ccTip2">    </label>
<label>CASHTip: $<span id="cashTip2">    </label>
<p></p>
<p></p>
<input type="text" id="name3" placeholder="Name">
<input type="hidden" id="points3" value="5" >
<input type="number" id="hours3" step="0.5" placeholder="Hours">
<label>Points: <span id="totalPoints3"></label>
<label>CCTip: $<span id="ccTip3">    </label>
<label>CASHTip: $<span id="cashTip3">    </label>
<p></p>
<p></p>
<input type="text" id="name4" placeholder="Name">
<input type="hidden" id="points4" value="5" >
<input type="number" id="hours4" step="0.5" placeholder="Hours">
<label>Points: <span id="totalPoints4"></label>
<label>CCTip: $<span id="ccTip4">    </label>
<label>CASHTip: $<span id="cashTip4">    </label>
<p></p>
<p></p>
<input type="text" id="name5" placeholder="Name">
<input type="hidden" id="points5" value="5" >
<input type="number" id="hours5" step="0.5" placeholder="Hours">
<label>Points: <span id="totalPoints5"></label>
<label>CCTip: $<span id="ccTip5">    </label>
<label>CASHTip: $<span id="cashTip5">    </label>
<p></p>
<p></p>
<input type="text" id="name6" placeholder="Name">
<input type="hidden" id="points6" value="5" >
<input type="number" id="hours6" step="0.5" placeholder="Hours">
<label>Points: <span id="totalPoints6"></label>
<label>CCTip: $<span id="ccTip6">    </label>
<label>CASHTip: $<span id="cashTip6">    <label>
<p></p>
<p></p>
<hr>

<button onclick="submit()">Submit</button>


<script>
function submit() {
    var name1 = document.getElementById('name1').value;
    var points1= document.getElementById('points1').value;
    var hours1 = document.getElementById('hours1').value;
    var totalPoints1 = document.getElementById('totalPoints1');
    var ccTip1 = document.getElementById('ccTip1');
    var cashTip1 = document.getElementById('cashTip1');

        var name2 = document.getElementById('name2').value;
        var points2= document.getElementById('points2').value;
        var hours2 = document.getElementById('hours2').value;
        var totalPoints2 = document.getElementById('totalPoints2');
        var ccTip2 = document.getElementById('ccTip2');
        var cashTip2 = document.getElementById('cashTip2');


        var name3 = document.getElementById('name3').value;
        var points3= document.getElementById('points3').value;
        var hours3 = document.getElementById('hours3').value;
        var totalPoints3 = document.getElementById('totalPoints3');
        var ccTip3 = document.getElementById('ccTip3');
        var cashTip3 = document.getElementById('cashTip3');

        var name4 = document.getElementById('name4').value;
        var points4= document.getElementById('points4').value;
        var hours4 = document.getElementById('hours4').value;
        var totalPoints4 = document.getElementById('totalPoints4');
        var ccTip4 = document.getElementById('ccTip4');
        var cashTip4 = document.getElementById('cashTip4');

        var name5 = document.getElementById('name5').value;
        var points5= document.getElementById('points5').value;
        var hours5 = document.getElementById('hours5').value;
        var totalPoints5 = document.getElementById('totalPoints5');
        var ccTip5 = document.getElementById('ccTip5');
        var cashTip5 = document.getElementById('cashTip5');

        var name6 = document.getElementById('name6').value;
        var points6= document.getElementById('points6').value;
        var hours6 = document.getElementById('hours6').value;
        var totalPoints6 = document.getElementById('totalPoints6');
        var ccTip6 = document.getElementById('ccTip6');
        var cashTip6 = document.getElementById('cashTip6');

    var totalCreditCards = document.getElementById('totalCreditCards').value;
    var totalCash = document.getElementById('totalCash').value;


    //spans OUTPUT
    var totalPoints = document.getElementById('totalPoints');
    var ccValueTotal = document.getElementById('ccValueTotal');
    var cashValueTotal = document.getElementById('cashValueTotal'); 
    //spans OUTPUT

    // CALCULATIONS

    totalPoints1 = hours1 * points1;
    totalPoints2 = hours2 * points2;
    totalPoints3 = hours3 * points3;
    totalPoints4 = hours4 * points4;
    totalPoints5 = hours5 * points5;
    totalPoints6 = hours6 * points6;
    totalPoints = totalPoints1 + totalPoints2 + totalPoints3 + totalPoints4 + totalPoints5 + totalPoints6;
    ccValueTotal = totalCreditCards / totalPoints;
    ccTip1 = totalPoints1 * ccValueTotal;
    ccTip2 = totalPoints2 * ccValueTotal;
    ccTip3 = totalPoints3 * ccValueTotal;
    ccTip4 = totalPoints4 * ccValueTotal;
    ccTip5 = totalPoints5 * ccValueTotal;
    ccTip6 = totalPoints6 * ccValueTotal;
    cashValueTotal = totalCash / totalPoints;
    cashTip1 = totalPoints1 * cashValueTotal;
    cashTip2 = totalPoints2 * cashValueTotal;
    cashTip3 = totalPoints3 * cashValueTotal;
    cashTip4 = totalPoints4 * cashValueTotal;
    cashTip5 = totalPoints5 * cashValueTotal;
    cashTip6 = totalPoints6 * cashValueTotal;

    document.getElementById('totalPoints1').innerHTML = totalPoints1;
    document.getElementById('totalPoints2').innerHTML = totalPoints2;
    document.getElementById('totalPoints3').innerHTML = totalPoints3;
    document.getElementById('totalPoints4').innerHTML = totalPoints4;
    document.getElementById('totalPoints5').innerHTML = totalPoints5;
    document.getElementById('totalPoints6').innerHTML = totalPoints6;

    document.getElementById('ccTip1').innerHTML = ccTip1.toFixed(2);
    document.getElementById('ccTip2').innerHTML = ccTip2.toFixed(2);
    document.getElementById('ccTip3').innerHTML = ccTip3.toFixed(2);
    document.getElementById('ccTip4').innerHTML = ccTip4.toFixed(2);
    document.getElementById('ccTip5').innerHTML = ccTip5.toFixed(2);
    document.getElementById('ccTip6').innerHTML = ccTip6.toFixed(2);

    document.getElementById('cashTip1').innerHTML = cashTip1.toFixed(2);
    document.getElementById('cashTip2').innerHTML = cashTip2.toFixed(2);
    document.getElementById('cashTip3').innerHTML = cashTip3.toFixed(2);
    document.getElementById('cashTip4').innerHTML = cashTip4.toFixed(2);
    document.getElementById('cashTip5').innerHTML = cashTip5.toFixed(2);
    document.getElementById('cashTip6').innerHTML = cashTip6.toFixed(2);

    document.getElementById('ccValueTotal').innerHTML = ccValueTotal.toFixed(3);
    document.getElementById('totalPoints').innerHTML = totalPoints;
    document.getElementById('cashValueTotal').innerHTML = cashValueTotal.toFixed(3);
}

</script>

</body>
...