From input i enter numbers in the input text, then i have 5 buttons that have functions on them i tried to make the first button to minus the number by 1 but i don't know when i click the number get -1 but it doesn't show changes to the input box. How can i fix this i mean don't know how to do it because i tried using number.innerHTML = number-=1 but it doesn't work ? Here is my html and javascript code:
var number = document.getElementById("number");
number = number.value;
function minus() {
number.value = number -= 1;
console.log(number);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="number" id="output">
<input type="button" value="<" onclick="minus();">
<input type="button" value=">" onclick="plus();">
<input type="button" value="FLIP" onclick="flip();">
<input type="button" value="STORE" onclick="store();">
<input type="button" value="CHECK" onclick="check();">
</div>
</body>
</html>
Ok let's think logically here
var number = document.getElementById("number");
number = number.value;
function minus() {
number.value = number -= 1;
console.log(number);
}
first you're assigning the HTML ELEMENT itself to the var "number", then you're changing the value of the "number" var to the value of the HTML element, so then number.value = number - 1 is trying to set the property of "value" of a number object, which doesn't make sense, because it's not connected to the HTML element anymore
Just make two variables it should be fine, like
var number = document.getElementById("number");
var numberValue = number.value;
function minus() {
numberValue = number.value;
number.value = numberValue -= 1;
console.log(number,numberValue);
}
or alternatively, you only need one variable total, and you don't need to reassign it to "number.value", but the only thing is that this way there's no guarantee that number.value is a number at all, but when you set it to a variable first, like above, you can check if(!isNaN) or something similar, but still, if we want to assume only numbers will ever be entered, we can do something like
var number = document.getElementById("number");
function minus() {
number.value = number.value -= 1;
console.log(number,number.value);
}
Try this instead.
var number = document.getElementById("number");
function minus() {
number.value = number.value -= 1;
console.log(number);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="number" id="output">
<input type="button" value="<" onclick="minus();">
<input type="button" value=">" onclick="plus();">
<input type="button" value="FLIP" onclick="flip();">
<input type="button" value="STORE" onclick="store();">
<input type="button" value="CHECK" onclick="check();">
</div>
</body>
</html>
Related
As below you can see I want perform calculation of adding and subtracting but the program not giving output of calculation. there is input box for operator 1 and operator 2. I create two function add and sub. And using document.getElementById I pass the value of a and b and want to calculate but the function is does not giving output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Operator1:<input type="text" id="a">
<br><br>
Operator2:<input type="text" id="b">
<br><br>
<input type="button" value="Add" id="add" onclick="addd()">
<input type="button" value="sub" id="sub" onclick="subb()">
<br><br>
Result: <input type="text" id="res">
<script>
function addd(){
var ra= document.getElementById('a').value;
var rb=document.getElementById('b').value;
var rab=ra+rb;
Document.getElementById('res').value==rab;
}
function subb(){
var ra= document.getElementById('a').value;
var rb=document.getElementById('b').value;
var rab=ra-rb;
document.getElementById('res').value==rab;
}
</script>
</body>
</html>
You want to make sure you're using the assignment operator, instead of the comparison operator.
Try document.getElementById('res').value = rab; instead.
I'll provide an example that you'll hopefully learn from, but I really recommend you go and learn the basics before you continue programming.
<!DOCTYPE html>
<html>
<head>
<style>input[type=number], button { display:inline-block; margin-bottom: 4px; }</style>
</head>
<body>
<input type="number" id="input-a">
<input type="number" id="input-b"><br>
<button type="button" id="add">Add</button>
<button type="button" id="subtract">Subtract</button><br>
<input type="number" id="result" disabled>
<script>
const resultElement = document.querySelector("#result");
const inputAElement = document.querySelector("#input-a");
const inputBElement = document.querySelector("#input-b");
document.querySelector("#add").addEventListener("click", event => {
resultElement.value = +inputAElement.value + +inputBElement.value;
});
document.querySelector("#subtract").addEventListener("click", event => {
resultElement.value = +inputAElement.value - +inputBElement.value;
});
</script>
</body>
</html>
The only thing that's not self-explanatory here is the actual calculation. Notice how I put a + at the start of each value +inputAElement.value? That's to cast the value to a number for the calculation. Otherwise in certain situations, the value could be treated as a text value and just mashed together (e.g. 5 + 1 = 51).
Use CSS styles to change the look, as shown in the style tag. Abusing won't make you any friends.
<!DOCTYPE html>
<html>
<head>
<style>input[type=number], button { display:inline-block; margin-bottom: 4px; }</style>
</head>
<body>
<input type="number" id="input-a">
<input type="number" id="input-b"><br>
<button type="button" id="add">Add</button>
<button type="button" id="subtract">Subtract</button><br>
<input type="number" id="result" disabled>
<script>
const resultElement = document.querySelector("#result");
const inputAElement = document.querySelector("#input-a");
const inputBElement = document.querySelector("#input-b");
document.querySelector("#add").addEventListener("click", event => {
resultElement.value = +inputAElement.value + +inputBElement.value;
});
document.querySelector("#subtract").addEventListener("click", event => {
resultElement.value = +inputAElement.value - +inputBElement.value;
});
</script>
</body>
</html>
I have a Currency Converter , consisting of two fields and a button. In the first field I type the amount I want to be converted, in the second field I get the result of the conversion.
The question is:
When I type text in the first field, how can I clean up the text from the second field with the conversion result? Using a Javascript / Jquery function?
Thanks in advance.
This is my code:
function convertiLireInEuro() {
var importoInserito = $('#txtLireEuro').val();
importoInserito = importoInserito.replace(/,/g, '.');
var lire = parseFloat(importoInserito)
var euro = lire * 1000 / 1936.27
euro = euro.toFixed(2);
euro = Math.round(euro);
$('#txtConversione').val(euro); }
HTML:
<input type="text" id="txtLireEuro" name="txtLireEuro" style="text-align:right" onkeypress="return onlyNumbers(event);" /> 000 ₤
<input value="Converti in Euro" type="button" id="btnLireEuro" name="btnLireEuro" style="margin-left: 20px" onclick="convertiLireInEuro();highlightAndCopyText();"/>
<input type="text" id="txtConversione" name="txtConversione" style="text-align:right;margin-left:20px" readonly /> €
<span class="Label" style="margin-left:12px">(importo già arrotondato all’intero e incollabile nel campo desiderato)</span>
Here is what you need, I post a coding snippet. I have 2 fields, typing-field and field-to-reset. If you first fill in the field-to-reset with some text and then start typing in typing-field the field-to-reset will reset.
let typing = document.getElementById("typing-field");
let reset = document.getElementById("field-to-reset");
typing.addEventListener("keydown", () => {
reset.value = "";
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Typing field:</div>
<input id="typing-field" type="text">
<div>Field to reset:</div>
<input id="field-to-reset" type="text">
</body>
</html>
HTML Code
<body>
<input type="text" id="input_box">
<input type="text" id="result_box">
</body>
JQuery Code
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#input_box").keydown(function(){
$("#result_box").val("");
})
});
</script>
<body>
<input type="text" id="input_box">
<input type="text" id="result_box">
</body>
When "Input_box" is getting focus on click the result_box will clear
it's value.
You already have an onkeypress event listener named onlyNumbers. You can simply put $('#txtConversione').val = ""; in that function.
I'm working on a small project about the Collatz conjecture.
In this project i want to apply the formula " times 3 plus one" when the number is odd and devide a number when its even.
i want to keep looping this until the number is 1 and show not only how many steps it took but also display all the numbers it goes through.
i've gotten quite far i think but i have trouble displaying all the steps the loop goes through.
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collatz Conjecture</title>
<script>
function findOddEven() {
var num = document.getElementById('num').value;
let i = 0;
while (num != 1) {
if (num % 2 == 0) {
num = num / 2; /*even*/
} else {
num = (num * 3) + 1; /*odd*/
console.log(num) }
i++
document.getElementById('result').innerHTML = "Result is " + num + " found in " + i + " runs";
}
}
</script>
</head>
<body>
<form method="post">
<small>Number:</small><input type="text" id="num" name="num" min="0" /><input type="button" value="submit"
onclick="findOddEven()" name="find" />
<div style="margin-top: 10px;" id="result"></div>
</form>
</body>
</html>
You can store the numbers in the array and display them at the end. You can also move the .innerHTML out of the loop since this only needs to be done when the loop is finished.
I've used join to turn the array into a comma seperated string.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Collatz Conjecture</title>
<script>
function findOddEven() {
var num = document.getElementById('num').value;
let steps = [num]; // Store starting number
let i = 0;
while (num != 1) {
if (num % 2 == 0) {
num = num / 2; /*even*/
} else {
num = num * 3 + 1; /*odd*/
}
steps.push(num); // Add changed number to the array
i++;
}
document.getElementById('result').innerHTML =
'Result is ' + num + ' found in ' + i + ' runs. Steps taken: ' + steps.join(', ');
}
</script>
</head>
<body>
<form method="post">
<small>Number:</small
><input type="text" id="num" name="num" min="0" /><input
type="button"
value="submit"
onclick="findOddEven()"
name="find"
/>
<div style="margin-top: 10px" id="result"></div>
</form>
</body>
</html>
Is your problem not seeing all numbers? If so, your console.log is inside the else statement. To see all numbers you shall move it outside the if else statement.
Create an html page, add 3 text boxes in which the user will input 3 numbers :a,b,c
Add a button that, on click, will calculate the maximum number of the three. The result will be displayed in an alert. The program should not crash if the user does not input one or two numbers.
Cases:
If no number is introduced then a message should be displayed asking the user to input at least on number.
If only one number of the three is introduced, that number is the maximum number.
If two numbers are introduced then it should be displayed the maximum of the two.
If three numbers are introduced then it should be displayed the maximum of the three.
I started like this:
function displaysubmit() {
var numarA = document.getElementById("numarA").value;
var numarB = document.getElementById("numarB").value;
var numarC = document.getElementById("numarC").value;
var numarAAsNumber = parseInt(numarA);
var numarBAsNumber = parseInt(numarB);
var numarCAsNumber = parseInt(numarC);
if (!isNaN(numarAAsNumber) && !isNaN(numarBAsNumber) && !isNaN(numarCAsNumber)) {
var Submit = Math.max(numarA, numarB, numarC);
alert(Submit);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercitiul2</title>
<script src="exercitiul2.js" type="text/javascript"></script>
</head>
<body>
<label>a</label>
<input type="text" id="numarA" />
<label>b</label>
<input type="text" id="numarB" />
<label>c</label>
<input type="text" id="numarC" />
<button id="submit">Submit</button>
</body>
</html>
I don't know how start to write in script. Please help me.
You did good just missing some basics;
1 - Wrap your inputs and submit button in form
2 - Add on-click function to button
3 - Pass event into function
4 - prevent form from submitting/reloading using that event
5 - You do not need to add parse int, you can make your inputs type="number" instead
6 - in if statement check if all 3 fields are empty then display message, if not calculate the submit
Example:
function displaysubmit(event) {
event.preventDefault();
var numarA = document.getElementById("numarA").value;
var numarB = document.getElementById("numarB").value;
var numarC = document.getElementById("numarC").value;
if (numarA === "" && numarB === "" && numarC === "") {
alert("Enter at least one number");
} else {
var Submit = Math.max(numarA, numarB, numarC);
alert(Submit);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercitiul2</title>
<script src="exercitiul2.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>a</label>
<input type="number" id="numarA" />
<label>b</label>
<input type="number" id="numarB" />
<label>c</label>
<input type="number" id="numarC" />
<button id="submit" onclick="displaysubmit(event)">Submit</button>
</form>
</body>
</html>
Hint:
Select the elements by
document.getElementById("numarA").innerHTML
When left blank, it'll be "", and if you put it in any if statement it will return false e.g.
if (document.getElementById("numarA").innerHTML) {
someFunction();
}
won't do anything.
Did you add the button click event?
do
<button id="submit" onclick="displaysubmit()">Submit</button>
This is my code. When I click the calculate button it is displaying just the number 35. WHere have I gone wrong and how can I fix it?
<!doctype html>
<html>
<head>
<title>JS Practise 2</title>
</head>
<body>
<h1> Problem 1.1 </h1>
<script language="javascript">
var topsoil_amount = 1;
function calculate() {
var topsoil_amount = document.getElementById(Input);
var topsoil_cost = 15;
var cost = (topsoil_amount * topsoil_cost) + 35;
alert(cost);
}
</script>
<br>
<input type="text" name="Input" size="16" id="Input">
<input type="button" value="Calculate" onClick="calculate()">
</body>
</html>
topsoil_amount is a DOM element, not a number. You need to reference the value. Secons issue is you need quotes around the id.
var topsoil_amount = document.getElementById("Input").value;