在瀏覽器上打開html時Javascript文件不起作用

Question

我有鏈接的CSS和javascript文件的html文件。 該html應該像一個通訊錄，可以在其中添加聯系人，按名稱搜索聯系人並顯示通訊錄中的所有聯系人。 我從Codepen頁面獲得了代碼，但是當我嘗試在文件中使用它時，它不起作用，我也不知道為什么。 下面是帶有原始代碼的codepen文件，我的代碼將在代碼段中。

https://codepen.io/ritaD86/pen/MyOdQr

 persons = [ person = { firstName: "Maria", lastName: "Fernanda", age: "mf@desk.com", phone: "917697967" }, ]; document.getElementById('search_button').addEventListener('click', searchPerson); document.getElementById('add_button').addEventListener('click', addPerson); document.getElementById('show_all').addEventListener('click', showAllPersons); function searchPerson() { var input = document.getElementById("search").value.toLowerCase(); var result = document.getElementById('result'); for (var i = 0; i < persons.length; i++) { if (input === persons[i].firstName.toLowerCase() || input === persons[i].lastName.toLowerCase()) { result.innerHTML = '<h4>I found this:</h4>' + persons[i].firstName + ' ' + persons[i].lastName + ' </br>' + persons[i].age + ' </br>' + persons[i].phone; return persons[i]; } else if (!isNaN(input)) { result.innerHTML = 'Tem de inserir um nome'; } else { result.innerHTML = 'Nenhum contacto encontrado'; } } } function Person(first, last, age, phone) { this.firstName = first; this.lastName = last; this.age = age; this.phone = phone; } function titleCase(string) { return string.charAt(0).toUpperCase() + string.slice(1); } function addPerson() { var firstName = titleCase(document.getElementById("name").value); var lastName = titleCase(document.getElementById("lastname").value); var age = document.getElementById("age").value; var phone = document.getElementById("phone").value; var newPerson = new Person(firstName, lastName, age, phone); persons.push(newPerson); if (newPerson.firstName != undefined) { alert(newPerson.firstName + ' added'); } else { alert('No person added'); } showAllPersons(); } function showAllPersons() { var i; var l; var showButton = document.getElementById('show_all'); var list = document.getElementById('all_list'); while (list.firstChild) { list.removeChild(list.firstChild); } for (var l = 0; l < persons.length; l++) { var node = document.createElement("LI"); list.appendChild(node); node.innerHTML = '<p><b>Nome Completo:</b> ' + persons[l].firstName +' ' + persons[l].lastName + '</p>' + '<p><b>Email:</b> ' + persons[l].age + '</p>' + '<p><b>Telemovel:</b> ' + persons[l].phone + '</p>' for (var key in person) { var value = person[key]; } } showButton.disabled = true; }

 html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } form { padding: 20px 0 40px; } form .field { padding: 10px 0; margin: 5px 0; display: inline-block; width: 100%; } form .field label { float: left; display: block; margin-right: 2.3576520234%; width: 40.291369653%; padding: 5px 10px; } form .field label:last-child { margin-right: 0; } form .field input { float: left; display: block; margin-right: 2.3576520234%; width: 57.3509783236%; padding: 5px 10px; } form .field input:last-child { margin-right: 0; } .container { max-width: 1200px; margin-left: auto; margin-right: auto; text-align: center; } .container::after { clear: both; content: ""; display: block; } .search_person { float: left; display: block; margin-right: 2.3576520234%; width: 48.8211739883%; } .search_person:last-child { margin-right: 0; } .add_person { float: left; display: block; margin-right: 2.3576520234%; width: 48.8211739883%; } .add_person:last-child { margin-right: 0; } .all_persons { float: left; display: block; margin-right: 2.3576520234%; width: 31.7615653177%; margin-left: 34.1192173411%; } .all_persons:last-child { margin-right: 0; } .all_persons #all_list { list-style-type: none; margin: 20px 0; padding: 0; } .all_persons #all_list li { margin: 0 0 30px; text-align: left; }

 <html> <head> <title>Desk+ - Grupo 36</title> <link rel="stylesheet" type="text/css" href="ab.css"> <script src="ab.js"></script> </head> <body> <div class="container"> <h1>Contactos</h1> <div class="all_persons"> <button id="show_all" type="button">Mostrar todos</button> <ul id="all_list"> </ul> </div> <div class="search_person"> <h3>Insira um nome</h3> <input type="text" id="search"> <button id="search_button" type="button">Procurar</button> <p id="result"></p> </div> <div class="add_person"> <h3>Adicionar contacto</h3> <form action="" method="post"> <div class="field"> <label for="firstname">Primeiro Nome: </label> <input type="text" id="name"> </div> <div class="field"> <label for="lastname">Último Nome: </label> <input type="text" id="lastname"> </div> <div class="field"> <label for="age">Email: </label> <input type="text" id="age"> </div> <div class="field"> <label for="phone">Phone: </label> <input type="number" id="phone"> </div> <button id="add_button" type="button">Add</button> </form> </div> </div> </body> </html>

顯然，代碼可以在代碼段中運行，但是當我在瀏覽器中創建html頁面時，它無法正常工作，因此您可以幫我嗎？

Answer 1

如評論中所述，將腳本移到body標簽的末尾將解決您的問題，但是，更好的方法是將腳本的立即調用部分（而不是函數定義）封裝在load事件監聽器中。 無論頁面放置在什么位置，僅在加載頁面中的所有元素后才會觸發該事件。

window.addEventListener('load', (event) => {
    console.log('page is fully loaded');
});

您的腳本應如下所示。

window.addEventListener('load', (event) => {
    document.getElementById('search_button').addEventListener('click', searchPerson);
    document.getElementById('add_button').addEventListener('click', addPerson);
    document.getElementById('show_all').addEventListener('click', showAllPersons);
});

在瀏覽器上打開html時Javascript文件不起作用

問題描述

1 個解決方案

解決方案1
2 已采納 2019-05-06 09:44:15

在瀏覽器上打開html時Javascript文件不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2019-05-06 09:44:15

解決方案1
2 已采納 2019-05-06 09:44:15