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>
Related
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.
I want to calculate my input box inner looping and this bellow is what if done please help me to solve this issue
<?php
$jumlah_form = 3;
for($i=1; $i<=$jumlah_form; $i++){
?>
<input type="text" id="txt1" onkeyup="sum1();" /></br>
<?php
}
?>
<input type="text" id="txt2" value= "0" /></br>
<script>
function sum1() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtFirstNumberValue) ;
if (!isNaN(result)) {
document.getElementById('txt2').value = result;
}
}
</script>
Three input boxes are created by looping, I want to calculate three input box, and parse the result into result box whenever user input number
I think you are asking how to write the JavaScript so that it will add up the total of all the input boxes, no matter how many are created by the PHP?
If so then a good way would be to give all the textboxes the same class. Then, the JavaScript can just select all boxes with that class, loop through them and get the total value.
Here's a worked example using 3 textboxes (as if the PHP had generated them this way):
var textboxes = document.querySelectorAll(".sum");
textboxes.forEach(function(box) {
box.addEventListener("keyup", sumAll);
});
function sumAll() {
var total = 0;
textboxes.forEach(function(box) {
var val;
if (box.value == "") val = 0;
else val = parseInt(box.value);
total += val;
});
document.getElementById("total").innerText = total;
}
<input type="number" id="txt1" class="sum" value="0" /><br/>
<input type="number" id="txt2" class="sum" value="0" /><br/>
<input type="number" id="txt3" class="sum" value="0" /><br/>
<br/><br/> Total: <span id="total"></span>
To generate html with php:
$count = 5;
for($i=1;$i <= $count;$i++) {
echo "<input type='number' id='"."txt".i."' /></br>"
}
To calculate sum from inputs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<form onsubmit="submitForm(this); return false;" >
<input type="number" id='text1'>
<input type="number" id='text2'>
<input type="number" id='text3'>
<input type="number" id='text4'>
<input type="number" id='text5'>
<button type="submit" >Calculate</button>
</form>
<div>
<p>Result:</p>
<p id='result'></p>
</div>
<script>
function submitForm(form) {
let toReturn = 0;
const inputs = form.getElementsByTagName("input");
for(let x = 0; x < inputs.length; x++ ) {
toReturn += parseInt(inputs[x].value ? inputs[x].value : 0);
}
document.getElementById('result').innerHTML = toReturn;
return false;
}
</script>
</body>
</html>
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>
I'm writing a JS code to calculate a final grade given some individual grades and output the result in the html page but when I trigger the event and function it outputs a wrong answer for a split second then immediately disappears along with the values entered into the text box.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problem 2</title>
<script src="grades.js" type="text/javascript"></script>
</head>
<body>
<h1>Grade Calculator</h1>
<form id ="myForm">
<div id="assignments">
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/>
</div>
<div>
<input type="checkbox" /> Curve +5?
</div>
<div id="resultsarea">
<p>
<!--add buttons here -->
<button id="comp">Compute</button>
<button id="clr">Clear</button>
</p>
<!-- add results here -->
</div>
</form>
</body>
</html>
JS:
window.onload = pageLoad;
function pageLoad()
{
var cbutton = document.getElementById("comp");
cbutton.onclick = compute;
}
function compute()
{
var values = document.getElementsByTagName("input");
var marks = 0;
var total = 0;
for (var i=0; i < values.length; i++)
{
if(values[i].type == "text")
{
if (i%2 == 0)
marks += parseInt(values[i].value);
else
total += parseInt(values[i].value);
}
}
var result = Math.round(marks/total);
document.writeln(result);
}
This is in the head :
<script language="javascript" type="text/javascript"> f
function TextDefine(val) {
var i= 0;
var array1 = val.value.split("\n");
for ( i = 0; i < array1.length; ++i) {
array1[i] = "[b]" + array1[i] + "[/b]";
}
document.getElementById('another').value = array1.join("\n");
}
</script>
Then This is in the body:
<textarea name="data" id="data"></textarea>
<textarea name="another" id="another"></textarea>
<input type="button" name="submit1" value="Submit"
onclick="TextDefine(document.getElementById('data'))" />
i would like to add another text area so that when i click on the generate button, it will also get the content of the text area i just created. example:
text area 1
content of the text area 1
text area i just created
content of the text area 2
then the generated content content in the thrid text area should be:
[b]content of the text area 1[/b]
content of the text area 2
please see the javascript code why it had [b], i do not know how do to it so i need your help :( Thank You!
Is the keyword function being split onto two words something to do with entering it into stackoverflow? The below works for me:
<html>
<head>
<script language="javascript" type="text/javascript"> function TextDefine(val){ var i= 0; var array1 = val.value.split("\n"); for ( i = 0; i < array1.length; ++i) { array1[i] = " [b]" + array1[i] + "[/b]"; } document.getElementById('another').value = array1.join("\n"); }</script>
</head>
<body>
<form>
<textarea name="data" id="data"></textarea>
<textarea name="another" id="another"></textarea>
<input type="button" name="submit1" value="Submit" onclick="TextDefine(document.getElementById('data'))" />
</form>
</body>
</html>
Is this what you want to do?
http://jsbin.com/eligo4/edit
<script language="javascript" type="text/javascript">
function TextDefine(val, anotherval){
var i= 0;
var array1 = val.value.split("\n");
for ( i = 0; i < array1.length; ++i) {
array1[i] = "[b]" + array1[i] + "[/b]";
}
document.getElementById('generate').value = array1.join("\n")+"\n"+ document.getElementById('another').value;
}
</script>
<textarea name="data" id="data"></textarea>
<textarea name="another" id="another"></textarea>
<textarea name="generate" id="generate"></textarea>
<input type="button" name="submit1" value="Submit" onclick="TextDefine(document.getElementById('data'), document.getElementById('another'))" />