Javascript / CSS 如何制作具有不同数据的多个 div 元素并输入到同一个输入表单中

Question

How does one create a new div through the input form (using the button) a div appears with the data that was entered last?

I want to create a new div with data from input form. Next I want to create a new div using the same. But using a new data record only for the first div and another that i created div's doesn't have any data.

How do I go about making that new input = new div+new data from this input&

let infoData = {
    budget: 0,
    expenses: 0,
    balance: 0,
    expenseObj: {
        name: "",
        amount: 0
    },
    budgetSubmit: function() {
        infoData.budget = parseInt(document.getElementById('budget-input').value);
        budgetAmount = infoData.budget;
        document.getElementById('budget-amount').innerHTML=budgetAmount;
    },
    expenseSubmit: function() {
        infoData.expenses = parseInt(document.getElementById('expense-input').value);
        expenseName = document.getElementById('expense-name').value;
        infoData.expenseObj.name = expenseName;
        expenseAmount = infoData.expenses;
        infoData.expenseObj.amount = expenseAmount;
        document.getElementById('expense-amount').innerHTML=expenseAmount;
    },
    balanceSubmit: function() {
        infoData.balance = infoData.budget;
        balanceAmount = infoData.balance;
        document.getElementById('balance-amount').innerHTML=balanceAmount;
    } 
}

calcBtn.addEventListener('click', function() {
    infoData.budgetSubmit();
    infoData.balanceSubmit();
});

addExpBtn.addEventListener('click', function() {
    infoData.expenseSubmit();
});

addExpBtn.addEventListener('click', function(event) {
    balanceAmount = balanceAmount - expenseAmount;
    document.getElementById('balance-amount').innerHTML=balanceAmount;
});

let divEvent = document.getElementById('expense-row');

if (typeof(divEvent) !== "undefined") {
    addExpBtn.addEventListener('click', function(event) {
        const divExpense = document.createElement('div');

        divExpense.className = 'div-expense';

        divExpense.innerHTML = `
        <p>
            <b class="text-uppercase">name: </b><span id="div-expense-name">Name</span>
        </p>
        <p>
            <b class="text-uppercase">amount: </b><span id="div-expense-amount">0</span>₴
        </p>
        <p>
            <span id="div-expense-delete">Delete</span>
        </p>`;

        document.getElementById('expense-row').appendChild(divExpense);
        document.getElementById('div-expense-name').innerHTML=infoData.expenseObj.name;
        document.getElementById('div-expense-amount').innerHTML=infoData.expenseObj.amount;
    });
}

Answer 1

You will have to create the div when you press the button, you could do this:

    $("button").click(function(){
      const newDiv = document.createElement("div");
      const newDivText = document.createTextNode("");
      $(newDivText).append($("input").val());
      $(newDiv).append(newDivText);
      $(document).append(newDiv);
    });

I think that is what you're after. If you need any explanation, let me know.

Answer 2

 function addDiv(event){ event.preventDefault(); var input= document.getElementsByTagName("input")[0]; var div = document.createElement('div'); div.innerHTML = input.value; document.body.appendChild(div); input.value=''; }

 <form action ="#"> <input type=text/> <button onclick='addDiv(event)'type='submit'>Submit</button> </form>