В коде не удаётся заставить отработать третий условный оператор else if в методе start. Как переиначить условие, что бы заработало?

Question

[Тимофей]

В методе объекта start три разных условия. Последнее не срабатывает, от слова совсем.

*{
    margin:0;
    padding:0;
 }
.dot{
    color: rgb(146, 145, 153);
 }
 button{
	background-color: yellowgreen;
	margin: 20px;
	width: 150px;
	height: 40px;
	font-size: 16px;
	color: green;
	font-weight: bold;
	border-radius: 15px;
}
button:active{
	background-color: indianred;
}
div{
   position: relative;
   display: flex;
	align-items: center;
	justify-content: center;
}
.msg_div{
	width: 100%;
	height: 65vh;
	font-size: 20px;
}
.fuel{
   margin: 20px;
   width: 200px;
   height: 120px;
   border: 2px solid brown;
   position: absolute;
   top: 0;
   left: 43%;
}
.fuel_p{
   background-color: #00A8DE;
   color: rgb(255, 255, 255);
   font-size: 22px;
   position: absolute;
   top: 0;
   width: 100%;
   text-align: center;
}
.amount{
   display: flex;
}

.n1{
   font-size: 30px;
   align-items: center;
   justify-content: center;
}
.dot{
   font-size: 25px;
   margin:0 2px;

}
.n2{
   font-size: 30px;
   align-items: center;
   justify-content: center;
}

let div=document.createElement('div');
let div_msg=document.createElement('div');
div_msg.className="msg_div";
div.append(div_msg);
let fuel=document.createElement('div');
fuel.className="fuel";
div.append(fuel);
let fuel_p=document.createElement('p');
fuel_p.className="fuel_p";
fuel_p.textContent='Расход топлива';
fuel.append(fuel_p);
let amount=document.createElement('div');
amount.className="amount";
fuel.append(amount);
let n1 =document.createElement('div');
n1.className="n1";
amount.append(n1);
let dot =document.createElement('div');
dot.className="dot";
amount.append(dot);
let n2 =document.createElement('div');
n2.className="n2";
amount.append(n2);
let btn = document.createElement('button');
btn.className="btn";
btn.textContent = "завести";
let btn2 = document.createElement('button');
btn2.className="btn2";
btn2.textContent = "заправить";
document.body.append(div,btn,btn2);
Car ={
	make:'Lada',
	model:'Kalina',
	color:'blue',
	fuel:0,
	started:false,
	start:function(){
		if(Car.started===false && Car.fuel===0){
		div_msg.innerHTML="";
	 	div_msg.innerHTML="Бак пуст.Заправьте автомобиль";
		}
		if(Car.started===false && Car.fuel>0){
			Car.started=true;
			console.log('Car.started '+ Car.started);
	 		div_msg.innerHTML="";
	 		div_msg.innerHTML="Двигатель заведён.";
			Car.rate1000();
		}
		else if(Car.started && Car.fuel<=0){
			div_msg.innerHTML="";
			div_msg.innerHTML="Двигатель заглох";
			Car.started=false;
			clearInterval(Car.rate1000);
			console.log('Car.started '+ Car.started);
		}
	},
	addFuel:function(){
		if(Car.fuel<=0){
			Car.fuel=Car.fuel+10;
			n1.textContent=`${Math.floor(Car.fuel/1000)}`;
			dot.textContent=".";
			n2.textContent=`${Math.floor(Car.fuel%1000)}`;
			div_msg.innerHTML="";
			div_msg.innerHTML="Автомобиль заправлен на 0.1л.";
			console.log('Car.fuel=' + Car.fuel);
		}
	},
	rate1000: function(){
		setInterval(()=>{
			Car.fuel--
			n1.textContent=`${Math.floor(Car.fuel/1000)}`;
			dot.textContent=".";
			n2.textContent=`${Math.floor(Car.fuel%1000)}`;
		}, 1000);
	},
};
n1.textContent=`${Math.floor(Car.fuel/1000)}`;
dot.textContent=".";
n2.textContent=`${Math.floor(Car.fuel%1000)}`;

btn.addEventListener('click',Car.start);
btn2.addEventListener('click',Car.addFuel);

Comments

[Сергей Сергей]

spoiler

