Displaying the appropriate DIV element based on the value entered by the user

Question

Displaying the appropriate DIV element based on the value entered by the user

I am encountering some difficulties...

I have an <input> field. Depending on the input, one of the various <div> elements should be displayed. For now, it's just a text (e.g. "Your plan contains less than 1500 kcal!"), but later, the div elements will be blocks with images, buttons, etc.

I have come across some ideas using jQuery, but since I am new to it, I find it hard to understand. So, I tried using the if-function and changing the style from none to block.

What am I missing? The div doesn't seem to appear... As a beginner in JavaScript, any tips you have, please explain it as though to a complete novice :)

Thank you everyone!

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="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
}

...

JS

<script>

function planholen() {
    var a = document.getElementById("erster");
    var b = document.getElementById("zweiter");
    ...
    var m = document.getElementById("dreizehnter");

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

    if (val < 1500) { a.style.display = "block"; } else
    ...
    if (val < 3900) { m.style.display = "block"; } 

</script>

javascript css

Answer 1

Answer №1

Check out my updated version below to see if it makes sense to you. Don't worry if it seems overwhelming at first, it will become enjoyable again soon :)

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

I adhered to your requirements as much as possible but made a few additions for better functionality.

I included
```
.anzeige:empty { display: none; }
```
in your CSS to simplify the logic for hiding the div. Simply empty the div to hide its content.
I retained the original input name as bedarf for future reference.
I assumed the div should be emptied when no input is provided.
I used JS to insert the text dynamically to reduce the initial DOM size.
Changed the function execution from click to submit for accessibility (better usability).
Kept some German phrases as per your original text.

Your existing code had some issues:

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

is missing a closing parenthesis

Multiple messages were displayed if the button was clicked multiple times, which may not be intended.
The logic for submitting on return key press was missing.

The formatting of

if (val < 1500) { a.style.display = "block"; } else

could be improved for readability.

Hope this explanation helps!

Answer 2

Check out my updated version below to see if it makes sense to you. Don't worry if it seems overwhelming at first, it will become enjoyable again soon :)

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

I adhered to your requirements as much as possible but made a few additions for better functionality.

I included
```
.anzeige:empty { display: none; }
```
in your CSS to simplify the logic for hiding the div. Simply empty the div to hide its content.
I retained the original input name as bedarf for future reference.
I assumed the div should be emptied when no input is provided.
I used JS to insert the text dynamically to reduce the initial DOM size.
Changed the function execution from click to submit for accessibility (better usability).
Kept some German phrases as per your original text.

Your existing code had some issues:

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

is missing a closing parenthesis

Multiple messages were displayed if the button was clicked multiple times, which may not be intended.
The logic for submitting on return key press was missing.

The formatting of

if (val < 1500) { a.style.display = "block"; } else

could be improved for readability.

Hope this explanation helps!

Answer 3

Answer №2

Please see the attached demo versions for your reference.

  <!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
      <div style="border:solid 1px #ccc; padding:15px; display:block;">
          <div>
              <label>Code:</label>
              <div><input id="code" name="value" /></div>
          </div>
      </div>
      <p>
          <input type="button" value="Submit" id="btn" onclick="getCode(this)">
      </p>
      <div class="display" id="first" style="display:block;">
        <p>Your code is valid!</p>
      </div>
      <div class="display" id="second" style="display:block;">
        <p>Your code is invalid!</p>
      </div>
  </body>
  <script>
      function getCode(element) {
          if(document.getElementById('code').value < 1500){
            document.getElementById('first').style.display = 'none';
          }
          if(document.getElementById('code').value < 2000){
            document.getElementById('second').style.display = 'none';
          }
      }
  </script>
</html>

Answer 4

Please see the attached demo versions for your reference.

  <!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
      <div style="border:solid 1px #ccc; padding:15px; display:block;">
          <div>
              <label>Code:</label>
              <div><input id="code" name="value" /></div>
          </div>
      </div>
      <p>
          <input type="button" value="Submit" id="btn" onclick="getCode(this)">
      </p>
      <div class="display" id="first" style="display:block;">
        <p>Your code is valid!</p>
      </div>
      <div class="display" id="second" style="display:block;">
        <p>Your code is invalid!</p>
      </div>
  </body>
  <script>
      function getCode(element) {
          if(document.getElementById('code').value < 1500){
            document.getElementById('first').style.display = 'none';
          }
          if(document.getElementById('code').value < 2000){
            document.getElementById('second').style.display = 'none';
          }
      }
  </script>
</html>

Displaying the appropriate DIV element based on the value entered by the user

Answer №1

Answer №2

Similar questions

Is it possible to protect passwords internally via URL and AJAX?

Steps for triggering a function when the 'Enter' key is pressed in a TextInput in a React Native application

Step-by-step guide on achieving 100% height for the <main> element in a Material UI drawer demo

Separate a string using commas but disregard any commas inside quotation marks

Generating dynamic forms using JSON Schema in Angular 8 can greatly streamline the form creation process

Querying MongoDB with Mongoose to find objects in an array based on a specific date stored

Quick tip on closing an Angular-ui modal from a separate controller

By using .innerHTML to create an element, the validation of HTML form fields can be circumvented

Data cannot be transferred to a child element unless it has been initialized during the definition phase

Programmatically setting focus in Ionic

Error in executing Javascript function

Replicate the styling of CSS class A and apply it to class B

Tips for implementing ::before and ::after pseudo-elements within an anchor tag

403 Forbidden error occurs when AJAX value %27 is triggered

Javascript auto submission fails to execute following the completion of the printer script

How can React useEffects avoid an infinite loop when using setData()?

Steps for sorting items from a list within the past 12 hours

The environmental variables stored in the .env file are showing up as undefined in Next.js 13

Creating a like and dislike button using Jquery's ajax functionality

React Native displaying identical path