How do I add new text after all functions are executed?

user_15955734 0
Viewed 34

I want to have a line of text "oh no you are staving" to show up only after all items are removed. So in this case it means all the function are executed. Do I have to create a if statement? Sorry I am really new to programming so I know my code is very wonky. Thanks for helping still!

  function ateKroket() {
    var delFood = document.getElementById("kroket");
    delFood.remove();
  }

  function ateCake() {
    var delFood = document.getElementById("cake");
    delFood.remove();
  }

  function atePizza() {
    var delFood = document.getElementById("pizza");
    delFood.remove();
  }

  function ateSushi() {
    var delFood = document.getElementById("sushi");
    delFood.remove();
  }
   <div id="foodStorage">

 <div id="kroket">
    <img class="foodImg" src= "images/kroket.jpg">
    <div><h5 id="foodName">Kroket</h5>
    <button class="ateBtn" onclick="ateKroket()">Ate</button>
    </div>
 </div>

 <div id="cake">
    <img class="foodImg" src= "images/cake.jpg">
    <div><h5 id="foodName">Cake</h5>
    <button class="ateBtn" onclick="ateCake()">Ate</button>
    </div>
 </div>

 <div id="pizza">
    <img class="foodImg" src= "images/pizza.jpg">
    <div><h5 id="foodName">Pizza</h5>
    <button class="ateBtn" onclick="atePizza()">Ate</button>
    </div>
 </div>

 <div id="sushi">
    <img class="foodImg" src= "images/sushi.jpg">
    <div><h5 id="foodName">Sushi</h5>
    <button class="ateBtn" onclick="ateSushi()">Ate</button>
    </div>
 </div>

function javascript
3 Answers

Add the following: (To HTML):

<div id="foodEaten" style="display:none;">4</div>

(Then to your Javascript):

    function ateKroket() {
    var delFood = document.getElementById("kroket");
    delFood.remove();
    checkFood()
  }

  function ateCake() {
    var delFood = document.getElementById("cake");
    delFood.remove();
    checkFood()
  }

  function atePizza() {
    var delFood = document.getElementById("pizza");
    delFood.remove();
    checkFood()
  }

  function ateSushi() {
    var delFood = document.getElementById("sushi");
    delFood.remove();
    checkFood()
    
  }
  function checkFood(){
    var foodLeft = parseInt(document.getElementById('foodEaten').innerHTML);
    foodLeft = foodLeft-1;
    document.getElementById('foodEaten').innerHTML = foodLeft;
 
     if(foodLeft<1){
      console.log("starving");
     //DO WHATEVER YOU WANT WHEN NO FOOD LEFT
     }
  }

What this will do is edit an invisible counter of food left each time a button is clicked, and then action something if that counter is a certain value

user_159208360

You should make use of classes to make your code more maintainable/reusable wihout repetition. Here is an example where I added a food class to each food div:

var foodStorage = document.getElementById('foodStorage'),
    ateBtns     = document.querySelectorAll('.ateBtn');

ateBtns.forEach(function(btn) {
  btn.addEventListener('click', function() {
    foodStorage.removeChild(this.closest('.food'));
    
    if (foodStorage.children.length === 0) {
      alert('Oh no, you are starving!');
    }
  });
});
<div id="foodStorage">
 <div class="food">
    <div><h5>Kroket</h5>
    <button class="ateBtn">Ate</button>
    </div>
 </div>
 <div class="food">
    <div><h5 id="foodName">Cake</h5>
    <button class="ateBtn">Ate</button>
    </div>
 </div>
 <div class="food">
    <div><h5>Pizza</h5>
    <button class="ateBtn">Ate</button>
    </div>
 </div>
 <div class="food">
    <div><h5>Sushi</h5>
    <button class="ateBtn">Ate</button>
    </div>
 </div>
</div>

user_19137290

You could declare a variable counter:

var food = 4;

function ateKroket() {
  var delFood = document.getElementById("kroket");
  delFood.remove();
  checkfood()
}

function ateCake() {
  var delFood = document.getElementById("cake");
  delFood.remove();
  checkfood()
}

function atePizza() {
  var delFood = document.getElementById("pizza");
  delFood.remove();
  checkfood()
}

function ateSushi() {
  var delFood = document.getElementById("sushi");
  delFood.remove();
  checkfood()
}
function checkfood() {
  food--;
   if (food === 0) {
     document.getElementById("starving").style.display = "block";
   }
  }
#starving {
  display: none;
}
<div id="foodStorage">

  <div id="kroket">
    <img class="foodImg" src="images/kroket.jpg">
    <div>
      <h5 id="foodName">Kroket</h5>
      <button class="ateBtn" onclick="ateKroket()">Ate</button>
    </div>
  </div>

  <div id="cake">
    <img class="foodImg" src="images/cake.jpg">
    <div>
      <h5 id="foodName">Cake</h5>
      <button class="ateBtn" onclick="ateCake()">Ate</button>
    </div>
  </div>

  <div id="pizza">
    <img class="foodImg" src="images/pizza.jpg">
    <div>
      <h5 id="foodName">Pizza</h5>
      <button class="ateBtn" onclick="atePizza()">Ate</button>
    </div>
  </div>

  <div id="sushi">
    <img class="foodImg" src="images/sushi.jpg">
    <div>
      <h5 id="foodName">Sushi</h5>
      <button class="ateBtn" onclick="ateSushi()">Ate</button>
    </div>
  </div>
  <div id="starving">
    oh no you are starving
  </div>
</div>

Or something much more optimized:

document.getElementById("foodStorage").addEventListener("click", function(e) {
  if (e.target.classList.contains("ateBtn")) {
    e.target.parentElement.parentElement.remove();
    if (this.childElementCount === 1) {
      document.getElementById("starving").style.display = "block";
    }
  }
});
#starving {
  display: none;
}
<div id="foodStorage">

  <div id="kroket">
    <img class="foodImg" src="images/kroket.jpg">
    <div>
      <h5 id="foodName">Kroket</h5>
      <button class="ateBtn">Ate</button>
    </div>
  </div>

  <div id="cake">
    <img class="foodImg" src="images/cake.jpg">
    <div>
      <h5 id="foodName">Cake</h5>
      <button class="ateBtn">Ate</button>
    </div>
  </div>

  <div id="pizza">
    <img class="foodImg" src="images/pizza.jpg">
    <div>
      <h5 id="foodName">Pizza</h5>
      <button class="ateBtn">Ate</button>
    </div>
  </div>

  <div id="sushi">
    <img class="foodImg" src="images/sushi.jpg">
    <div>
      <h5 id="foodName">Sushi</h5>
      <button class="ateBtn">Ate</button>
    </div>
  </div>

  <div id="starving">
    oh no you are starving
  </div>
</div>

user_124152870
Related