Question

不确定我的代码中缺少什么错误，但是在我的js文件中，使用appendChild的行出现错误：

“未捕获的TypeError：无法读取null的属性'appendChild' 在HTMLElement。”

正在使用

ionic，我正在尝试通过让用户输入名称和金额来使按钮正常工作。单击后，将输出文本字段内容。

JS：

const reasonInput = document.querySelector ('#input-reason');
const amountInput = document.querySelector ('#input-amount');
const cancelBtn = document.querySelector ('#btn-cancel');
const confirmBtn = document.querySelector ('#btn-confirm');
const expensesList = document.querySelector ('#expeneses-list');

confirmBtn.addEventListener('click', () => {
    const enteredReason = reasonInput.value;
    const enteredAmount = amountInput.value;

    if (
    enteredReason.trim().length <= 0 ||
    enteredAmount <= 0 ||
    enteredAmount.trim().length <= 0
    ) {
        return;
    }
    const newItem = document.createElement ('ion-item');
    newItem.textContent = enteredReason + ': $' + enteredAmount;

    expensesList.appendChild(newItem);
});

主要：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Budget Planner</title>
    <link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet"/>
    <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
</head>
<body>
     <ion-app>
             <ion-header>
                 <ion-toolbar color="primary">
                     <ion-title>Budget Planner</ion-title>
                 </ion-toolbar>
             </ion-header>

             <ion-content>

                <ion-grid>
                    <ion-row>
                        <ion-col size-md="6" offset-md="3">
                            <ion-card>

                                <ion-card-header>
                                    <ion-card-title>New Expense</ion-card-title>
                                </ion-card-header>

                                <ion-card-content>

                                    <ion-item>
                                        <ion-label position="floating">Expense Reason</ion-label>
                                        <ion-input type="text" id="input-reason"></ion-input>
                                    </ion-item> 

                                    <ion-item>
                                        <ion-label position="floating">Expense Amount</ion-label>
                                        <ion-input type="number" id="input-amount"></ion-input>
                                    </ion-item>

                                    <div margin-vertical text-right>

                                        <ion-button fill="outline" color="danger" id="btn-cancel">
                                            <ion-icon slot="start" name="close"></ion-icon>
                                            Clear
                                        </ion-button> 

                                        <ion-button fill="outline" color="tertiary" id="btn-confirm">
                                            <ion-icon slot="start" name="add"></ion-icon>
                                            Add Expense
                                        </ion-button> 
                                    </div>

                                </ion-card-content>
                            </ion-card>
                        </ion-col>
                    </ion-row>

                    <ion-row>
                        <ion-col>
                            <ion-list id="expenses-list"></ion-list>
                        </ion-col>
                    </ion-row>
                </ion-grid>
             </ion-content>
     </ion-app>
     <script src="app.js"></script>
</body>
</html>

Answer 1

html 中的 id 是费用列表，但您将费用列表 id 放在 app.js 文件中，因此更改 id 即可使用

未在js文件中读取appendChild

1 个答案: