Consistently obtaining the same outcome in JavaScript, always

Question

Consistently obtaining the same outcome in JavaScript, always

Is it possible to resolve this issue? I keep getting a result of less than 18 when trying numbers 1-100, even though the output should be for values under 18.

In my HTML code, there is a <p> element with id="result", an input with id="age", and a button with id="btn".

JavaScript:
let result = document.getElementById("result");
let button = document.getElementById("btn");
let age = document.getElementById("age");

function checkAge() {

if (age >= 18){
    document.getElementById("result").innerHTML = "You have successfully signed up.";
}
if (age <= 65){
    document.getElementById("result").innerHTML = "You have successfully signed up.";
}
if (age < 18){
    document.getElementById("result").innerHTML = "You are too young to sign up.";
}
if (age > 65){
    document.getElementById("result").innerHTML = "You are too old to sign up.";
}
}

javascript

Answer 1

Answer №1

Focus on the crucial age ranges - too young or too old - in your function to determine if a user is in the correct age group:

function checkAge() {
  if (age < 18) {
      document.getElementById("result").innerHTML = "You are too young";
  } else if (age > 65) {
      document.getElementById("result").innerHTML = "You are too old";
  } else {
      document.getElementById("result").innerHTML = "Successfully registered";
  }
}

If they are younger than 18, they are considered too young. If they are older than 65, they are considered too old. Otherwise, they can register successfully.

Ensure you are extracting a number from the "age" element, like so:

let age = parseInt(document.getElementById("age").value);

Answer 2

Focus on the crucial age ranges - too young or too old - in your function to determine if a user is in the correct age group:

function checkAge() {
  if (age < 18) {
      document.getElementById("result").innerHTML = "You are too young";
  } else if (age > 65) {
      document.getElementById("result").innerHTML = "You are too old";
  } else {
      document.getElementById("result").innerHTML = "Successfully registered";
  }
}

If they are younger than 18, they are considered too young. If they are older than 65, they are considered too old. Otherwise, they can register successfully.

Ensure you are extracting a number from the "age" element, like so:

let age = parseInt(document.getElementById("age").value);

Answer 3

Answer №2

const result = document.getElementById("result");
const button = document.getElementById("btn");
const age = document.getElementById("years");

function checkAge() {
    let message = '';

    if (age >= 18) {
        message = "You have successfully signed up";
    } else if (age <= 65) {
        message = "You have successfully signed up";
    } else if (age < 18) {
        message = "You are too young";
    } else if (age > 65) {
        message = "You are too old";
    }

    document.getElementById("result").innerHTML = message;
}

Answer 4

const result = document.getElementById("result");
const button = document.getElementById("btn");
const age = document.getElementById("years");

function checkAge() {
    let message = '';

    if (age >= 18) {
        message = "You have successfully signed up";
    } else if (age <= 65) {
        message = "You have successfully signed up";
    } else if (age < 18) {
        message = "You are too young";
    } else if (age > 65) {
        message = "You are too old";
    }

    document.getElementById("result").innerHTML = message;
}

Answer 5

Answer №3

The issue lies in the fact that the tests are being conducted on the variable 'god', which represents the HTML input element, rather than the actual value entered by the user.

To retrieve the value, you should use god.value

Give this a try

let = document.getElementById("rezultat");//By the way, this is not doing anything useful
let dugme = document.getElementById("btn");
let god = document.getElementById("godine");

function myFunction() {
if (god.value >= 18){
    document.getElementById("rezultat").innerHTML = "You have successfully registered";
}
if (god.value <= 65){
    document.getElementById("rezultat").innerHTML = "You have successfully registered";
}
if (god.value < 18){
    document.getElementById("rezultat").innerHTML = "You are too young";
}
if (god.value > 65){
    document.getElementById("rezultat").innerHTML = "You are too old";
}
}

<p id="rezultat"></p>
<input id="godine"/>
<button id="btn" onclick="myFunction();">Submit</button>

Answer 6

The issue lies in the fact that the tests are being conducted on the variable 'god', which represents the HTML input element, rather than the actual value entered by the user.

To retrieve the value, you should use god.value

Give this a try

let = document.getElementById("rezultat");//By the way, this is not doing anything useful
let dugme = document.getElementById("btn");
let god = document.getElementById("godine");

function myFunction() {
if (god.value >= 18){
    document.getElementById("rezultat").innerHTML = "You have successfully registered";
}
if (god.value <= 65){
    document.getElementById("rezultat").innerHTML = "You have successfully registered";
}
if (god.value < 18){
    document.getElementById("rezultat").innerHTML = "You are too young";
}
if (god.value > 65){
    document.getElementById("rezultat").innerHTML = "You are too old";
}
}

<p id="rezultat"></p>
<input id="godine"/>
<button id="btn" onclick="myFunction();">Submit</button>

Consistently obtaining the same outcome in JavaScript, always

Answer №1

Answer №2

Answer №3

Similar questions

Blocking the space bar in JavaScript is a useful technique that can be

Prevent the hover() effect from affecting all div elements at once

Error: React-Redux unable to locate Redux context value while utilizing useSelector function

Can I send a DELETE request with request body and headers using Axios?

How can I substitute a specific capture group instead of the entire match using a regular expression?

Verify if the nested arrays within the object consist of any empty elements

Node.js's module-only scope concept allows variables and functions defined within

Angular.js enables the ability to display views from several partials that are loaded dynamically

Combining two lists in immutable.js by flattening and zipping

Adding input values to a jQuery Ajax POST request

How can we best store the component's state in the URL in AngularJS?

Unable to render properly after saving to Firebase

Is there a way to search through a list and apply filters based on parameters found within a nested object?

Crushing jQuery's Sortable/Droppable

Struggling to generate an HTML table using JSON data

Getting the length of child elements in Angular using ngFor loop

The functionality of php.js is compromised

When utilizing a script to deliver a true or false response for jQuery's .load() function

Puppeteer with Typescript: Encountering issues during the transpilation process

Could there possibly exist a counterpart to .cloneNode?