Develop Reference

Format currency input field with dollar sign & commas

I have a revenue input field in a javascript/jquery form:
Need a dollar sign :before
add commas as the currency increases
I have a dollar sign showing via css, but issues centering it and ensuring the field entry point is next to it without overlapping. Unsure how to do the commas. Any suggestions or tips are welcome!
HTML:
<form id="rev-calculator">
<label for="price">Monthly Revenue</label>
<div class="fields">
<input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input>
<br>
</form>
CSS:
<style>
.body {
text-align: left;
}
.fields {
margin: 0 10px 0 0;
}
.fields:before {
content: "$";
text-align: center;
position: relative;
left:30px;
}
#price {
border-radius: 5px;
margin: 15px;
padding: 10px;
color: black;
}
</style>
JS:
<script>
$('#rev-calculator').on('click', 'button', function(e) {
e.preventDefault();
var price = $("#price").val();
console.log(price);
})
</script>
codepen: https://codepen.io/kedarPE/pen/JjroYyb
input field

Well here's a way, though in truth not as simple as I hoped when I started down this path. You can use Intl.NumberFormat to get the comma in there (according to locale). To accomodate decimals, I sniff for them in the beginning and append them to the result.
To allow for the comma, I made this a text field with a pattern attribute. Also, I adjusted your CSS to make it a little nicer looking with the $
$('#price').keydown(function(e) {
setTimeout(() => {
let parts = $(this).val().split(".");
let v = parts[0].replace(/\D/g, ""),
dec = parts[1]
let calc_num = Number((dec !== undefined ? v + "." + dec : v));
// use this for numeric calculations
// console.log('number for calculations: ', calc_num);
let n = new Intl.NumberFormat('en-EN').format(v);
n = dec !== undefined ? n + "." + dec : n;
$(this).val(n);
})
})
.body {
text-align: left;
}
.fields {
margin: 0 10px 0 0;
}
.fields:before {
content: "$";
text-align: center;
position: relative;
left: 35px;
}
#price {
border-radius: 5px;
margin: 15px;
padding: 10px 10px 10px 20px;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rev-calculator">
<label for="price">Monthly Revenue</label>
<div class="fields">
<input type="text" pattern="[0-9.,]+" name="price" id="price" required data-type="number" />
<br>
</form>

I'm surprised the unique answer for this issue has a lot of votes because it has a tiny but major flaw: the event shouldn't be keydown, it should be keyup. If you use keydown, it won't read the keys you are pressing at the moment but the previous one. So, please update your answer.

Having issues with passing arguments through function (Javascript)

I'm creating a function using Javascript where the user puts in two integers, and the function will output the smaller of the two integers:
function minimum(num1, num2) {
var num1 = document.getElementById('input1').value;
var num2 = document.getElementById('input2').value;
if(num1 < num2){
document.getElementById('para').innerHTML = num1;
}
else if (num2 < num1){
document.getElementById('para').innerHTML = num2;
}
else {
document.getElementById('para').innerHTML = "There was something weird about your numbers. Please try again.";
}
}
body{
background-color: #A9927D ;
max-width: 900px;
min-width: 600px;
}
h1{
color: #F2F4F3;
text-align: center;
font-size: 45px;
}
h3 {
font-size: 20px;
color: #F2F4F3;
}
.container{
text-align: center;
}
.button-container {
padding: 50px;
}
.bttn{
height: 50px;
border-radius: 40px;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding: 30px;
background-color: #5E503F;
box-shadow: 2px 2px 2px 2px #312A21;
color: #F2F4F3;
}
.bttn:hover {
background-color: #251F18;
}
.bttn:active {
box-shadow: 0 1px 0px #251F18;
}
.npt {
height: 40px;
width: 100px;
}
#para{
text-align: center;
margin: auto;
width: 40%;
height: 100px;
border: 1px solid #6E5E49;
background-color: #9C8568;
font-size: 20px;
color:#F2F4F3;
}
<div class="container">
<h1>Find the Minimum</h1>
<h3>by Solange Wright</h2>
<div class = "button-container">
<input class = "npt" type="number" id = "input1"><br><br>
<input class = "npt" type="number" id = "input2"><br><br><br><br>
<span class = bttn onclick = "minimum(num1, num2)">Find</span>
</div>
<p id="para"></p>
</div>
For some reason, I'm getting an error like this:
How do I define num1? Is it an issue with data types? Does the .value method in Javascript do type coercion, or is there another additional step to make sure the two values are integers?

