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.
Related
How do I change this code so that when I select an input it adds the text from array based on input id. I have tried to do it myself, but in for loop "i" is always equal to 2, but I want it to be 0, 1 based on which input I select. Please help, I have spent multiple hours with no success.
let basetext = [];
let text1 = document.getElementById("text")
text1.innerHTML = basetext
const thank = [`hi`,
`bye`]
for (i=0; i<thank.length; i++) {
document.getElementById("thank"+i).addEventListener("click", function () {
basetext[i] = thank[i]
text1.innerHTML = basetext.join('')
})
}
<!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>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<textarea id="text"></textarea>
<div class="buttons">
<div>
<div>
<input type="radio" name="thank" id="thank0" />
<label for="thank0">first</label>
<input type="radio" name="thank" id="thank1" />
<label for="thank1">second</label>
</div>
<button>Next</button>
</div>
</div>
</body>
<script src="index.js"></script>
</html>
Add a data attribute to each input.
Add a class to a containing element, and then use event delegation to catch events from the child input elements when they're fired. In the handler check to see if the child element that fired the event is a radio input, and then use the data attribute to grab the element from the thank array, and update the textarea content with it.
// Cache the elements
const text = document.querySelector('#text');
const group = document.querySelector('.inputGroup');
// Add one listener to the input group element
group.addEventListener('change', handleChange);
const thank = [`hi`, `bye`];
// Check that clicked input is a radio button,
// grab the id from its dataset, and then use
// that id to add the element from the array to
// the content of the text area
function handleChange(e) {
if (e.target.matches('[type="radio"]')) {
const { id } = e.target.dataset;
text.defaultValue = thank[id];
}
}
<textarea id="text"></textarea>
<div class="buttons">
<div>
<div class="inputGroup">
<label for="0">first
<input
type="radio"
name="thank"
data-id="0"
id="thank0"
/>
</label>
<label for="thank1">second
<input
type="radio"
name="thank"
data-id="1"
id="thank1"
/>
</label>
</div>
<button>Next</button>
</div>
</div>
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 want to make my local static html website password protected with some js, so that when i open my local html file in my pc, it comes with a form to fill up my user id and my own password, which i have saved and when i hit enter that should open my index.html file only when password is correct.
currently my code is
<!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>
<Form>
<!-- user-id -->
<input type="text">
<!-- user-password -->
<input type="password">
<button onclick="window.open('./index.html')"> Enter
</button>
</Form>
<script>
// pls-help-me-idk-how-to-code-js
</script>
</body>
</html> ``
Its not a proper way to do it. You need a backend for that inorder to properly execute that. But if it just to play around you can have an alert box and just compare their value : if right it displays.
First, you have to add an id or a class to that inputs in order to select them within the script section. Afterward, you can select them and add any value you want.
Such as:
<form>
<!-- user-id -->
<input id="user" type="text" />
<!-- user-password -->
<input id="pass" type="password" />
<button onclick="window.open('./index.html')">Enter</button>
</form>
<script>
document.getElementById("user").value = "UsernameOrId";
document.getElementById("pass").value = "SomePassword";
</script>
In order to compare, you should get the right password from somewhere like a database or some service, but since this is purely for learning purposes you can hardcode it in the script for checking. So, the final solution can be similar to this:
<body>
<form>
<!-- user-id -->
<input id="user" type="text" />
<!-- user-password -->
<input id="pass" type="password" />
<button id="btn">Enter</button>
</form>
<script>
const myPass = "SomePassword";
document.getElementById("user").value = "UsernameOrId"; // predefining the value simulating is saved and by default filled up
document.getElementById("pass").value = myPass; // predefining the value simulating is saved and by default filled up
const btn = document.getElementById("btn"); // getting the button to control its behavior on click event
btn.addEventListener("click", function () {
const passWhenClickingTheBtn = document.getElementById("pass").value;
if (myPass === passWhenClickingTheBtn) { // checking the value entered for pass
window.open("./index.html");
}
});
</script>
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>
In this code i try to get the difference between two date and time
ex(09/05/2014 09:10:00 - 09/05/2014 11:18:00 ) it should return 78 minutes with a single function for multiple textboxes but unfortunately this piece of code is not working can some one suggest me the correct code or is there is any alternative way to perform this function , thanks in advance.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="JS/datejquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("id^='endTime'".change(function(){
var index = $(this).attr('id').replace('endTime','');
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});
} );
</script>
</head>
<body>
<form name="wrs">
<input type="text" name="time1" id= "startTime1" class="num-box type1" />
<input type="text" name="time2" id = "endTime1" class="num-box type2" />
<input type="text" name="result1" class="num-box type5" />
<input type="text" name="startTime2" id= "time3" class="num-box type3" />
<input type="text" name="endTime2" id = "time4" class="num-box type4" />
<input type="text" name="result2" class="num-box type6" />
</form>
</body>
</html>
You missed the brackets.
$("[id^='endTime']").change(function(){
var index = $(this).attr('id').slice(7);
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});