<body>
<div class="container mt-4">
<h1 class="display-4 text-center">
<i class="fas fa-car text-success"></i>
My<span class="text-success ">Car</span>List</h1>
<form id="car-form">
<div class="form-group">
<label for="worker">Empoloyee ID</label>
<input type="text" id="worker" class="form-control">
</div>
<div class="form-group">
<label for="carVin">Car Vin</label>
<input type="text" id="carVin" class="form-control">
</div>
<div class="form-group">
<label for="strTime">Start time</label>
<input type="text" id="strTime" class="form-control">
</div>
<div class="form-group">
<label for="endTime">End time</label>
<input type="text" id="endTime" class="form-control">
</div>
<input type="submit" value="Add Car" class="btn btn-primary btn-block">
</form>
</body>
<div class="container mt-4">
<h1 class="display-4 text-center">
<i class="fas fa-car text-success"></i>
My<span class="text-success ">Car</span>List</h1>
<form id="car-form">
<div class="form-group">
<label for="worker">Empoloyee ID</label>
<input type="text" id="worker" class="form-control">
</div>
<div class="form-group">
<label for="carVin">Car Vin</label>
<input type="text" id="carVin" class="form-control">
</div>
<div class="form-group">
<label for="strTime">Start time</label>
<input type="text" id="strTime" class="form-control">
</div>
<div class="form-group">
<label for="endTime">End time</label>
<input type="text" id="endTime" class="form-control">
</div>
<input type="submit" value="Add Car" class="btn btn-primary btn-block">
</form>
<table class="table table-striped table-hover table-dark mt-3">
<thead>
<tr>
<th>Employee ID</th>
<th>Car Vin</th>
<th>Start time</th>
<th>End time</th>
<th></th>
</tr>
</thead>
<tbody id="car-list"></tbody>
</table>
<!div id="my-filter" class="msg" >
<!input type="submit" value="Filter Car" class="btn btn-primary btn-block">
</div>
Я устанавливаю новый div, используемый для отображения сообщений об ошибках для моей программы, используя метод insertBefore (), но, похоже, он не работает. Как бы я это исправить? Что мне нужно изменить?
class UI {
static displayCars(){}
static addCarToList(car){
const list = document.querySelector('#car-list');
const row = document.createElement('tr');
row.innerHTML = `
<td>${car.worker}</td>
<td>${car.carVin}</td>
<td>${car.strTime}</td>
<td>${car.endTime}</td>
<td><a href="#" class="btn btn-danger btn-sm
delete">Clear</a></td>`;
list.appendChild(row);
}
static showAlert(message, className){
const div =document.createElement('div');
div.className = `alert alert-${className}`;
div.appendChild(document.createTextNode(message));
const container = document.querySelector('.container');
const form = document.querySelector('#car-form');
// before(newnode, existingnode)
// IM HAVING THE ERROR LINE 49
container.insertBefore(div, form);
// Vanish in 3 secs
setTimeout(() => document.querySelector('.alert').remove(),3000);
}
}
Программа отобразит массив автомобилей, но не выдаст предупреждающее сообщение в строке 111
if(worker === ''|| carVin === ''|| strTime === '' || endTime === ''){
UI.showAlert('Please fill all fields', 'danger'); //LINE 111
} else {
// Instatiate car
const car = new Car(worker, carVin, strTime, endTime);
// Add car to list
// UI.addCarToList(car); ///
// Add car to local storage
Store.addCar(car);
UI.displayCars(); ///
// Show Success msg
UI.showAlert('Car Added', 'success');
//Clear fields
UI.clearFields();
}
[! [ОПИСАНИЕ ОШИБКИ] [2]] [2] app.js: 56 Uncaught DOMException: не удалось выполнить «insertBefore» для «Node»: узел, перед которым должен быть вставлен новый узел, не является дочерним для этого узла. в Function.showAlert (файл: /// C: /Users/awbak/Desktop/WEBSITES/My%20Car%20List/app.js: 56: 13) в HTMLFormElement. (файл: /// C: /Users/awbak/Desktop/WEBSITES/My%20Car%20List/app.js: 120: 6)
[1]: https://i.stack.imgur.com/G1yIM.png
[2]: https://i.stack.imgur.com/koiYh.png