You need to pass the id of the input.
Replace
<span class="bttn" onclick="minimum(num1, num2)">Find</span>
with
<span class"bttn" onclick="minimum('input1', 'input2')">Find</span>

It's generally not a good idea to use inline event handlers. You can use one handler for the document and use a generic handler (event delegation). Doing so gives you the possibility to use everything you need within the handler function.
Furthermore, the submitted values have to be checked (do both input have values?) and converted to Number (retrieved input values are always strings).
Finally you can use Math to determine the smallest number in an array of numbers.
This brings us to (removed stuff to present a minimum reproducable example):
document.addEventListener("click", getMinimalValue);
// ^ add a click listener method document wide
function getMinimalValue(evt) {
if (evt.target.id === "findSmallest") {
const numbers = [
document.querySelector("#input1").value || NaN,
document.querySelector("#input2").value || NaN
]
// ^ aggregate values into array (assign NaN if no value)
.map(Number)
// ^ convert values to Number (NaN will remain NaN)
.filter(n => !isNaN(n));
// ^ filter numbers only
document.querySelector("#para").textContent =
numbers.length < 2 ?
// ^ if not both entered values are numbers
// [numbers] array length is < 2
"You did not enter two numeric values" :
`Minimum of ${numbers.join(' and ')}: ${Math.min.apply(null, numbers)}`;
}
}
.npt {
width: 50px;
margin-bottom: 5px;
}
<input class="npt" type="number" id="input1">
<input class="npt" type="number" id="input2">
<span id="para"></span>
<br><button id="findSmallest">Find Minimum</button>

Remove the minimum parameters in the JS code (and also check if num1 and num2 are numbers)
function minimum() {
var num1 = document.getElementById('input1').value;
var num2 = document.getElementById('input2').value;
if (Number.isNaN(num1) || Number.isNaN(num2)){
document.getElementById('para').innerHTML = "please insert valid numbers";
return;
}
if(num1 < num2){
document.getElementById('para').innerHTML = num1;
}
else if (num2 < num1){
document.getElementById('para').innerHTML = num2;
}
else {
document.getElementById('para').innerHTML = "There was something weird about your numbers. Please try again.";
}
}
Refactor the button onclick not to pass paramters.
<div class="container">
<h1>Find the Minimum</h1>
<h3>by Solange Wright</h2>
<div class = "button-container">
<input class = "npt" type="number" id = "input1"><br><br>
<input class = "npt" type="number" id = "input2"><br><br><br><br>
<span class = "bttn" onclick = "minimum()">Find</span>
</div>
<p id="para"></p>
</div>

HTML JavaScript would not allow nor consider decimals

