Я работал над кодом HTML с Javascript. Последние две недели я пытался создать платформу с использованием валидации. Я кодировал и проверял по пути, но почему-то код больше не отвечает, и я запутался в том, что я сделал не так.

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

window.addEventListener("load", function() {
	let form = document.querySelector("form");

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

		let items = document.getElementById('faultyItems');
		let launchStatus = document.getElementById('launchStatus');
		let fuelStatus = document.getElementById('fuelStatus');
		let cargoStatus = document.getElementById('cargoStatus')
		let ready = true;

		let pilotName = document.querySelector("input[name=pilotName]").value;
		let copilotName = document.querySelector("input[name=copilotName]").value;
		let fuelLevel = document.querySelector("input[name=fuelLevel]").value;
		let cargoMass = document.querySelector("input[name=cargoMass]").value;

		if (pilotName === "" || copilotName === "" || fuelLevel === '' || isNaN(fuelLevel) || cargoMass === '' || isNaN(cargoMass) ) {

			alert("All fields are required!");
			items.style.visibility = 'hidden';

			launchStatus.style.color = 'black';
			launchStatus.innerHTML = 'Awaiting Information Before Launch';

		} else {

			items.style.visibility = 'visible';

			document.getElementById('pilotStatus').innerHTML = `Pilot ${ pilotName + ' ' }Ready`
			document.getElementById('copilotStatus').innerHTML = `Co-pilot ${ copilotName + ' ' }Ready`

			if (fuelLevel < 10000) {
				ready = false;
				fuelStatus.innerHTML = 'Not enough fuel for launch';
			} else {
				fuelStatus.innerHTML = 'Fuel level high enough for launch';
			}

			if (cargoMass > 10000) {
				ready = false;
				cargoStatus.innerHTML = 'Too much mass for the shuttle to take off';
			} else {
				cargoStatus.innerHTML = 'Cargo mass low enough for launch';
			}

			if (ready) {
				launchStatus.style.color = 'green';
				launchStatus.innerHTML = 'Shuttle is ready for launch';
				retrieveData();
			} else {
				items.style.visibility = 'visible';
				launchStatus.style.color = 'red';
				launchStatus.innerHTML = 'Shuttle not ready for launch';
			}

		}

	});
});


function retrieveData() {

	fetch('https://handlers.education.launchcode.org/static/planets.json').then( function (response) {
		response.json().then(function (data) {
			let targets = document.getElementById('missionTarget');
			let random = Math.round(Math.random() * data.length);
			let target = data[random];

			targets.innerHTML =
				`<h2>Mission Destination</h2>
				<ol>
				   <li>Name: ${target.name}</li>
				   <li>Diameter: ${target.diameter}</li>
				   <li>Star: ${target.stat}</li>
				   <li>Distance from Earth: ${target.distance}</li>
				   <li>Number of Moons: ${target.moons}</li>
				</ol>
				<img src="${target.image}">`


		});
	})

}
<!DOCTYPE>
<html>
    <head>
        <title>Launch Checklist</title>
        <link rel = "stylesheet" type = "text/css" href = "styles.css" />
        <script src = "script.js"></script>
    </head>
    <body>
        <h1>Launch Checklist Form</h1>
        <div id="missionTarget">
            <!-- Fetch some planetary data -->
           
        </div>
        <div id="launchForm">
            <form>
                <div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
                    <label>Pilot Name <input type="text" name="pilotName" id="pilotName"/></label>
                </div>
                <div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
                    <label>Co-pilot Name <input type="text" name="copilotName"/></label>
                </div>
                <div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
                    <label>Fuel Level (gal) <input type="text" name="fuelLevel"/></label>
                </div>
                <div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
                    <label>Cargo Weight (lbs) <input type="text" name="cargoWeight"/></label>
                </div>
                <button id="formSubmit">Submit</button>
            </form>
        </div>
        <div id="launchStatusCheck">
            <h2 id="launchStatus">Awaiting Information Before Launch</h2>
            <div  id="faultyItems">
                <ol>
                    <li id="pilotStatus">Pilot Ready</li>
                    <li id="copilotStatus">Co-pilot Ready</li>
                    <li id="fuelStatus">Fuel level high enough for launch</li>
                    <li id="cargoStatus">Cargo weight low enough for launch</li>
                </ol>
            </div>
        </div>   
    </body>
</html>

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

Если кто-то может объяснить, что я делаю неправильно, было бы здорово.

0
codingTia

1 ответ

замещать

        let cargoMass = document.querySelector("input[name=cargoMass]").value;

С участием

        let cargoMass = document.querySelector("input[name=cargoWeight]").value;

Я предполагаю, что вы перепутали массу и вес.

На будущее смотрите консольные сообщения.

58514095