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

The asynchronous ajax function fails to work properly when setInterval is activated

Can Vuex mapActions be utilized within a module that is exported?

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

Develop an application using ASP.NET MVC that allows for returning a JavascriptResult along with a

What is the best way to optimize a search for objects with extensive field arrays?

Show a different image with a matching title each time the page loads

What is the best way to format a text component so that the initial word in each sentence is bolded?

Doesn't the .stop(true) function completely clear the queue as it should?

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

Is it possible to swap the src of the Next.Js Image Component dynamically and incorporate animations in the

Updating controller variables when the route changes in AngularJS

Using the outer ng-repeat's object property to filter nested ng-repeat items

Error: Access Denied - discord.js bot command cannot be executed due to lack of authorization

Issues with sending emails through Nodemailer in a Next.js project using Typescript

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Capturing and setting form element values within a Javascript Module Pattern

Using JavaScript ES6, we can access a specific array nested within a JSON array and loop through its elements by utilizing the

Automatically simulate the pressing of the enter key in a text field upon page load using Javascript

Kendo's data-bind onclick feature functions properly on web browsers but fails to work on mobile devices

Is it possible to save user inputs in a .json file for future use, and retrieve and reuse them in subsequent sessions or processes?