I am trying to create a calculator, to evaluate two payment options for an international online purchasing, to give best decision either to proceed with website original currency [which is different than buyer credit card currency] and in this case buyer bank exchange rate will apply, or to proceed with website preset exchange rate to match buyer credit card currency ignoring bank exchange rate.
The idea is that 1 USD equal to 3.75, and it varies sometimes, but few websites are setting their own exchange rate, and in our case sometimes if a customer buys using website exchange rate, it reaches to 1 USD equal to 4.
I am trying to give customers a better idea of which option to proceed with, as well as am adding many fields to consider, to show the best result possible, such as bank processing fees.
I have one issue, I could not make bank processing fees to be a percentage input and considered in the calculation. Thus, I thought the customer can enter the percentage as a value, and I will do the conversion in the code. For example, bank processing fees are 2.75%, I'll let the customer enter a value 2.75 and inside the code, I will have it work by conversion 2.75 / 100. After testing, I can see that code is calculation only an integer number of percentages, either 2 or 3, and so on; it does not consider decimals like in my case 2.75!
Pls, help if possible, to view solutions of the code amendment.
Thank you, and appreciate your insights!
// Do all your JavaScript in a separate JavaScript section
var main = document.getElementById("Dep-main");
var joint1 = document.getElementById("Dep-joint1");
var joint2 = document.getElementById("Dep-joint2");
var joint3 = document.getElementById("Dep-joint3");
var total = document.getElementById("Total-dep");
var inputs = Array.prototype.slice.call(document.querySelectorAll("div > input"));
inputs.forEach(function(input){
input.addEventListener("blur", function(){
// Always supply the second argument to parseInt() (the radix) so you
// dont' get non-base 10 answers.
total.value = (parseInt(main.value, 10) * parseInt(joint1.value, 10)) + (parseInt(joint3.value, 10)) + (parseInt(main.value, 10) * ((parseInt(joint2.value, 10) / 100)));
});
});
label {
display: block;
text-align: center;
line-height: 150%;
font-size: .85em;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
<!DOCTYPE html>
<html>
<body>
<br>
<center><img src="https://logos-download.com/wp-content/uploads/2016/03/Asos_logo.png" width="270" height="108"></center>
<br>
<center><h3>Best Payment Option Evaluator</h3></center>
<br>
<div class="center">
<label for="dep-nothing">Enter ASOS total amount in SAR [using ASOS Site Exchange Rate]</label>
<input type="text" id="dep-nothing" value="0">
<hr>
<label for="dep-main">Ebter total amount in USD</label>
<input type="text" id="Dep-main" value="0">
<label for="dep-joint1">Enter todays exchange rate from your bank [1 USD = X SAR]</label>
<input type="text" id="Dep-joint1" value="0">
<label for="dep-joint2">Enter bank fees in numbers [will be converted into percentage]</label>
<input type="text" id="Dep-joint2" value="0">
<label for="dep-joint3">Enter buyer commission value in SAR</label>
<input type="text" id="Dep-joint3" value="0">
<label for="total-dep"><b>If you proceed with USD, below amount will be deducted from your bank accoutn in SAR , <mark>Approx.</mark></b></label>
<input type="text" id="Total-dep" disabled readonly>
</div>
<br>
</body>
</html>

You are using parseInt() (which converts the result to whole numbers), try using parseFloat() instead.

replace parseInt by parseFloat, you can use .toFixed with parse float to limit deci

For decimal number you have to use .parseFloat() function, not .pareseInt()
// Do all your JavaScript in a separate JavaScript section
var main = document.getElementById("Dep-main");
var joint1 = document.getElementById("Dep-joint1");
var joint2 = document.getElementById("Dep-joint2");
var joint3 = document.getElementById("Dep-joint3");
var total = document.getElementById("Total-dep");
var inputs = Array.prototype.slice.call(document.querySelectorAll("div > input"));
inputs.forEach(function(input){
input.addEventListener("blur", function(){
// Always supply the second argument to parseInt() (the radix) so you
// dont' get non-base 10 answers.
total.value = (parseFloat(main.value) * parseFloat(joint1.value)) + (parseFloat(joint3.value)) + (parseFloat(main.value) * ((parseFloat(joint2.value) / 100)));
});
});
label {
display: block;
text-align: center;
line-height: 150%;
font-size: .85em;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
<!DOCTYPE html>
<html>
<body>
<br>
<center><img src="https://logos-download.com/wp-content/uploads/2016/03/Asos_logo.png" width="270" height="108"></center>
<br>
<center><h3>Best Payment Option Evaluator</h3></center>
<br>
<div class="center">
<label for="dep-nothing">Enter ASOS total amount in SAR [using ASOS Site Exchange Rate]</label>
<input type="text" id="dep-nothing" value="0">
<hr>
<label for="dep-main">Ebter total amount in USD</label>
<input type="text" id="Dep-main" value="0">
<label for="dep-joint1">Enter todays exchange rate from your bank [1 USD = X SAR]</label>
<input type="text" id="Dep-joint1" value="0">
<label for="dep-joint2">Enter bank fees in numbers [will be converted into percentage]</label>
<input type="text" id="Dep-joint2" value="0">
<label for="dep-joint3">Enter buyer commission value in SAR</label>
<input type="text" id="Dep-joint3" value="0">
<label for="total-dep"><b>If you proceed with USD, below amount will be deducted from your bank accoutn in SAR , <mark>Approx.</mark></b></label>
<input type="text" id="Total-dep" disabled readonly>
</div>
<br>
</body>
</html>

The parseInt() function is the course of the problem. Whenever this function is used, it converts the value passed to it to an integer by truncation the decimal value. For example parseInt("2.7")= 2.
You can use the following instead.
total.value = (parseInt(main.value, 10) * parseInt(joint1.value, 10)) + (parseInt(joint3.value, 10)) + (parseInt(main.value, 10) * ((parseFloat(joint2.value, 10) / 100)));

Changing CSS style of a class with Javascript

I'm new to javascript and I'm coding a temperiture converter. The program is basically done except im trying to make it so that the color of the text changes depending on the value of the temperiture. Eg: its 3 Degrees celcius so the text is blue to show that it's cold.
I added a class called temperiture to all of the I want the colour to change on. I've tried document.getElementByClassName aswell as document.QuerySelector.
The class 'temperature' has not been touched in the CSS file
This error is shown twice for the same line:
//Creating the funtion to convert celcius
function celciusConverter() {
const cTemp = parseFloat(celciusInput.value);
//Working out celcius to farenheight
const fTemp = (cTemp * (9/5) + 32);
//Working out celcius to kelvin
const kTemp = (cTemp + 273.15);
//Displaying the temperiture in all formats
farenheightInput.value = fTemp;
kelvinInput.value = kTemp;
if (cTemp < 15){
document.getElementsByClassName('#temperature')[0].style.color='black';
}
}
//Refreshing the screen when a number is put in
celciusInput.addEventListener('input', celciusConverter);
#import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: black;
}
div{
height: 33.333vh;
}
#Farenheight{
border-top: 5px;
border-bottom: 5px;
}
input[type=number]{
outline: none;
width: 100%;
height 100%;
background: black;
color: white;
font-size: 6em;
text-align: centre;
border: 0;
font-family: Oswald, sans-serif;
}
<body>
<div id="celcius" class"temperature">
<input type="number" placeholder="Celcius. . .">
</div>
<div id="farenheight" class"temperature">
<input type="number" placeholder="Farenheight. . .">
</div>
<div id="kelvin" class"temperature">
<input type="number" placeholder="Kelvin. . .">
</div>
</body>
Uncaught TypeError: Cannot read property 'style' of undefined
at HTMLInputElement.celciusConverter