let div=document.createElement('div');
let div_msg=document.createElement('div');
div_msg.className="msg_div";
div.append(div_msg);
let fuel=document.createElement('div');
fuel.className="fuel";
div.append(fuel);
let fuel_p=document.createElement('p');
fuel_p.className="fuel_p";
fuel_p.textContent='Расход топлива';
fuel.append(fuel_p);
let amount=document.createElement('div');
amount.className="amount";
fuel.append(amount);
let n1 =document.createElement('div');
n1.className="n1";
amount.append(n1);
let dot =document.createElement('div');
dot.className="dot";
amount.append(dot);
let n2 =document.createElement('div');
n2.className="n2";
amount.append(n2);
let btn = document.createElement('button');
btn.className="btn";
btn.textContent = "завести";
let btn2 = document.createElement('button');
btn2.className="btn2";
btn2.textContent = "заправить";
document.body.append(div,btn,btn2);
Car ={
  make:'Lada',
  model:'Kalina',
  color:'blue',
  fuel:0,
  started:false,
  start:function(){
    if(Car.started===false && Car.fuel===0){
    div_msg.innerHTML="";
   	div_msg.innerHTML="Бак пуст.Заправьте автомобиль";
    }
    if(Car.started===false && Car.fuel>0){
      Car.started=true;
      console.log('Car.started '+ Car.started);
   		div_msg.innerHTML="";
   		div_msg.innerHTML="Двигатель заведён.";
     }
    if(Car.started && Car.fuel<=0){
      div_msg.innerHTML="";
      div_msg.innerHTML="Двигатель заглох";
      Car.started=false;
      console.log('Car.started '+ Car.started);
    }
  },
  addFuel:function(){
    if(Car.fuel<=0){
      Car.fuel=Car.fuel+10;
      n1.textContent=`${Math.floor(Car.fuel/1000)}`;
      dot.textContent=".";
      n2.textContent=`${Math.floor(Car.fuel%1000)}`;
      div_msg.innerHTML="";
      div_msg.innerHTML="Автомобиль заправлен на 0.1л.";
      console.log('Car.fuel=' + Car.fuel);
    }else
    this.classList.add('none_click');
  },
  rate1000: function(){
    setInterval(()=>{
      if(Car.started && Car.fuel<=0){
        div_msg.innerHTML="";
        div_msg.innerHTML="Двигатель заглох";
        Car.started=false;
        console.log('Car.started '+ Car.started);
      }
      if(Car.started && Car.fuel > 0){
        Car.fuel--;
      }
      n1.textContent=`${Math.floor(Car.fuel/1000)}`;
      dot.textContent=".";
      n2.textContent=`${Math.floor(Car.fuel%1000)}`;
    }, 1000);
  },
};
Car.rate1000();

btn.addEventListener('click',Car.start);
btn2.addEventListener('click',Car.addFuel);

[Тимофей]

пробовал по всякому. И просто if, и вкладывал блок внутрь второго блока if-а:

started:false,
  start:function(){
    if(Car.started===false && Car.fuel===0){
    div_msg.innerHTML="";
   	div_msg.innerHTML="Бак пуст.Заправьте автомобиль";
    }
    if(Car.started===false && Car.fuel>0){
      Car.started=true;
      console.log('Car.started '+ Car.started);
   		div_msg.innerHTML="";
   		div_msg.innerHTML="Двигатель заведён.";

             if(Car.started && Car.fuel<=0){
                 div_msg.innerHTML="";
                 div_msg.innerHTML="Двигатель заглох";
                 Car.started=false;
                 console.log('Car.started '+ Car.started);
             }
     }
    
  },

Не отрабатывает

[Тимофей]

Братцы прошу прощения за беспокойство вот в таком варианте всё заработало:

Car ={
	make:'Lada',
	model:'Kalina',
	color:'blue',
	fuel:0,
	started:false,
	start:function(){
		if(Car.started===false && Car.fuel===0){
		div_msg.innerHTML="";
	 	div_msg.innerHTML="Бак пуст.Заправьте автомобиль";
		}
		if(Car.started===false && Car.fuel>0){
			Car.started=true;
			console.log('Car.started '+ Car.started);
	 		div_msg.innerHTML="";
	 		div_msg.innerHTML="Двигатель заведён.";
			Car.rate1000();
            
		}
	},
	addFuel:function(){
		if(Car.fuel<=0){
			Car.fuel=Car.fuel+10;
			n1.textContent=`${Math.floor(Car.fuel/1000)}`;
			dot.textContent=".";
			n2.textContent=`${Math.floor(Car.fuel%1000)}`;
			div_msg.innerHTML="";
			div_msg.innerHTML="Автомобиль заправлен на 0.1л.";
			console.log('Car.fuel=' + Car.fuel);
		}
	},
	rate1000: function(){
		rate=setInterval(()=>{
			Car.fuel--
			n1.textContent=`${Math.floor(Car.fuel/1000)}`;
			dot.textContent=".";
			n2.textContent=`${Math.floor(Car.fuel%1000)}`;
            if(Car.fuel===0){
                div_msg.innerHTML="";
                div_msg.innerHTML="Двигатель заглох";
                Car.started=false;
                clearInterval(rate);
                console.log('Car.started '+ Car.started);
            }
		}, 1000);
	},
};

