Помогите с кодом js

Question

Помогите с кодом js

Анастасия Мишина Профи (522), на голосовании 1 год назад

Есть HTML код <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="h1">Заявка на обучение</h1>
<div class="form-container">
<form id="form">
<label class="form-label" for="fio">Введите ФИО:</label>
<input class="form-input" type="text" id="fio" name="fio" required>

<label class="form-label" for="department">Введите департамент:</label>
<select id="departament" name="departament">
<option value="it">Департамент ИТ</option>
<option value="stroy">Департамент строительства</option>
<option value="buhgalteria">Департамент бухгалтерского учета</option>
<option value="sobstvennost">Департамент управления собственностью</option>
</select>

<label class="form-label" for="start_date">Введите дату начала обучения:</label>
<input class="form-input" type="date" id="start_date" name="start_date" required>

<label class="form-label" for="contact_info">Введите контактные данные:</label>
<input type="tel" id="from-label" name="from-label" value="+7" maxlength="12">

<button class="form-button" type="submit">Отправить</button>
</form>
</div>

<!— Подключение внешнего файла JavaScript —>
<script src="script.js"></script>
</body>
</html>,нужно написать код на js,чтобы все данные при нажатии на кнопку"отправить" выводились. я в js не шарю,воспользовалась чатом гпт. он предложил следующий код:document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector("#form");

form.addEventListener("submit", function (event) {
event.preventDefault();

const fio = document.querySelector("#fio").value;
const department = document.querySelector("#departament").value;
const startDate = document.querySelector("#start_date").value;
const contactInfo = document.querySelector("#from-label").value;

console.log("ФИО: " + fio);
console.log("Департамент: " + department);
console.log("Дата начала обучения: " + startDate);
console.log("Контактные данные: " + contactInfo);

// Здесь вы можете выполнить другие действия с данными, если это необходимо.
});
}); однако у меня вылазят ошибки

Дополнен 1 год назад

следующие ошибки: JSLint (4)
2
Missing 'use strict' statement. const form = document.querySelector("#form");
2
Expected 'const' at column 5, not column 1. const form = document.querySelector("#form");
2
Expected an identifier and instead saw 'const'. const form = document.querySelector("#form");
2
Stopping. (10% scanned). const form = document.querySelector("#form");
ESLint (1)
2
ERROR: Parsing error: The keyword 'const' is reserved const form = document.querySelector("#form");

Дополнен 1 год назад

Answer 1

- Мастер (1875) 1 год назад

а какие ошибки?

Анастасия МишинаПрофи (522) 1 год назад

я дополнила

- Мастер (1875) Анастасия Мишина, все вроде бы правильно выглядеть

Анастасия МишинаПрофи (522) 1 год назад

но не работает почему-то

- Мастер (1875) Анастасия Мишина, у меня сработало

-Мастер (1875) 1 год назад

Анастасия МишинаПрофи (522) 1 год назад

у мня значит с программой возможно что то не то? брекетс

- Мастер (1875) Анастасия Мишина, его надо в браузере запустить

Answer 2

Татьяна Шеховцова Высший разум (521106) 1 год назад

Выводились куда? Тот чат предложил бесполезный на практике код, который выводит значения полей в консоль браузера

Анастасия МишинаПрофи (522) 1 год назад

аааа,ну я даже не знаю как обьяснить. чтобы когда нажимаешь отправить,в браузере открыалось окошко поверх моей формы с данными,которые ввели

Татьяна Шеховцова Высший разум (521106) Анастасия Мишина, в простейшем варианте на alert надо переписывать, но настолько топорно никто не делает. Так что гугли "модельные окна" (там много чего надо дописывать)

Answer 3

Ваши ошибки связаны с тем, что ваша среда разработки не поддерживает современный синтаксис JavaScript, включая ключевое слово const. Возможно, вы используете старую версию JavaScript или ваша среда разработки настроена на использование старой версии.

Вместо const вы можете использовать var, который поддерживается в большинстве версий JavaScript. Вот исправленный код:

 document.addEventListener("DOMContentLoaded", function () {  
var form = document.querySelector("#form");  
 
form.addEventListener("submit", function (event) {  
event.preventDefault();  
 
var fio = document.querySelector("#fio").value;  
var department = document.querySelector("#departament").value;  
var startDate = document.querySelector("#start_date").value;  
var contactInfo = document.querySelector("#from-label").value;  
 
console.log("ФИО: " + fio);  
console.log("Департамент: " + department);  
console.log("Дата начала обучения: " + startDate);  
console.log("Контактные данные: " + contactInfo);  
 
// Здесь вы можете выполнить другие действия с данными, если это необходимо.  
});  
});

Answer 4

Тут по идее надо доработать, проверять поля на пустоту и предлагать заполнить, решается просто обычным добавлением requied в любое поле input ну и сам пример:
Песочница
Если что то не ясно, то пишите вопрос на специализированные форумы типа ru.stackoverflow.com или qna.habr.com