Javascript 显示一个DIV元素，具体取决于用户输入值_Javascript_Css

Javascript 显示一个DIV元素，具体取决于用户输入值

javascript css

Javascript 显示一个DIV元素，具体取决于用户输入值,javascript,css,Javascript,Css,我在挣扎我有一个字段。根据输入，应显示各种元素之一。在本例中，它只是一个文本（例如“Dein Plan enthält weniger als 1500 kcal！”），稍后div元素将是带有图片、按钮等的整个块我发现了一些关于jQuery的想法，但由于我从未使用过它，所以我不理解它。所以我用if函数尝试了if，并更改了样式：none为block 我做错了什么？该部门不想出现。。。我是Javascript的初学者，所以如果你有什么建议，请向新手解释：）谢谢你们 HTML 我的贝达夫计

我在挣扎

我有一个

字段。根据输入，应显示各种

元素之一。在本例中，它只是一个文本（例如“Dein Plan enthält weniger als 1500 kcal！”），稍后div元素将是带有图片、按钮等的整个块

我发现了一些关于jQuery的想法，但由于我从未使用过它，所以我不理解它。所以我用if函数尝试了if，并更改了样式：none为block

我做错了什么？该部门不想出现。。。我是Javascript的初学者，所以如果你有什么建议，请向新手解释：）

谢谢你们

HTML



我的贝达夫
计划时间



Dein Plan Entält weniger als 1500千卡
Dein Plan Entält weniger als 1700千卡
Dein Plan Entält weniger als 1900千卡
Dein Plan Entält weniger als 2100千卡
Dein Plan Entält weniger als 2300千卡
Dein Plan Entält weniger als 2500千卡
Dein Plan Entält weniger als 2700千卡
Dein Plan Entält weniger als 2900千卡
Dein Plan Entält weniger als 3100千卡
Dein Plan Entält weniger als 3300千卡
Dein Plan Entält weniger als 3500千卡
Dein Plan Entält weniger als 3700千卡
Dein Plan Entält weniger als 3900千卡

CSS


标签{
宽度：100px；
显示：内联块；
字体系列：Arial；
颜色：#ffffff；
}
输入{
宽度：120px；
高度：25px；
文本对齐：居中；
字体系列：Arial；
字号：14px
}
.按钮1{
宽度：130px；
高度：25px；
位置：绝对位置；
左：250px；
顶部：4px；
}
钮扣{
背景色：#ddca07；/*绿色*/
边界：无；
颜色：白色；
高度：30px；
宽度：50px；
填充：2x10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：20px；
利润：4倍2倍；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
光标：指针；
}
钮扣{
背景色：黑色；
颜色：白色；
边框：1px实心#ddca07；
宽度：140px；
高度：25px；
字体大小：16px；
字体风格：粗体；
}
按钮：悬停{
背景色：#ddca07；
颜色：黑色；
}
安泽格先生{
字体系列：Arial；
颜色：#ffffff；
显示：无；
}


函数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
如果（val<2300）{e.style.display=“block”}else
如果（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
如果（val<3900）{m.style.display=“block”}

我在下面添加了一个有效的版本。看看你是否能理解这一切。不要气馁，我知道一开始它会让人感觉很压抑，但很快又会很有趣：）


你的饮食计划
形式{
边缘底部：2rem；
}
标签{
宽度：100px；
显示：内联块；
字体系列：Arial；
颜色：#fff；
}
输入{
宽度：120px；
高度：25px；
文本对齐：居中；
字体系列：Arial；
字体大小：14px；
}
.按钮1{
宽度：130px；
高度：25px；
位置：绝对位置；
左：250px；
顶部：4px；
}
钮扣{
背景色：#ddca07；/*绿色*/
边界：无；
颜色：白色；
高度：30px；
宽度：50px；
填充：2x10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：20px；
利润：4倍2倍；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
光标：指针；
}
钮扣{
背景色：黑色；
颜色：白色；
边框：1px实心#ddca07；
宽度：140px；
高度：25px；
字体大小：16px；
字体风格：粗体；
}
按钮：悬停{
背景色：#ddca07；
颜色：黑色；
}
安泽格先生{
字体系列：Arial；
颜色：#fff；
}
安泽格：空的{
显示：无；
}
我的贝达夫
计划
普兰霍伦函数（事件）{
event.preventDefault（）；
var bedarf=parseInt（document.getElementById（'bedarf'）.value）| | 0；
var bedarfGerundet=数学单元（bedarf/100）*100；
var anzeige=document.getElementById（'anzeige'）；
如果（bedarf>0）{
anzeige.innerHTML='Dein Plan enthält weniger als'+bedarfGerundet+'kcal！'；
}
否则{
anzeige.innerHTML=''；
}
}
document.getElementById（'diat'）。addEventListener（'submit'，planholen）；

我在下面添加了一个有效的版本。看看你是否能理解这一切。不要气馁，我知道一开始它会让人感觉很压抑，但很快又会很有趣：）


你的饮食计划
形式{
边缘底部：2rem；
}
标签{
宽度：100px；
显示：
<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>

<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>

<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>

  <!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
      <div style="border:solid 1px #ddd; padding:10px; display:block;">
          <div>
              <label>Number:</label>
              <div><input id="number" name="value" /></div>
          </div>
      </div>
      <p>
          <input type="button" value="Click Here" id="bt" onclick="planholen(this)">
      </p>
      <div class="anzeige" id="erster" style="display:block;">
        <p>Dein Plan enthält weniger als 1500 kcal!</p>
      </div>
      <div class="anzeige" id="zweiter" style="display:block;">
        <p>Dein Plan enthält weniger als 1700 kcal!</p>
      </div>
  </body>
  <script>
      function planholen(ele) {
          if(document.getElementById('number').value < 1500){
            document.getElementById('erster').style.display = 'none';
          }
          if(document.getElementById('number').value < 1700){
            document.getElementById('zweiter').style.display = 'none';
          }
      }
  </script>
</html>