я просто третий оператор с условием поместил в setInterval()

Answer 1

[Сергей Соколов]

у вас в одном if .. else if объединены проверки двух независимых переменных.

if (Car.started === false && Car.fuel > 0) {
  // и строго равно false, и fuel больше 0
} else if (Car.started && Car.fuel <= 0) {
   // сюда попадают не прошедшие первый if
  // и к тому же соответствующие второй проверке started && fuel <= 0
}
// никуда не попадут:
// Car.started = undefined (не строго false, но и не переводится в true
// Car.started === false, но и fuel > 0

Comments

[Тимофей]

может нужно внедрить как то цикл? Проверка осуществляется в подобном виде только один раз? Или я ошибаюсь?

[Тимофей]

Всё разобрался:

Car ={
	make:'Lada',
	model:'Kalina',
	color:'blue',
	fuel:0,
	started:false,
	start:function(){
		if(Car.started===false && Car.fuel===0){
		div_msg.innerHTML="";
	 	div_msg.innerHTML="Бак пуст.Заправьте автомобиль";
		}
		if(Car.started===false && Car.fuel>0){
			Car.started=true;
			console.log('Car.started '+ Car.started);
	 		div_msg.innerHTML="";
	 		div_msg.innerHTML="Двигатель заведён.";
			Car.rate1000();
            
		}
	},
	addFuel:function(){
		if(Car.fuel<=0){
			Car.fuel=Car.fuel+10;
			n1.textContent=`${Math.floor(Car.fuel/1000)}`;
			dot.textContent=".";
			n2.textContent=`${Math.floor(Car.fuel%1000)}`;
			div_msg.innerHTML="";
			div_msg.innerHTML="Автомобиль заправлен на 0.1л.";
			console.log('Car.fuel=' + Car.fuel);
		}
	},
	rate1000: function(){
		rate=setInterval(()=>{
			Car.fuel--
			n1.textContent=`${Math.floor(Car.fuel/1000)}`;
			dot.textContent=".";
			n2.textContent=`${Math.floor(Car.fuel%1000)}`;
            if(Car.fuel===0){
                div_msg.innerHTML="";
                div_msg.innerHTML="Двигатель заглох";
                Car.started=false;
                clearInterval(rate);
                console.log('Car.started '+ Car.started);
            }
		}, 1000);
	},
};

[Сергей Соколов]

Тимофей, цикл –не. Нужно просто продумать логику приложения. Какие бывают варианты значений у Car.started, какие у Car.fuel, сколько комбинаций они могут составить, и что делать в каждом из вариантов.

Вроде бы, вариантjd 6:

started  fuel
--------------
true     > 0
false    > 0
true     === 0
false    === 0
true     < 0
false    < 0

Answer 2

[Тимофей]

Братцы прошу прощения за беспокойство вот в таком варианте всё заработало:

Car ={
	make:'Lada',
	model:'Kalina',
	color:'blue',
	fuel:0,
	started:false,
	start:function(){
		if(Car.started===false && Car.fuel===0){
		div_msg.innerHTML="";
	 	div_msg.innerHTML="Бак пуст.Заправьте автомобиль";
		}
		if(Car.started===false && Car.fuel>0){
			Car.started=true;
			console.log('Car.started '+ Car.started);
	 		div_msg.innerHTML="";
	 		div_msg.innerHTML="Двигатель заведён.";
			Car.rate1000();
            
		}
	},
	addFuel:function(){
		if(Car.fuel<=0){
			Car.fuel=Car.fuel+10;
			n1.textContent=`${Math.floor(Car.fuel/1000)}`;
			dot.textContent=".";
			n2.textContent=`${Math.floor(Car.fuel%1000)}`;
			div_msg.innerHTML="";
			div_msg.innerHTML="Автомобиль заправлен на 0.1л.";
			console.log('Car.fuel=' + Car.fuel);
		}
	},
	rate1000: function(){
		rate=setInterval(()=>{
			Car.fuel--
			n1.textContent=`${Math.floor(Car.fuel/1000)}`;
			dot.textContent=".";
			n2.textContent=`${Math.floor(Car.fuel%1000)}`;
            if(Car.fuel===0){
                div_msg.innerHTML="";
                div_msg.innerHTML="Двигатель заглох";
                Car.started=false;
                clearInterval(rate);
                console.log('Car.started '+ Car.started);
            }
		}, 1000);
	},
};

я просто третий оператор с условием поместил в setInterval(), который является циклом и осуществляет проверку третьего условия, пока оно не отработает. То есть пока не закончится топливо в баке.