which one is bigger?! a problem in my js code - javascript

I write a js code to determine which number is bigger but the result is not perfect! when I input two number with same digit numbers, the result is correct. For example when I input "2" and "3" the result is "3" but when I input "2" in first field and "55" in the second field, the result is "2". Thank you in advance.
sorry for my weak English.
function biggerOne() {
var x = document.getElementById("firstNumber").value;
var y = document.getElementById("secondNumber").value;
if (x>y){ document.getElementById("Result").innerHTML=x;
} else {
document.getElementById("Result").innerHTML=y;
}
}
<!DOCTYPE html>
<head>
<script src="show bigger.js"></script>
</head>
<body>
<p>insert first number</p>
<input type="number" id="firstNumber" ر>
<p> insert second number</p>
<input type="number" id="secondNumber">
<button onclick="biggerOne()"> result </button>
<!---it is so important to insert value in the below code line-->
<p id="Result" value=""></p>
</body>

Document.getElementById() returns "String" type value and comparison between two string will act differently. Better convert those string types to integer.
var x = document.getElementById("firstNumber").value;
var y = document.getElementById("secondNumber").value;
if (parseInt(x) > parseInt(y))
{
document.getElementById("Result").innerHTML=x;
}
else
{
document.getElementById("Result").innerHTML=y;
}

change type of x and y to number and then try to compare.for convert you can use Number or parsint
if (Number(x) > Number(Y))
//some code
else
//some code

<!DOCTYPE html>
<head>
<script src="show bigger.js"></script>
</head>
<body>
<p>insert first number</p>
<input type="number" id="firstNumber" ر>
<p> insert second number</p>
<input type="number" id="secondNumber">
<button onclick="biggerOne()"> result </button>
<!---it is so important to insert value in the below code line-->
<p id="Result" value=""></p>
<script>
function biggerOne() {
var x = document.getElementById("firstNumber").value;
var y = document.getElementById("secondNumber").value;
if (parseInt(x) > parseInt(y)) {
document.getElementById("Result").innerHTML = x;
} else {
document.getElementById("Result").innerHTML = y;
}
}
</script>
</body>
Use the parseInt method.

Related

Having trouble displaying output

This might sound like a simple thing for you programmers out there but i can't seem to figure it out. I'm making a program that where among 4 numbers the largest is outputted. I've got the core code working but i can't seem to think how i can display the results on the screen. I would like it so that when the user types a number into a text box the result appears in another text box at the press of a button. Thanks for your time & help.
HTML
<html>
<head>
<meta charset="UTF-8">
<script src="Main.js" type="text/javascript"></script>
<link href="Main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form id="Awesome">
<label>Input Numbers Here: </label><input type="text"
id="txtBox">
<br><br>
<label>Dec to Roman #: </label><input type="text" id="Results">
<br><br>
<input type="button" value="Calculate" id="Execute"
onclick="largestOfFour()">
</form>
</body>
</html>
Javascript
function largestOfFour(arr) {
var largestNumbers = [];
var currentLargest;
for (var x =0; x <arr.length; x++) {
currentLargest = 0;
for (var y = 0; y < arr [x].length; y++) {
if (arr[x][y] > currentLargest) {
currentLargest = arr[x][y];
}
}
largestNumbers.push(currentLargest);
}
return largestNumbers;
document.getElementById('Results').value = largestNumbers;
}
After entering the numbers in an input box, we can read its value as a string. Splitting that string with a space give us the numbers array. We will compare each number in that array to each other and save the biggest number in largest. Then we display its value in a Result box.
function largestOfFour() {
// get string from the input
var s = document.getElementById('txtBox').value;
var numbers = s.split(' ');
var largest = 0;
for (var x = 0; x < numbers.length; x++) {
var current = parseInt(numbers[x])
if (current > largest)
largest = current;
}
// display the largest number
document.getElementById('Results').value = largest;
}
<form id="Awesome">
<label>Input 4 Numbers (space separated): </label>
<input type="text" id="txtBox">
<br><br>
<label>Max #: </label>
<input type="text" id="Results" readonly>
<br><br>
<input type="button" value="Calculate" id="Execute" onclick="largestOfFour()">
</form>

Calculate the difference between number from user input

This should be a no brainer but i have no experience in Javascript and i can't see why this should not work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
<p> STD: </p>
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
</head>
<body>
<script>
function useUndantag() {
var a = document.getElementsByName("STD");
var b = document.getElementsByName("ATD");
var c = document.getElementsByName("STA");
var d = document.getElementsByName("ATA");
if (a-b >1) {
alert("No undantag");
}
else if (d-c >2) {
alert ("No undantag");
else () {
alert ("NO EU FOR YOU!")
}
}
}
</script>
</body>
</html>
The problem is that i get no alert at all and i can't seem to figure out why. If anyone has any tips if would be very glad for any help i can get.
First of all, getElementsByName returns a collection of HTML elements. Use [0] to access the first element. Next, you must use parseFloat or parseInt to parse the inputs as integers/floats. Also, HTML code goes in the body tag unless you have scripts, links, meta, title, and other tags. Finally, you have an syntax error:
else () { }
Should not have parentheses. You're also missing a brace after the else if, remove a closing brace after the else. Here's a fixed snippet:
function useUndantag() {
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
if (parseInt(a) - parseInt(b) > 1) { //notice the use of parseInt, you can use parseFloat to deal with decimals
alert("No undantag");
} else if(parseInt(d) - parseInt(c) > 2) {
alert("No undantag");
} else { //Notice no parentheses and some more braces
alert("NO EU FOR YOU!")
}
}
<p> STD: </p> <!-- HTML is in body tag !-->
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
Also, make sure you use .value to get the value.
Your syntax is incorrect.
Also, if you are comparing the values of the inputs then you need to get the value attribute of the input.
Also, document.getElementsByName returns an array of elements so you need to select the first element.
Here is a working example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
</head>
<body>
<p> STD: </p>
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
<script>
function useUndantag() {
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
if (a - b > 1) {
alert("No undantag");
} else if (d - c > 2) {
alert("No undantag");
} else {
alert("NO EU FOR YOU!")
}
}
</script>
</body>
</html>
You have enough errors
the function
document.getElemenstByName
return an array!
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
and you have sentences misdeclared
here code:
https://jsfiddle.net/evpog628/1/
1) It's better to use getElementById(), it's faster and you select only one element ("id" must be unique in HTML document).
2) Be sure to use correct HTML structure
<!doctype html>
<html>
<head>
<meta>
<title></title>
</head>
<body>
<input>
<script>
</script>
</body>
</html>
3) You need to be sure you get integer or float values from HTML fields to make your code work correctly. parseInt() or pareseFloat().
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
</head>
<body>
<p> STD: </p><input type="number" id="STD">
<p> STA: </p><input type="number" id="STA">
<p> ATD: </p><input type="number" id="ATD">
<p> ATA: </p><input type="number" id="ATA">
<button onclick="useUndantag();">Click me</button>
<script>
function useUndantag() {
var a = document.getElementById("STD");
var b = document.getElementById("ATD");
var c = document.getElementById("STA");
var d = document.getElementById("ATA");
if (parseInt(a.value)-parseInt(b.value)>1) {
alert("No undantag");
}
else if (parseInt(d.value)-parseInt(c.value) >2)
{
alert ("No undantag");
}
else
{
alert ("NO EU FOR YOU!");
}
}
</script>
</body>
</html>

My output shows "[object HTMLInputElement]" rather than the sum of my inputs

I am trying to make a simple HTML page with four text boxes. In my output, I am only getting object HTMLInputElement.
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function nhap_number(){
var a = document.nhap.number_a;
var b = document.nhap.number_b;
}
function random_c(){
var c = Math.round(Math.random()*100)%100;
document.getElementById("number_c").value=c;
}
function random_d(){
var d = Math.round(Math.random()*100)%100;
document.getElementById("number_d").value=d;
}
function sum(number_a,number_b,number_c,number_d){
return(number_a+number_b+number_c+number_d);
alert("ddddddd");
}
function show(){
myDiv = document.getElementById("show");
myDiv.innerHTML = "sum: "+sum(number_a+number_b+number_c+number_d);
}
</script>
<body>
<div>
<form name = "nhap">
<p> input a: <input id = "number_a" type="text" placeholder="please input number a "/></p>
<p> input b: <input id = "number_b" type="text" placeholder="please input number b "/></p>
<p> input c: <input id = "number_c" placeholder="random number c "/><input type="button" value="value_c" onClick="random_c();"/></p>
<p> input d: <input id = "number_d" placeholder="random number d "/><input type="button" value="value_d" onClick="random_d();"/></p>
<input type="button" value="Valid Form" onClick="show();">
</form>
</div>
<div id="show">
</div>
</body>
</html>
You never defined number_a, number_b, ... and so on. Some browsers will define them as a HTML element being based on the id. So the value number_a will be referencing the HTML element with the id number_a in this case. Trying to print them will show the value [object HTMLInputElement], you will want to get the .value property of them, then convert them to a number:
+number_a.value // note the "+" converts the string to a number
// or
+document.getElementById("number_a").value // recommenced
Change in show() function
myDiv.innerHTML = "sum:"+sum(parseInt(document.getElementById('number_a').value)+parseInt(document.getElementById('number_b').value)+parseInt(document.getElementById('number_c').value)+parseInt(document.getElementById('number_d').value));
You were trying to add HTML elements together. Also do a parseInt of their values.
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function nhap_number(){
var a = document.nhap.number_a;
var b = document.nhap.number_b;
}
function random_c(){
var c = Math.round(Math.random()*100)%100;
document.getElementById("number_c").value=c;
}
function random_d(){
var d = Math.round(Math.random()*100)%100;
document.getElementById("number_d").value=d;
}
function sum(number_a,number_b,number_c,number_d){
return(Number(number_a.value)+Number(number_b.value)+Number(number_c.value)+Number(number_d.value));
}
function show(){
myDiv = document.getElementById("show");
debugger;
myDiv.innerHTML = "sum: "+sum(number_a,number_b,number_c,number_d);
}
</script>
<body>
<div>
<form name = "nhap">
<p> nhap a: <input id = "number_a" type="text" placeholder="please input number a "/></p>
<p> nhap b: <input id = "number_b" type="text" placeholder="please input number b "/></p>
<p> nhap c: <input id = "number_c" placeholder="random number c "/><input type="button" value="value_c" onClick="random_c();"/></p>
<p> nhap d: <input id = "number_d" placeholder="random number d "/><input type="button" value="value_d" onClick="random_d();"/></p>
<input type="button" value="Valid Form" onClick="show();">
</form>
</div>
<div id="show">
</div>
</body>
</html>

Built an array but can't figure to the linking code

