Блог

Главная - Вопросы по программированию - Печать каждого имени и суммы расходов из объекта JS, сохраненного из пользовательского ввода

Печать каждого имени и суммы расходов из объекта JS, сохраненного из пользовательского ввода

#javascript #html

#javascript #HTML

Вопрос:

Доброе утро!

Я на полпути к своему первому приложению JS и столкнулся с проблемой. Мне сложно печатать несколько пользовательских данных, которые я помещаю в объект JS, и печатать оба obj.name и obj.составляют их соответствующие места. Я могу печатать отдельные элементы в их областях, но каждый раз он вводит новый вместо добавления нового ввода к старому. Я пробовал разные вещи, например, помещать входные данные непосредственно в массив obj, а затем использовать цикл for и помещать оба входных данных в отдельный var и помещать его в ранее созданный массив. Я даже пробовал консоль.войдите, чтобы увидеть, что он извлекает из ввода, и он регистрирует только первую букву строки. Я был бы признателен за любую помощь в том, чтобы заставить это работать. Спасибо.

Вот что у меня есть на данный момент.

 let expenseNames = [];
function incomingExpenses() {
        expenseNames.name = document.querySelector("[name=expense_Name]").value,
        expenseNames.amount= document.querySelector("[name=expense_Value]").value
    
    for (var i = 0; i <expenseNames['amount'].length; i  ){
    document.querySelector('#title_Expenses').innerHTML = expenseNames.name;
    document.querySelector('#value_Expenses').innerHTML = expenseNames.amount;
    console.log(expenseNames['name'][i]);
    i  ;
    }
};

let outgoingCalcButton = document.getElementById('expenseButton');
expenseButton.addEventListener("click", incomingExpenses);

 
 <body>
    <h1>Budget Application</h1>
    <div id="inputSections" class="inputSections">
        <section id="incomingMoney">
            <h3>Please Enter Your Budget</h3>
            <input type="number" id="incomingCashInput" class="inputs" name="incoming_Cash_Input"><br>
            <button id="incomingCalcButton">Calculate</button>
        </section>

        <section id="enterExpenses">
            <h3>Please Enter Your Expense</h3>
            <input type="text" id="expenseName" class="inputs" name="expense_Name">
            <h3>Please Enter Expense Amount</h3>
            <input type="number" id="expenseAmount" class="inputs" name="expense_Value"><br>
            <button id="expenseButton">Add Expense</button>
        </section>
    </div>
    <section id="calculations" class="calcs">
        <div class="budget calcs">
            <h3>Budget</h3><br>
            <img src="money_icon.png" class="moneyIcon calcIcon"><br>
            <section id="budgetIncoming">

            </section>
        </div>
        <div class="expenses calcs">
            <h3>Expenses</h3><br>
            <img src="expense_icon.png" class="expenseIcon calcIcon"><br>
            <section id="expenseIncoming">

            </section>
        </div>
        <div class="balance calcs">
            <h3>Balance</h3><br><br>
            <img src="budget_icon.png" class="budgetIcon calcIcon"><br>
            <section class="balanceIncoming">

            </section>
        </div>
    </section>

    <section id="expenses expContainer" >
        <div class="expContainer">
            <h4>Expense Title</h4>
            <section class="titleExpenses expContainer" id="title_Expenses">

            </section>
        </div>
        <div class="expContainer">
            <h4>Expense Value</h4><br><br>
            <section class="valueExpenses" id="value_Expenses">
                
            </section>
        </div>
        <div class="expContainer">
            <h4>Edit</h4>
            <section class="deleteExpenses" >

            </section>
        </div>

    </section>
</body>

Ответ №1:

Я не уверен, хорошо ли я понял, чего вы хотите достичь. Но, возможно, этот пример поможет вам продвинуть ваш проект вперед: ссылка на jsfiddle

Комментарии:

1. Это действительно помогает, я также работал над частью расчета. Теперь, отвечая на мой вопрос выше, я пытаюсь сохранить имена и значения моих расходов на странице. Например, если пользователь вводит Power 150, Mortgage 900 и Car Pmt 200, я бы хотел, чтобы он показывал все из них, в отличие от now, где он каждый раз заменяет пользовательский ввод. Спасибо за помощь до сих пор!

Метки: