Show a notification when the values of variables 'enter' are not the

Question

Show a notification when the values of variables 'enter' are not the

I have a website featuring 2 text boxes, a button, and a paragraph. What I would like to do is have users input a number into textbox1, another number into textbox2, and then click the "calculate" button. Upon doing so, a statement should appear indicating whether the second number is lower, higher, or equal to the first number entered in textbox1. The code below is what I've tried, but it's not functioning as expected - it consistently returns the same result.

<input type="text" id="textbox1" value="Enter a number" onfocus="javascript:this.value='';">
<input type="text" id="textbox2" value="Enter another number" onfocus="javascript:this.value='';">
<button onclick="calculate()">Calculate</button>
<p id="demo"></p>
<script>
 function calculate(){
 var x="";
 if (textbox1 > textbox2){
  x="more than";
  }
 else if (textbox1 = textbox2){
  x="Same";
  }
 else{
  x="Lower";
  }
 document.getElementById("demo").innerHTML=x;
 }
</script>

Can anyone help me figure out why? Thank you!

javascript web

Answer 1

Answer №1

Make sure to update your code in the following way:

<input type="text" id="textbox1" value="Enter number here" onfocus="javascript:this.value='';">
<input type="text" id="textbox2" value="Enter another number" onfocus="javascript:this.value='';">
<button onclick="calculate()">Calculate</button>
<p id="demo"></p>
<script>
 function calculate()
{
var textbox1 = parseFloat(document.getElementById('textbox1').value);
var textbox2 = parseFloat(document.getElementById('textbox2').value);
var x="";
if (textbox1>textbox2)
  {
  x="greater than";
  }
else if (textbox1==textbox2)
  {
  x="Equal";
  }
else
  {
  x="Lesser";
  }
 document.getElementById("demo").innerHTML=x;
}
</script>

The issue in the initial script was that textbox1 and textbox2 were not defined, causing a failure in execution.

Answer 2

Make sure to update your code in the following way:

<input type="text" id="textbox1" value="Enter number here" onfocus="javascript:this.value='';">
<input type="text" id="textbox2" value="Enter another number" onfocus="javascript:this.value='';">
<button onclick="calculate()">Calculate</button>
<p id="demo"></p>
<script>
 function calculate()
{
var textbox1 = parseFloat(document.getElementById('textbox1').value);
var textbox2 = parseFloat(document.getElementById('textbox2').value);
var x="";
if (textbox1>textbox2)
  {
  x="greater than";
  }
else if (textbox1==textbox2)
  {
  x="Equal";
  }
else
  {
  x="Lesser";
  }
 document.getElementById("demo").innerHTML=x;
}
</script>

The issue in the initial script was that textbox1 and textbox2 were not defined, causing a failure in execution.

Answer 3

Answer №2

Try out this code snippet:

function compareValues() {
    var result = "";
    if (Number(input1.value) > Number(input2.value)) {
        result = "greater than";
    } else if (Number(input1.value) == Number(input2.value)) {
        result = "equal to";
    } else {
        result = "less than";
    }
    document.getElementById("output").innerHTML = result;
}

Check out the demo:http://jsfiddle.net/KDLvJ/1

Answer 4

Try out this code snippet:

function compareValues() {
    var result = "";
    if (Number(input1.value) > Number(input2.value)) {
        result = "greater than";
    } else if (Number(input1.value) == Number(input2.value)) {
        result = "equal to";
    } else {
        result = "less than";
    }
    document.getElementById("output").innerHTML = result;
}

Check out the demo:http://jsfiddle.net/KDLvJ/1

Answer 5

Answer №3

When you assign a value, use the single equals sign (=):

else if (textbox1=textbox2)

Make sure to compare values using double equals signs (==):

else if (textbox1==textbox2)

Also remember to specify textbox1.value and textbox1.value

Check out this jsFiddle example for reference.

Answer 6