The reason why the color change was not working is because your temperature class was on the divs wrapping the inputs, and form items (inputs/textarea/etc) don't inherit font information from their parent by default. Using querySelectorAll, you can use the input[type=number] selector, just like you did in your css.
const celciusInput = document.querySelector("#celcius > input");
const farenheightInput = document.querySelector("#farenheight > input");
const kelvinInput = document.querySelector("#kelvin > input");
//Creating the funtion to convert celcius
function celciusConverter() {
const cTemp = parseFloat(celciusInput.value);
//Working out celcius to farenheight
const fTemp = (cTemp * (9/5) + 32);
//Working out celcius to kelvin
const kTemp = (cTemp + 273.15);
//Displaying the temperiture in all formats
farenheightInput.value = fTemp;
kelvinInput.value = kTemp;
document.querySelectorAll('input[type=number]').forEach(function (node) {
if (cTemp < 15) {
node.style.color = 'blue';
} else {
node.style.color = 'red';
}
})
}
//Refreshing the screen when a number is put in
celciusInput.addEventListener('input', celciusConverter);
#import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: black;
}
div{
height: 33.333vh;
}
#Farenheight{
border-top: 5px;
border-bottom: 5px;
}
input[type=number]{
outline: none;
width: 100%;
height 100%;
background: black;
color: white;
font-size: 6em;
text-align: centre;
border: 0;
font-family: Oswald, sans-serif;
}
<body>
<div id="celcius" class"temperature">
<input type="number" placeholder="Celcius. . .">
</div>
<div id="farenheight" class"temperature">
<input type="number" placeholder="Farenheight. . .">
</div>
<div id="kelvin" class"temperature">
<input type="number" placeholder="Kelvin. . .">
</div>
</body>

The selector is incorrect. Don't put the # in front of the class name. getElementsByClassName just expects a string identical to the class name.
if (cTemp < 15){
document.getElementsByClassName('temperature')[0].style.color='black';
}
even better, I like to use querySelectorAll instead, which expects css like selectors.
I also assume you want to update the style of all of the .temperature elements. You can iterate over all of them instead of only updating the first one.
document.querySelectorAll('.temperature').forEach(function (node) {
if (cTemp < 15) {
node.style.color = 'blue';
} else {
node.style.color = 'red';
}
})