Okay so I've built this array but I would like it so when they type their post code into the "post code" text box that it reads the array and if their post code is within the array it adds 2 to the amount/ "total" text box.... how would I go about this as I've been stuck for about 2 weeks now....? Any help is appreciated! thank you!
<!DOCTYPE html>
<html>
<body>
<b>Post Code</b><input type="text" myfunction()">
<p>
<b>Total: £ </b><input name="amount" size=8 value="0">
</p>
<p id="demo"></p>
<script>
function myFunction() {
var postcode = ["ZE", "KW","IV","HS","AB","DD","PH","PA","FK","KY","G","BT","IM,"GY","JE","EH","ML","KA"];
var a = postcode.indexOf("CV","LE");
document.getElementById("value").innerHTML = a;
}
</script>
</body>
</html>
There are a few typos in the above code. I have assumed that first two letters of the pincode are mentioned in the array. Following is the code that I have come up with. Hope it helps..
<!DOCTYPE html>
<html>
<body>
<b>Post Code</b><input name="postcode" type="text" onblur="myFunction(this.value);">
<p>
<b>Total: £ </b><input id="amount" name="amount" size=8 value="0">
</p>
<p id="demo"></p>
<script>
function myFunction(pc) {
var postcode_arr = ["ZE", "KW","IV","HS","AB","DD","PH","PA","FK","KY","G","BT","IM","GY","JE","EH","ML","KA"];
var firsttwo = pc.substr(0,2);
firsttwo = firsttwo.toUpperCase();
//alert(firsttwo);
var a = postcode_arr.indexOf(firsttwo);
if(a!= -1) {
var amt = parseFloat(document.getElementById("amount").value);
amt +=2;
document.getElementById("amount").value = amt;
}
document.getElementById("demo").innerHTML = a;
}
</script>
</body>
</html>

Trying to get the result of javascript function using innerHTML

I have a simple program that takes in an input and then should show that input multiplied up to 100. I am new to this, but have tried to get it to work before posting here. I have the link to the program that I am referring to.
I want the result to be shown, but I cannot figure out why it is not showing.
You can see what I have below. I think I do not have the html and javascript hooked up properly.
Here is my html:
<body>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer" />
<input type='submit' id='RunProg' class='button' />
<p> id='result'</p>
</body>
Here is my Javascript:
h = document.getElementByID('NumToBMultiplied');
var result = document.getElementbyID('RunProg').addEventListener('click', function () {
for (i = 0; i < 100; i++)
return i * h;
}
});
document.getElementByID('result').innerHTML = result;
http://jsbin.com/wayejequxu/1/edit?html,js,output
Any help is appreciated!
From how I understand your code, you are wanting to multiply the input 100 times, then output that into a HTML tag. The result in your example is not being added to the result paragraph as it isn't in the loop.
HTML
This is changed only slightly. Notice the onClick="solve()" to the button instead of adding an event listener.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer"/>
<input type="submit" id="RunProg" onClick="solve()" class="button"/>
<p id="result"> </p>
</body>
</html>
Javascript
I've added a line break after each result of the for loop so the result is easier to read. And the output is cleared before a new solve() is run.
var output = document.getElementById("result");
function solve() {
var input = document.getElementById("NumToBMultiplied").value;
output.innerHTML = "";
for(i=0; i < 100; i++) {
output.innerHTML += i * input + "<br/>";
}
}
Result here: http://jsbin.com/foduyofewi/1/
You need to store your result in variable inside a callback and set innerHTML also in callback:
document.getElementById('RunProg').addEventListener("click", function() {
var result = 1;
var input = +h.value;
for (var i = 1; i < 100; i++) {
result *= i * input;
}
document.getElementById("result").innerHTML = result;
});
DEMO
Pure Javascript version:
function multiply(x) {
var result = document.getElementById('result');
result.innerHTML = x.value * 100;
}
<input type="number" id="NumToBMultiplied" class="value" onchange="multiply(this)" placeholder="Enter an integer"/>
<p id="result"></p>
This is the jQuery version:
$(document).ready(function() {
$('#NumToBMultiplied').on('change',function(){
$('#result').text($(this).val()*100);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer"/>
<p id="result"></p>
Just some modification to your code to remove some of the typos and errors. I'm not sure you can return the result like how you have done it, a more traditional approach is shown below.
Full code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer" />
<input type='submit' id='RunProg' class='button' />
<p id='result'> </p>
</body>
<script>
h = document.getElementById('NumToBMultiplied').value;
document.getElementById('RunProg').addEventListener('click', function () {
for (i = 0; i < 100; i++){
var result = h*i;
}
document.getElementById('result').innerHTML = result;
});
</script>
</html>

Categories

Resources