Браузер не будет отражать изменения в файлах JS
Недавно я узнал, как разместить локальный веб-сервер, и в последнее время я столкнулся с очень неприятной проблемой. Мой браузер видит изменения, которые я вношу в свои файлы HTML и CSS, но никак не реагирует на мой файл JS. Все они находятся в одной папке index.js, index.html и main.css. Меня очень расстраивает и трудно практиковать, когда я даже не могу сказать, работает ли то, что я делаю. Кто-нибудь видит какие-либо проблемы с моим кодом, которые могут объяснить это? Кэш у меня отключен, поэтому я знаю, что это не так.
HTML:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Shopping List</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet">
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<div class = "container">
<h1>Shopping List</h1>
<form id = "js-shopping-list-form">
<label for = "shopping-list-entry">Add an item</label>
<input type = "text" name = "shopping-list-entry" id = "shopping-list-entry" placeholder = "e.g., broccoli">
<button type = "submit">Add item</button>
</form>
</div>
<script src = "https://code.jquery.com/jquery-3.2.1.js"></script>
<script src = "index.js"></script>
</body>
</html>
JS:
'use strict';
/* global $ */
function addItem(){
$('input').prop('required');
$('#js-shopping-list-form').submit(event => {
event.preventDefault();
const userTextElement = $(event.currentTarget).find('#shopping-list-entry');
helpAdd(userTextElement.val());
});
}
function checkItem(){
$('.shopping-list').on('click', '.shopping-item-toggle', event => {
event.preventDefault();
});
}
function deleteItem(){
$('.shopping-list').on('click', '.shopping-item-delete', event => {
event.preventDefault();
});
}
function helpCheck(item) {
if ($(item.closest('li')).find('>:first-child').attr('class') === 'shopping-
item shopping-item__checked')
{
$(item.closest('li')).find('>:first-child').attr('class','shopping-item');
}
else{
$(item.closest('li')).find('>:first-child').attr('class','shopping-item
shopping-item__checked');
}
}
function helpAdd(itemName){
$( '.shopping-list').append(` <li>
<span class = "shopping-item">${itemName}</span>
<div class = "shopping-item-controls">
<button class = "shopping-item-toggle">
<span class = "button-label">check</span>
</button>
<button class = "shopping-item-delete">
<span class = "button-label">delete</span>
</button>
</div>
</li>`);
}
$(addItem);
$(checkItem);
$(deleteItem);
Какой браузер вы используете? Вы пробовали Shift, нажимая кнопку обновления?"
Попробуйте сильно обновить страницу, Ctrl + Shift + R
Я использую Хром. И да, у меня есть, никакое количество обновлений ничего не исправляет. Иногда, если я полностью закрою страницу и снова открою ее, это сработает, но в большинстве случаев это не сработает.
ты проверял консоль? В случае ошибки скрипт доходит до этого момента и вы можете не увидеть изменений на сайте
@user615274 user615274 ничего не отображается в консоли: / Я пробовал копировать и вставлять код из старых проектов, где я ЗНАЮ, что нет никаких ошибок и где что-то должно появиться, и это даже не отражает эти изменения.
не могли бы вы показать содержимое index.js? чтобы попытаться разобраться в проблеме. Я мог бы быть логичным
@user615274 user615274 уверен, что я только что добавил код JS в исходный пост
Можете ли вы попробовать найти файл сценария в исходном коде на вкладке консоли в Chrome?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы используете хром:
Перейти к DevTools(F12) > Network tab > mark Disable cache
Затем обновите браузер, открыв окно DevTools.
Похоже, вам не хватает элемента с классом «список покупок», который я только что добавил как <ul class = "shopping-list"></ul>
Пожалуйста, попробуйте этот код
'use strict';
/* global $ */
function addItem() {
$('input').prop('required');
$('#js-shopping-list-form').submit(event => {
event.preventDefault();
const userTextElement = $(event.currentTarget).find('#shopping-list-entry');
helpAdd(userTextElement.val());
});
}
function checkItem() {
$('.shopping-list').on('click', '.shopping-item-toggle', event => {
event.preventDefault();
});
}
function deleteItem() {
$('.shopping-list').on('click', '.shopping-item-delete', event => {
event.preventDefault();
});
}
function helpCheck(item) {
if ($(item.closest('li')).find('>:first-child').attr('class') === 'shopping-item shopping - item__checked')
{
$(item.closest('li')).find('>:first-child').attr('class', 'shopping-item');
}
else {
$(item.closest('li')).find('>:first-child').attr('class', 'shopping-item shopping - item__checked');
}
}
function helpAdd(itemName) {
$('.shopping-list').append(` <li>
<span class = "shopping-item">${itemName}</span>
<div class = "shopping-item-controls">
<button class = "shopping-item-toggle">
<span class = "button-label">check</span>
</button>
<button class = "shopping-item-delete">
<span class = "button-label">delete</span>
</button>
</div>
</li>`);
}
$(addItem);
$(checkItem);
$(deleteItem);<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<h1>Shopping List</h1>
<form id = "js-shopping-list-form">
<label for = "shopping-list-entry">Add an item</label>
<input type = "text" name = "shopping-list-entry" id = "shopping-list-entry" placeholder = "e.g., broccoli">
<button type = "submit">Add item</button>
</form>
<ul class = "shopping-list"></ul>
</div>
убедитесь, что вы очистили кеш, затем перезагрузите страницу