私は始めたばかりです。私はHTML、CSS、JavaScriptを知っており、今はjQueryを学んでいます。3つの入力ボックスと1つのボタンがあります。入力ボックスのいずれかが空の場合にボタンをクリックできるようにしたくありません。これが私のコードが今どのように立っているかです...
let garage = [];
const maxCars = 100;
class Car{
constructor(year, make, model){
this.year = year;
this.make = make;
this.model = model;
}
}
$(document).ready(function() {
$('#addCarButton').on('click', function() {
let newCar = new Car($('#yearInput').val(), $('#makeInput').val(), $('#modelInput').val() );
if (garage.length < maxCars){
garage.push(newCar);
} else {
console.log('Sorry garage is full');
return false;
}
updateGarage();
$('#yearInput').val('');
$('#makeInput').val('');
$('#modelInput').val('');
});
});
function newCar(year, make, model){
console.log('in newCar:', year, make, model);
garage.push(new Car(year, make, model));
return true;
}
function updateGarage() {
let outputElement = $('#garageList');
outputElement.empty();
for (let car of garage) {
outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Garage</title>
</head>
<body>
<h1>Garage</h1>
<div id="garageDiv"></div>
<div id="inputDiv">
<input type="number" placeholder="year" id="yearInput" >
<input type="text" placeholder="make" id="makeInput" >
<input type="text" placeholder="model" id="modelInput" >
<button type="button" id="addCarButton">Add Car</button>
</div>
<ul id="garageList">
</ul>
<script src="scripts/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="scripts/scrap.js" charset="utf-8"></script>
</body>
</html>解決策はこんな感じになると思います...
$(document).ready(function() {
$('#addCarButton').prop('disabled', true);
if ($('#modelInput').val().length != 0) {
$('#addCarButton').prop('disabled', false);}
$('#addCarButton').on('click', function() {
無効化/有効化は機能すると思いますが、どの条件を使用すればよいかわかりません。私が持っているのは1つの入力をテストするだけですが、各入力にコンテンツがある場合にのみボタンが有効になるようにしたいと思います。
ここにあるものを実行すると、何があってもボタンが無効になります。私は遊んでみましたが、ランダムな条件が真の場合に有効にすることができます。
また、条件を複数回実行してチェックする方法が必要だと感じていますが、その方法がわかりません。
$(function() {
let garage = [];
const maxCars = 100;
class Car {
constructor(year, make, model) {
this.year = year;
this.make = make;
this.model = model;
}
}
$('#yearInput, #makeInput, #modelInput').on('input', function(event) {
let year = $('#yearInput').val();
let make = $('#makeInput').val();
let model = $('#modelInput').val();
if(year && make && model) {
$('#addCarButton').prop('disabled', false);
}
});
$('#addCarButton').on('click', function() {
let year = $('#yearInput').val();
let make = $('#makeInput').val();
let model = $('#modelInput').val();
let newCar = new Car(year, make, model);
if (garage.length < maxCars) {
garage.push(newCar);
} else {
console.log('Sorry garage is full');
return false;
}
updateGarage();
$('#yearInput').val('');
$('#makeInput').val('');
$('#modelInput').val('');
$('#addCarButton').prop('disabled', true);
});
function newCar(year, make, model) {
console.log('in newCar:', year, make, model);
garage.push(new Car(year, make, model));
return true;
}
function updateGarage() {
let outputElement = $('#garageList');
outputElement.empty();
for (let car of garage) {
outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
}
}
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Garage</h1>
<div id="garageDiv"></div>
<div id="inputDiv">
<input type="number" placeholder="year" id="yearInput" >
<input type="text" placeholder="make" id="makeInput" >
<input type="text" placeholder="model" id="modelInput" >
<button type="button" id="addCarButton" disabled>Add Car</button>
</div>
<ul id="garageList">
</ul>
</body>
</html>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加