Отображение одного из элементов DIV в зависимости от введенного пользователем значения - PullRequest
Новая
       0

Отображение одного из элементов DIV в зависимости от введенного пользователем значения

1 голос
/ 01 марта 2020

Я борюсь ...

У меня есть поле <input>. В зависимости от ввода должен отображаться один из различных элементов <div>. В этом примере это просто текст (например, «Dein Plan enthält weniger als 1500 kcal!»), Позже элементы div будут представлять собой целые блоки с картинками, кнопками и т. Д. c.

Я нашел несколько идей с jQuery но так как я никогда не работал с этим, я этого не понимаю. Поэтому я попробовал if с помощью функции if и изменив стиль: нет, чтобы заблокировать.

Что я делаю не так? Div не хочет появляться ... Я новичок с Javascript, поэтому, если у вас есть совет, пожалуйста, объясните это для абсолютной ладьи ie:)

Спасибо, ребята!

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>

Ответы [ 2 ]

0 голосов
/ 01 марта 2020

Я приложил демо-версию. Вы можете найти это полезным. 

  <!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>
0 голосов
/ 01 марта 2020

Я добавил свою версию, которая работает ниже. Посмотрите и посмотрите, сможете ли вы разобраться во всем этом. Не расстраивайтесь, я знаю, это поначалу может показаться ошеломляющим, но скоро снова будет весело :)) 

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Your diet-Plan</title>
	<style type="text/css">
		form {
			margin-bottom: 2rem;
		}

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

		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: #fff;
		}

		.anzeige:empty {
			display: none;
		}
	</style>
</head>
<body style="background-color:#000000">
	<form id="diat">
		<label for=bedarf>Mein Bedarf</label>
		<input type="text" name="bedarf" id="bedarf" placeholder="2345">
		<button class="button1" type="submit">Plan anzeigen</button>
	</form>
	<div class="anzeige" id="anzeige"></div>

	<script>
		function planholen( event ) {
			event.preventDefault();
			var bedarf = parseInt( document.getElementById('bedarf').value ) || 0;
			var bedarfGerundet = Math.ceil( bedarf / 100 ) * 100;
			var anzeige = document.getElementById('anzeige');
			if( bedarf > 0 ) {
				anzeige.innerHTML = 'Dein Plan enthält weniger als ' + bedarfGerundet + ' kcal!';
			}
			else {
				anzeige.innerHTML = '';
			}
		}

		document.getElementById('diat').addEventListener('submit', planholen);
	</script>
</body>
</html>

Я держал ваши спецификации столько, сколько мог, но добавил кое-что тут и там.

  1. Я добавил .anzeige:empty { display: none; } в вашем css, поскольку это избавляет вас от необходимости обращаться с этим логиком c. Просто очистите div сейчас, и он будет скрыт.
  2. Я сохранил исходные входные данные как bedarf, чтобы мы могли получить к ним доступ позже
  3. Я предполагал, что вы хотите очистить div когда ничего не было вставлено
  4. Теперь я вставляю текст через js вместо того, чтобы уже иметь его в DOM (намного меньше)
  5. вместо того, чтобы выполнять мою функцию при нажатии. Теперь я выполняю его при отправке. это означает, что когда кто-то нажимает клавишу return, она все еще работает (более a11y)
  6. Я держал там столько немецкого, сколько мог с моими ограниченными навыками немецкого языка:)

Ваш У кода были некоторые проблемы:

  1. var val = parseInt(document.getElementById("bedarf"); отсутствует закрывающая скобка
  2. Если бы кто-то что-то ввел бы и нажал бы на вашу кнопку, а затем передумал, ввел новую кнопку и нажал кнопка снова, они получили бы несколько сообщений, которые я предполагаю, не является целью
  3. Вышеупомянутая submit on return проблема
  4. if (val < 1500) { a.style.display = "block"; } else очень трудно читать для моего в любом случае ... попробуйте использовать новый л Инн для else if оператора

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...