仅使用 JS 和 HTML 显示最后 5 个提交的数据

Question

我有一个小问题，我还是 Java 脚本的初学者，我对它的了解不多。我的问题是：

我需要创建一个虚假的捐赠表格。该表单包含用户可以在其中写入他的数据的字段，例如他的 phone 号码、捐赠金额等......当用户点击提交他的捐赠金额时，他的名字应该显示在 table 中，此外其他人的最后另外4次捐赠。我认为我的代码应该是这样的

<body>
    <div id="container">
        <form action="#" name="myForm" id="myForm">

            <br>name: <input type="text" name="name" id="donatorName"></br>
            <span id="Enter your name"></span>

            <br>Donate amount: <input type="number" name="donateAmount" id="amount"></br>
            <span id="Your total donate amount"></span>
            <br/>

            <button type="button" value="submit" onclick="return validation(); document.getElementById('container').style.display='none'">submit</button>
        </form>
    </div>

    <div id="new_container">
        <p id="displa_name"></p>
        <p id="display_total_amount"></p>

        <div id="Btn"></div>
    </div>

    <script type="text/javascript">

        function validation(){
            var donatorName = document.getElementById("donatorName").value;
            var donateAmount = document.getElementById("amount").value;

            // donatorName validation
            if(donatorName == ""){
                document.getElementById("donatorName").innerHTML = "Name cannot be empty";
                document.getElementById("donatorName").style.color = "#ff0000";
                return false;
            }

            // donateAmount validation
            if(donateAmount == ""){
                document.getElementById("amount").innerHTML = "Total amount cannot be empty";
                document.getElementById("amount").style.color = "#ff0000";
                return false;
            }
            if(donateAmount < 1){
                document.getElementById("amount").innerHTML = "Donate amount should be greater than 0";
                document.getElementById("amount").style.color = "#ff0000";
                return false;
            }
            showDetails();
        }
    
        function showDetails(){
            document.getElementById('container').style.display='none';
            // name
            const  = document.getElementById("amount").value;
            document.getElementById("display_name").innerHTML = `DonatorName: ${donatorName}`;    
            document.getElementById("display_total_amount").innerHTML = `TotalAmount: ${donateAmount}`;    
    
</script>

</body>

我不确定我的代码，所以请帮助我并向我解释我还能怎么做。我现在想保持简单，所以请给我一些建议 :D

Answer 1

我建议您为此使用后端语言，例如 PHP，但如果 javaScript 是您所需要的，这里有一个简单的方法。您可以将数据存储在一个数组中，或者将它们缓存起来，这样即使刷新选项卡也不会丢失数据。但是让我们在这个例子中使用数组。您已经有了表格，所以让我们跳过它。

对于HTML中的table：

<table>
    <thead>
        <th>Name</th>
        <th>Amount</th>
    </thead>
    <tbody id="displayDonations">
        <!-- Data will be displayed here thru javaScript -->
    </tbody>
</table>

javaScript:

let donations = [];

function validation() { // This is called when you submit the form
    // Put your validations here
    // Example Validation: return false if not valid
    if (!isValid()) return false; 

    // Remove first element of the array if length == 5
    if (donations.length == 5) {
        donations.shift();
    }

    // Push object into the donations array
    donations.push(
        {
            "name"   : document.getElementById("donatorName").value,
            "amount" : document.getElementById("amount").value
        }
    );

    showDetails();
}

function showDetails() {
    let tableBody = "";

    donations.forEach((element) =>{
        // Construct what you want to display
        tableBody += ""
            + "<tr>"
            +   "<td>" + element.name + "</td>"
            +   "<td>" + element.amount + "</td>"
            + "</tr>"
        ;
    });
    
    // Write the tableBody to the HTML
    document.getElementById("displayDonations").innerHTML = tableBody;
}

仅使用 JS 和 HTML 显示最后 5 个提交的数据

Show last 5 submitted data using only JS and HTML

html

javascript

forms