I'm struggling...

I have an `<input>` field. Depending on the input, one of the various `<div>` elements should be shown. In this example it's just a text (e.g. "Dein Plan enthält weniger als 1500 kcal!"), later the div elements will be whole blocks with pictures, buttons, etc.

I have found some ideas with jQuery but as I've never worked with it, I don't understand it. So i tried if with the if-function and changing the style:none to block.

What am I doing wrong? The div doens't want to appear... I'm a beginner with Javascript, so if you have a tip, please explain it for an absolute rookie :)

Thank you guys!

HTML

```
<body style="background-color:#000000">

<form>
    <p>
        <label for=bedarf> Mein Bedarf </label>
        <input type="bedarf" name="bedarf" id="bedarf" placeholder="2345">
        <button class="button1" type="button" id="berechnen" onclick="planholen()" > Plan anzeigen </button><br><br><br>
</form>

<div class="anzeige" id="erster" ><p>Dein Plan enthält weniger als 1500 kcal!</p></div>
<div class="anzeige" id="zweiter" ><p>Dein Plan enthält weniger als 1700 kcal!</p></div>
<div class="anzeige" id="dritter" ><p>Dein Plan enthält weniger als 1900 kcal!</p></div>
<div class="anzeige" id="vierter" ><p>Dein Plan enthält weniger als 2100 kcal!</p></div>
<div class="anzeige" id="funfter" ><p>Dein Plan enthält weniger als 2300 kcal!</p></div>
<div class="anzeige" id="sechster" ><p>Dein Plan enthält weniger als 2500 kcal!</p></div>
<div class="anzeige" id="siebter" ><p>Dein Plan enthält weniger als 2700 kcal!</p></div>
<div class="anzeige" id="achter" ><p>Dein Plan enthält weniger als 2900 kcal!</p></div>
<div class="anzeige" id="neunter" ><p>Dein Plan enthält weniger als 3100 kcal!</p></div>
<div class="anzeige" id="zehnter" ><p>Dein Plan enthält weniger als 3300 kcal!</p></div>
<div class="anzeige" id="elfter" ><p>Dein Plan enthält weniger als 3500 kcal!</p></div>
<div class="anzeige" id="zwölfter" ><p>Dein Plan enthält weniger als 3700 kcal!</p></div>
<div class="anzeige" id="dreizehnter" ><p>Dein Plan enthält weniger als 3900 kcal!</p></div>

</body>

```

CSS

```
<style>

label {
    width: 100px;
    display: inline-block;
    font-family: Arial;
    color: #ffffff;
}

input {
    width: 120px;
    height: 25px;
    text-align: center;
    font-family: Arial;
    font-size: 14px
}

.button1 {
    width:130px;
    height:25px;
    position: absolute;
    left: 250px;
    top: 4px;
}

button {
  background-color: #ddca07; /* Green */
  border: none;
  color: white;
  height:30px; 
  width:50px; 
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

button {
  background-color: black; 
  color: white; 
  border: 1px solid #ddca07;
  width:140px;
  height:25px;
  font-size: 16px;
  font-style:bold;
}

button:hover {
  background-color: #ddca07;
  color: black;
}

.anzeige {
    font-family:Arial;
    color:#ffffff;
    display:none;
    }

</style>

```

JS

```
<script>

function planholen() {
    var a = document.getElementById("erster");
    var b = document.getElementById("zweiter");
    var c = document.getElementById("dritter");
    var d = document.getElementById("vierter");
    var e = document.getElementById("funfter");
    var f = document.getElementById("sechster");
    var g = document.getElementById("siebter");
    var h = document.getElementById("achter");
    var i = document.getElementById("neunter");
    var j = document.getElementById("zehnter");
    var k = document.getElementById("elfter");
    var l = document.getElementById("zwölfter");
    var m = document.getElementById("dreizehnter");

    var val = parseInt(document.getElementById("bedarf");

    if (val < 1500) { a.style.display = "block"; } else
    if (val < 1700) { b.style.display = "block"; } else
    if (val < 1900) { c.style.display = "block"; } else
    if (val < 2100) { d.style.display = "block"; } else
    if (val < 2300) { e.style.display = "block"; } else
    if (val < 2500) { f.style.display = "block"; } else
    if (val < 2700) { g.style.display = "block"; } else
    if (val < 2900) { h.style.display = "block"; } else
    if (val < 3100) { i.style.display = "block"; } else
    if (val < 3300) { j.style.display = "block"; } else
    if (val < 3500) { k.style.display = "block"; } else
    if (val < 3700) { l.style.display = "block"; } else
    if (val < 3900) { m.style.display = "block"; } 

</script>

```