'HTML / JavaScript = Age Group Identifier Code *problem

I am trying to do an activity in my web development class but I've ran into a problem that looks so simple but I seem to can't get my head around it. I've tried other solutions but still don't get what's wrong or lacking in my code.

I want my program to analyze the age and identify it, to overwrite on the paragraph id of agetext, the age group (children, early working age...)

<html>
<body>
<h1>Age Group Identifier</h1>
<p></p>To find out the category of an age group, please enter the age below.</p>
<form id="agegroupidentifier">
    Age: <input id="agein" type="text"><br>
    <input type="button" onclick="ageInput();" value="Submit">
    <p ="agetext"></p>
</form>
<script>
    function ageInput() {
var ageInp=document.getElementById("agein").value;
    }
        if (agein =< 14) {
        document.getElementById("agetext").innerHTML="Children";
        }
        else (agein =< 24)
        document.getElementById("agetext").innerHTML="Early Working Age";
                }
        else (agein =< 54)
        document.getElementById("agetext").innerHTML="Prime Working Age";
                }
        else (agein =< 64)
        document.getElementById("agetext").innerHTML="Mature Working Age";
                }
        else (agein > 64)
        document.getElementById("agetext").innerHTML="Elderly";
    }
</script>
</body>
</html>
javascripthtmlfunctionif-statementinput


Solution 1:[1]

There are many issues with your code:

  1. Your p tag appears to have a malformed id attribute. Change <p ="agetext"></p> to <p id="agetext"></p>

  2. There are way more closing braces } then there are opening braces { - they should be matched.

  3. The agein variable is never assigned and will always be undefined, may be ageInp should be renamed agein. Even better use ageIn.

  4. The less than or equal operator is <= not =<.

  5. The button input type will automatically attempt to submit the form unless you make a call to preventDefault() on the handlers event parameter.

  6. Assuming ageInp should be ageIn you will need to parse the string value to a number to make meaningful numerical comparisons, otherwise all comparisons will be string based where '10' is less than '3'.

  7. else clauses must be a complete if () you cannot do else ()

  8. innerHTML should probably be innerText unless you actually mean to create child HTML elements.

  9. your first p element is immediately closed without enclosing the text along with an ignored trailing closing </p>

Along with all these changes, I would also only set innerText in a single place and use a variable to hold the appropriate text ready to insert in to the page.

function ageInput(event) {
  event.preventDefault();
  var ageIn = parseInt(document.getElementById("AgeIn").value);
  var ageText = '';

  if (ageIn <= 14)
    ageText = "Children";
  else if(ageIn <= 24)
    ageText = "Early Working Age";
  else if (ageIn <= 54)
    ageText = "Prime Working Age";
  else if (ageIn <= 64)
    ageText = "Mature Working Age";
  else
    ageText = "Elderly";

  document.getElementById("AgeText").innerText = ageText;
}
<h1>Age Group Identifier</h1>
<p>To find out the category of an age group, please enter the age below.</p>
<form id="agegroupidentifier">
  Age: <input id="AgeIn" type="text"><br>
  <input type="button" onclick="ageInput(event);" value="Submit">
  <p id="AgeText"></p>
</form>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 phuzi

Related Questions