Question

如何让新的构造函数工作？我在 Visual Studio Code 中使用 Javascript

2021-06-22

105

javascript visual-studio-code

我的 JS 代码如下所示。但是当我打开页面时，它显示“未捕获 TypeError：无法将属性“innerHTML”设置为 null”

我尝试将 NewItem 构造函数更改为函数。但是 VSC 一直说我应该将其声明为类。我首先将其转换，因为构造函数也不能作为函数工作。

class NewItem {
    constructor(name, date, price) {
        this.itemName = name;
        this.itemDate = date;
        this.itemPrice = price;
    }
}


const onListItem = new NewItem("John", "Date", "Price");

document.getElementById("demo").innerHTML = onListItem.itemDate;

HTML 如下所示

<!DOCTYPE html>
<html lang= "en">
    <head>
     <link rel="stylesheet" href="ShopListStyle.css">
     <meta name="viewport" content="width=device-width" initial-scale=1.0>   
     <title>Shopping List</title>   
    </head>
    <body>
        <script src="ShopListScript.js"></script>
        <div id="container">
            
            <div id="inputbox" class="section">
                <form id="labels-form">
                    <label><h2>Shopping List</h2></label>
                    <input id="labels-name" class="labels-input" type="text" value="Item Name"></input>
                    <input id="labels-date" class="labels-input" type="text" value="Date of Purchase"></input>
                    <input id="labels-price" class="labels-input" type="text" value="Item Price"></input>
                    <button id="labels-button">Add to List</button>
                    <p id="demo"></p>
                </form>
            </div>
            <div id="shopListBox" class="section">
                
                    <!--Need to add a delete button/ Maybe a quantity button down the road-->
                   <table id="shopList">
                    
                        <caption><h2>Spending List</h2></caption> 
                        <thead id="table-header">   
                            <tr>
                            <th class="table-header" id="table-name">name</th>
                            <th class="table-header" id="table-date">date</th>
                            <th class="table-header"id="table-price">price</th>
                            <th class="table-header" id="table-delete">delete</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">
                            <tr class="newRow">
                                <td class="new-item" id="item-name">item</td>
                                <td class="new-item" id="item-date">item</td>
                                <td class="new-item" id="item-price">item</td>
                                <td class="new-item"><button class="item-button">Delete</button></td>
                            </tr>
                        </tbody>
                        <tfoot id="table-footer">
                            <tr>
                                <td id="item-price-sum" colspan="4" style="width: 100%" >Sum of Prices</td>
                            </tr>
                        </tfoot>
                   </table>
                   
                    <!--The sum of all the prices will go somewhere here-->
            </div>
        </div>
    </body>
</html>

Answer 1

您的 JavaScript 代码正在尝试访问 id 为 demo 的元素 ( <p id="demo"></p> ):
document.getElementById("demo").innerHTML = onListItem.itemDate;

您的脚本已添加到开始 body 标签处...

<body>
        <script src="ShopListScript.js"></script>
        ...

...这意味着 demo 元素尚不存在。

解决方案： 将您的脚本放在结束 body 标签之前：

...
        <script src="ShopListScript.js"></script>
    </body>
</html>

Answer 2

您也可以尝试设置

<script src="ShopListScript.js" defer="defer"></script>

因为 javascript 会阻止 DOM 渲染，所以我们应该放在

的末尾，就像 Peter Krebs 的回答一样：

        ...
    <script src="ShopListScript.js"></script>
</body>