How to count the occurrence of a character in a string

The following code create a web page form. It asks a user to enter a character in an input box, then a sentence in an another box. Then the user should be able to click in a button to count the number of times the character appeared in the sentence entered in the second input box. The sentence should include only letters . The problem I am having is that I am having an error message saying that I entered non alphabets in the box, although i enter only characters!
Any idea why this is happening please !
Here is my HTML / javascript code:
//<![DATA[
'use strict';
function updateForm(id) {
var letter = "";
var sentence = "";
var occurencies = 0;
var form = document.getElementById(id);
letter = form.box1.value;
sentence = form.box2.value;
for (var i = 0; i < sentence.length; i++)
if (sentence.charAt(i) == letter)
occurencies++;
form.box3.value = occurencies;
}
function isAlphabet(elem, helperMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (elem.value.match(alphaExp)) {
return true;
} else {
alert(helperMsg);
elem.focus();
return false;
}
} //-->
body {
background-color: lightblue;
}
form {
width: 500px;
margin: 0 auto;
}
h4 {
font-family: sans-serif;
font-size: xx-large;
text-align: center;
}
h1,
h2,
h3 {
font-family: sans-serif;
font-style: italic;
font-size: large;
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
font-style: italic;
}
input[type="button"] {
background: #B9DFFF;
color: #fff;
border: 10px solid #eee;
border-radius: 30px;
box-shadow: 10px 10px 10px #eee;
position: absolute;
left: auto;
}
input[type="button"]:hover {
background: #016ABC;
color: #fff;
border: 5px solid #eee;
border-radius: 30px;
box-shadow: 10px 10px 10px #eee;
}
<form action="#" id="boxes">
Box 1:
<input type="text" name="box1" value="" placeholder="Enter a single
letter" maxlength="1" />
<li class="rq">Only alphabet letters are allowed.</li>
<br />Box 2:
<input type="text" name="box2" value="" placeholder="Enter a sentence" />
<br />Result:
<input type="text" id="letters" name="box3" readonly />
<br />
<input type="button" name="update" value="Update" onclick="isAlphabet(document.getElementById('letters'), 'Only Letters are allowed')" />
</form>

You are checking the wrong form field:
onclick="isAlphabet(document.getElementById('letters')...
As I understand you want to check box1 not 'box3/letters'...
Add id='box1' to that input element and then check like this:
onclick="isAlphabet(document.getElementById('box1')...

You code seems to be fine, just try and trim the element value before you match the same
if (elem.value.trim().match(alphaExp)) {
return true;
}
ensure that you are passing right value to this isAlphabet function
<input type="button" name="update" value="Update" onclick="isAlphabet(document.getElementById('box1'), 'Only Letters are allowed')" />
to count the number of occurences
letter = form.box1.value;
sentence = form.box2.value;
var occurences = sentence.split( letter ).length - 1;

Only the isAlphabet function is called in this code. And it checks an empty field. Your onclick attribute is addressed to that element.
onclick="isAlphabet(document.getElementById('letters'), 'Only Letters are allowed')"
It is holding an empty string when the isAlphabet function is called. An empty string is non-alphanumeric so it returns false.
As robert mentions, you need to include a reference to box1 or box2 in your call to isAlphabet as this is it's input. That is if you need to call it at all.
Also, I can't see a call to you main updateForm function anywhere. Unless this is not the full code, you need to include that. For example, you could do...
<input type="button" name="update" value="Update" onclick="isAlphabet(getElementById('box1, box2'))" />
with those parameters passed to the function.
Because they are passed to the function you don't need to declare them, they are right there for you to use.
You can also just include the validation within this function. To alert if it's non alphabetic.
function updateForm(letter, sentence) {
var occurences = 0;
var form = document.getElementById(id);
for (var i = 0; i < sentence.length; i++) {
if (sentence.charAt(i) == letter) {
occurences++;
}
}
if(letter.match(alphaExp) && sentence.match(alphaExp)) {
..do the thing..
} else {
alert('Only Letters are allowed');
}
}