How do I show a DIV id based on three inputs?

I am fairly new to javascript and wish to ask for some guidance.

I am trying to make a function that shows a Div id based on three inputs:

  • Diet type
  • Number of calories
  • Number of meals

Thanks.

<div class="dietSelector">


  <div class="diet">
    <div class="header">
      <h2>Diet</h2>
    </div>

    <li class=nav-item>
      <input type="radio" onclick="create()" id="anything">Anything
    </li>

    <li class=nav-item>
      <input type="radio"id="keto">Keto
    </li>

    <li class=nav-item>
      <input type="radio" id="vegetarian">Vegetarian
    </li>

    <form class="form" id="form-control">
      <label>Calories:
</label>
      <input type="number" id="calories" min="500" max="5000">
      <br><br>
      <label>
Meals: 
</label>
      <input type="number" placeholder="2" id="meals" min="1" max="5">

      <button onClick="create" value="create">Create</button>
      <br><br>
    </form>
  </div>
</div>

Answer

There were a few changes required in your code, kindly check the updated code in the below snippet.

I guess, this is your desired output. Let me know if you require further assistance.

function generateMeal(event) {
  event.preventDefault();
  debugger;
  const calories = Number(document.getElementById("calories").value);
  const meals = Number(document.getElementById("meals").value);
  const anythingPlan3 = document.getElementById("anythingPlan3");
  anythingPlan3.style.display = "none";

  if (
    document.getElementById("anything").checked &&
    calories > 1500 &&
    calories < 2000 &&
    meals == 4
  ) {
    anythingPlan3.style.display = "block";
  } else {
    anythingPlan3.style.display = "none";
  }
}
<div class="dietSelector">
  <div class="dietContainer">
    <div class="header">
      <h2>Please choose your diet</h2>
    </div>

    <li class="nav-item">
      <input
        type="radio"
        name="diets"
        id="anything"
      />Anything
      <img src="images/meat.png" class="diets" />
    </li>

    <li class="nav-item">
      <input type="radio" name="diets" id="keto" />Keto
      <img src="images/keto.png" class="diets" />
    </li>

    <li class="nav-item">
      <input type="radio" name="diets" id="vegetarian" />Vegetarian
      <img src="images/vegetarian.png" class="diets" />
    </li>

    <form class="diet" onsubmit="generateMeal(event)" id="dietForm">
      <label
        >Please enter the number of calories you wish to eat in a day:
      </label>
      <input
        type="number"
        placeholder="1800"
        id="calories"
        min="1000"
        max="2500"
      />
      <br /><br />
      <label> How many meals you would like to eat: </label>
      <input type="number" placeholder="4" id="meals" min="3" max="4" />

      <button type="submit" value="Generate">Generate</button>
    </form>
  </div>
</div>

<!-- Div container for Anything Plan, 3 meals. 1500-2500 Calories-->
<div id="anythingPlan3" style="display: none;">
  <h2>
    Your delicious, personalised 3-meal plan of 'Anything' in a 1500-2000
    calorie range:
  </h2>
  <h3 class="headings">Breakfast</h3>
  <img src="images/oatmeal.jpg" class="mealImage" />
  <span class="calories"> 628 Calories </span>
  <br />
  <a
    class="recipes"
    href="https://www.runningtothekitchen.com/strawberry-oatmeal/"
  >
    Strawberry Oatmeal</a
  >
  <br />
  <span class="serving">2 Bowls</span>

  <h3 class="headings">Lunch</h3>
  <img src="images/drumsticks.jpg" class="mealImage" />
  <span class="calories"> 504 Calories </span>
  <br />
  <a
    class="recipes"
    href="https://www.taste.com.au/recipes/smoky-bbq-drumsticks-carrot-noodle-salad/RUmTZzJv?r=healthy/qnLBa1zE"
  >
    Smokey Bbq Drumsticks and Carrot Noodle Salad</a
  >
  <br />
  <span class="serving">1 serving</span>

  <h3 class="headings">Dinner</h3>
  <img src="images/meatballs.jpg" class="mealImage" />
  <span class="calories"> 628 Calories</span>
  <br />
  <a
    class="recipes"
    href="https://www.bbcgoodfood.com/recipes/chicken-meatballs-quinoa-curried-cauliflower"
  >
    Chicken Meatballs with Quinoa & Curried cauliflower></a
  >
  <br />
  <span class="serving">1 serving</span>
</div>