When you assign a value, use the single equals sign (=):

else if (textbox1=textbox2)

Make sure to compare values using double equals signs (==):

else if (textbox1==textbox2)

Also remember to specify textbox1.value and textbox1.value

Check out this jsFiddle example for reference.

Answer 7

Answer №4

It is crucial to remember the .value property when comparing two textboxes in the code snippet. Instead of comparing the actual DOM Objects, make sure to compare their values by modifying the line:

if (textbox1>textbox2)

to

if (textbox1.value>textbox2.value)

Answer 8

It is crucial to remember the .value property when comparing two textboxes in the code snippet. Instead of comparing the actual DOM Objects, make sure to compare their values by modifying the line:

if (textbox1>textbox2)

to

if (textbox1.value>textbox2.value)

Answer 9

Answer №5

These are not just any strings, they're numbers in disguise:

// Finding the hidden digits (numbers)
var num1 = document.getElementById('number1'),
    num2 = document.getElementById('number2');

// Unveiling their true identities as numeric values
var num1Value = new Number(num1.value),
    num2Value = new Number(num2.value);

// The grand reveal
var result = '';

// Are they truly numbers? By using `new Number` and the value turning out to be
// non-numeric, we can validate it with isNaN (is Not-a-Number)
if (isNaN(num1Value) || isNaN(num2Value)){
  result = 'Invalid number(s)';
} else{
  // Let the battle of numbers begin
  if (num1Value > num2Value){
    result = 'higher';
  } else if (num2Value > num1Value) {
    result = 'Lower';
  } else {
    result = 'Equal';
  }
}

// Displaying the revelation on the screen
document.getElementById('output').innerHTML = result;

See it in action

Answer 10

These are not just any strings, they're numbers in disguise:

// Finding the hidden digits (numbers)
var num1 = document.getElementById('number1'),
    num2 = document.getElementById('number2');

// Unveiling their true identities as numeric values
var num1Value = new Number(num1.value),
    num2Value = new Number(num2.value);

// The grand reveal
var result = '';

// Are they truly numbers? By using `new Number` and the value turning out to be
// non-numeric, we can validate it with isNaN (is Not-a-Number)
if (isNaN(num1Value) || isNaN(num2Value)){
  result = 'Invalid number(s)';
} else{
  // Let the battle of numbers begin
  if (num1Value > num2Value){
    result = 'higher';
  } else if (num2Value > num1Value) {
    result = 'Lower';
  } else {
    result = 'Equal';
  }
}

// Displaying the revelation on the screen
document.getElementById('output').innerHTML = result;

See it in action

Show a notification when the values of variables 'enter' are not the

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is your prop callback failing to return a value?

Run a Javascript function when the expected event fails to happen

When I attempt to run several promises simultaneously with Promise.All, I encounter an error

Enhanced capabilities for the <input> element

Utilizing the Java Script SDK for Facebook API to Publish Actions

The comparison between dynamically adding elements through Javascript and hiding them using CSS

Facing difficulties in resetting the time for a countdown in React

Utilize JavaScript's $.post function to export PHP $_POST data directly into a file

Adjust the maximum and minimum values on a dual thumb slider

Struggling to incorporate JSON data and javascript functions into an HTML file

Running Windows commands from Node.js on WSL2 Ubuntu and handling escape sequences

The essential guide to creating a top-notch design system with Material UI

Creating a layered effect by overlaying one image on top of another in an HTML5

Could not locate module: The package path ./react is not exported from the package in E:NextAppportfolio_website-mainportfolio_website-main ode_modules ext-auth

Adjust the size of the div to match its parent's size when resizing

Increase in JQuery .ajax timeout not effective

Steps to display the leave site prompt during the beforeunload event once a function has finished running

Removing an element in Vue.js

Determine the identifier of the subsequent element located within the adjacent <div> using jQuery

Error message saying 'Callback has already been invoked' returned by an async waterfall function