Я работаю над 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>Я ожидаю заполнить предупреждение, если форма не заполнена или недействительна. Я также ожидаю, что требования к шаттлу будут обновляться, когда шаттл будет готов или не готов.
Если кто-то может объяснить, что я делаю неправильно, было бы здорово.
1 ответ
Заменить
let cargoMass = document.querySelector("input[name=cargoMass]").value;
С участием
let cargoMass = document.querySelector("input[name=cargoWeight]").value;
Я предполагаю, что вы перепутали массу и вес.
На будущее смотрите сообщения консоли.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.