i have a small javascript form
<div id="calculator-text"><h2>Tape calculator - based on cable size 1 mm to 28 mm, with 15% overlap</h2></div>
<form name="form1" method="post" action="">
<div id="calcformlabel"><label for="val2">Enter your cable size</label> (in mm)</div>
<div id="calcformtext1"><input type="text" name="val2" id="val2"></div>
<div id="calcformbutton"><input type="button" name="calculate" id="calculate" value="Calculate"></div>
<div id="calcformresult">The tape size you require is:- <span id="result1" class="maintext1"></span> (mm)</div>
</form>
<script type="text/javascript">
var btn = document.getElementById('calculate');
btn.onclick = function() {
// get the input values
var val2 = parseInt(document.getElementById('val2').value);
// get the elements to hold the results
var result1 = document.getElementById('result1');
// create an empty array to hold error messages
var msg = [];
// check each input value, and add an error message
// to the array if it's not a number
if (isNaN(val2)) {
msg.push('<span class="maintext1">Enter your cable size</span>');
}
// if the array contains any values, display the error message(s)
// as a comma-separated string in the first <span> element
if (msg.length > 0) {
result1.innerHTML = msg.join(', ');
} else {
// otherwise display the results in the <span> elements
result1.innerHTML = val2 * 3.142 * 1.15;
}
};
</script>
basically this is a simple calculation
a) how can i get this to output to 2 decimal places (and obviously round up or down depending on -.5 = round down and +.5 = round up)
b) replace the input type button for an image ( i have tried the obvious code and >input type = image>, basically these do actually work but instead of displaying the actual result, they display the result in a split second then reload the page with the blank form again...
any help on this would be much appreaciated
thanks in advance
for a part of your question
you can round javascript to specific precision by
Link :Number rounding in JavaScript
var original=28.453
1) //round "original" to two decimals
var result=Math.round(original*100)/100 //returns 28.45
2) // round "original" to 1 decimal
var result=Math.round(original*10)/10 //returns 28.5
3) //round 8.111111 to 3 decimals
var result=Math.round(8.111111*1000)/1000 //returns 8.111
The .toFixed() method lets you round off to n decimal places, so:
result1.innerHTML = (val2 * 3.142 * 1.15).toFixed(2);
I think the problem you're having with the image is that <input type="image"> defines the image as a submit button. Perhaps just include a standard image with an <img> tag rather than <input type="image">. If you give it an id='calculate' it should still work with your existing JS.
Or you could use a button element containing an img element so that you can specify the type (as not being submit):
<button type="button" id="calculate"><img src="yourimage"></button>
(I'm not sure that you need a form at all for this functionality since you don't seem to want to submit anything back to the server.)
To swap the button for an image, replace the button <input> with this code:
<img src="http://www.raiseakitten.com/wp-content/uploads/2012/03/kitten.jpg" name="calculate" id="calculate" value="Calculate" onclick="document.forms['form1'].submit();" />
It adds the image and a submit function for your form.
To round to two decimal places, use this function:
function twoDP(x){
return Math.round(x*100)/100
}
use it like this:
twoDP(100/3) //returns 33.33
it might also be relevant for you to use Math.PI
var result = val2 * Math.PI * 1.15 ;
Related
I use a math logic calculation plugin to calculate and seek the max result amount. After I input a value into the fields for calculation, the two divs below turn the total results, for example, 10 & 11.
<div id="value1">10</div>
<div id="value2">11</div>
If there's no input value for calculation, the two divs will display zero. What I want to do is I want to have the third div to display the max value from the two divs above. Is it possible to do with JavaScript or any other languages? Could you please suggest how to achieve that? I have searched on the internet but not found any information. It seems uncommon to find on the net.
Something like this ?
const value1 = parseInt(document.getElementById("value1").innerText, 10);
const value2 = parseInt(document.getElementById("value2").innerText, 10);
document.getElementById("value3").innerHTML = Math.max(value1, value2);
<div id="value1">10</div>
<div id="value2">11</div
<div>Value 3 : <span id="value3"></span></div>
And if you want a more generic code that work with N values :
const values = [].map.call(document.querySelectorAll('.value'), function(div) {
return parseInt(div.innerText);
});
document.getElementById('result').innerHTML = Math.max(...values);
<div id="value1" class="value">10</div>
<div id="value2" class="value">30</div>
<div id="value3" class="value">20</div>
Result: <div id="result"></div>
I managed to grab all calculated values on group of div and set the total, but they want to only show the lookup value to be showed. currently I showing the calculation on SPAN.
The var "multiplier"
I try to get all input values and set them using below code.
function getInputs(selector) {
var inputs = 0;
$(selector).each(function() {
$(this).find("input").each(function() {
sum += parseInt($(this).html());
$('#').val(parseInt($(this).html()));
var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text();
// $('#GrandTotal').val(sum); // give the final sum from Log
});
});
return sum;
}
On the below codepen: https://codepen.io/dunya/pen/mojKNz
I am writing the final sum without any issues.
I would like to show the variable multiplier only.
I need hide the value=10 from user but show the variable multiplier.
My formula is like this:
the lookup value based on Product Origin, Geographical and Volume get the multiplier(as Var) I am getting that value:
sum for single input =multiplier * input value(example for apple it is 10)
I just need to overwrite the input value with multiplier(as Var) for all 10 input fields, I tried using function still not get to far,
any suggestion or how to do it.
thanks.
<div>
<label class="description" for="Apple">Apple</label>
<input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/>
</div>
As you can see on above codepen link, I have ten ID's such as Apple,Apricot .. so on, I make it read only. each has default value for Apple it is 10 and Apricot is 20 it is changing value, I also make it read only to proven end user to change it. my requirement change changed I will need show the value multiplier variable there instead of the attribute value such 10 or 20 so on, problem is I am using value attribute to make the calculation work otherwise my final Grand Total calculation will be wrong. How can I resolve this.
for example I selected Product Origin: Europe, Location: blank and Volume= 10, this 3 drop down gets me the look up table id called "Europe". the Volume will match to the columns to calculate for apple it will 0.1 * 10 (default value for id=Apple is 10) so it gets me 1 so on, Grand Total is Sums all calculated results on SPAN to give final value.
How can still use or store the default value for each input such as 10 so on but replace with multiplier(as Var) such the 10 input will display Apple 0.1, Apricot 0, ... and Coconut 0.1, also remember the default value?
the mock-up shows on image below:
Many thanks
I'm using this answer to check if I got your question right so it will likely not be final!
Setting the Value of an input
If your problem is actually changing the input here are some simple examples:
// ****
// ** WITH JAVASCRIPT ** //
// ****
// Get DOM Elements
const js_input_foo = document.getElementById('js_input_foo');
const js_btn_change = document.getElementById('js_btn_change');
// Add event listener
js_btn_change.addEventListener('click', () => {
js_input_foo.value = 'New Value';
});
// ****
// ** WITH JQuery ** //
// ****
// Get DOM Elements
const jq_input_foo = $('#jq_input_foo');
const jq_btn_change = $('#jq_btn_change');
// Add event listener
jq_btn_change.click(() => {
jq_input_foo.val('New Value');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
** WITH JAVASCRIPT **
-->
<h2>JavaScript</h2>
<!-- Input which displays a value -->
<input id="js_input_foo" type="text" value="100" />
<!-- Button which changes the input -->
<button id="js_btn_change">Change!</button>
<!--
** WITH JAVASCRIPT **
-->
<h2>JQuery</h2>
<!-- Input which displays a value -->
<input id="jq_input_foo" type="text" value="100" />
<!-- Button which changes the input -->
<button id="jq_btn_change">Change!</button>
Setting the value of an input according to dataset
If you want to set your inputs with looping through them this could help:
// Constants
const dataset = {
one: "new date one",
two: "new date two",
three: "new date three",
four: "new date four",
five: "new date five"
};
// Dom elements
const container_inputs = document.getElementById('container_inputs');
const btn_changeInputs = document.getElementById('btn_changeInputs');
// Add Event Listener
btn_changeInputs.addEventListener('click', () => {
Array.from(container_inputs.children).forEach(child => {
let key = child.getAttribute('key'); // Get the Key Attribute
// If key attribute exists fill the corresponding entry
if(key) child.value = dataset[key];
});
});
<h2>Setting the corresponding values</h2>
<div id="container_inputs">
Input One <input type="text" id="input_one" key="one"> <br>
Input Two <input type="text" id="input_two" key="two"> <br>
Input Three <input type="text" id="input_three" key="three"> <br>
Input Four <input type="text" id="input_four" key="four"> <br>
Input Five <input type="text" id="input_five" key="five">
</div>
<button id="btn_changeInputs">Change!</button>
Getting an attribute and use it in calculations for value
So setting the value of an element dependent of an attribute and multiplier would then be:
// **
// JavaScript
// **
element.value = element.getAttribute('my_value') * multiplier;
// **
// JQuery
// **
// ****************************************************
// I STRONGLY RECOMMEND ONLY GETTING THE ELEMENT ONCE *
// ****************************************************
let element = $('#element'); // Getting the element
element.val(element.attr('my_value') * multiplier); // Setting the value
And the html element would look like:
<input type="text" id="element" my_value="100" />
I managed to fix it the issues, setting the value for each input was achieved by this line:
// Insert result after the current input field.
$(this).after(result);
and getting submit achieved by this line
sum += +$(this).text();
//console.log("Value sum "+sum);
$('#GrandTotal').val(sum);
As I show all result on span I used this below to hide
$( "span" ).hide();
working version on jsfiddle.net
https://jsfiddle.net/erkindunya/L3d4j8hv/17/
This might help one else who doing this
I am using a form to build a block of text, the final output of which needs to be kept under a certain character count.
For the user, I need to be able to provide real-time character counting so they can adjust their entries as appropriate.
Basic HTML would be as follows:
<form>
<input type="text" id="#input1">
<input type="text" id="#input2">
</form>
<div class="character-counter">0</div>
However my JS/jQuery is not working very well: while it is outputting a counter in real time, it seems to be concatenating the final results in the output despite me parsing the variables as integers.
$('#input1').keyup(function() {
// Variables
var currentCharCount = parseInt($('.character-counter').text());
var fieldLength = parseInt($(this).val().length, 10);
var newCharCount = fieldLength + currentCharCount;
// Counter output
$('.character-counter').text(Number(newCharCount));
});
$('#input2').keyup(function() {
// Variables
var currentCharCount = parseInt($('.character-counter').text());
var fieldLength = parseInt($(this).val().length, 10);
var newCharCount = fieldLength + currentCharCount;
// Counter output
$('.character-counter').text(Number(newCharCount));
});
The correct solution will update the '.character-counter' div with the correct total character count between the fields every time a character is typed or deleted or pasted in.
Thanks!
You don't want the old value of the character-counter element at all, you purely want to use the lengths of the text in the two inputs. Separately: Don't use keyup, use input. (What if the user right-clicks and pastes? No keyup occurs...)
Separately, the id attributes of your input fields are incorrect: They shouldn't have the # on them.
So (see comments):
// You can hook the event on both fields with the same call
// Note using `input`, not `keyup`
$("#input1, #input2").on("input", function() {
// Get the length of each input's current value, then put it
// in the .character-counter div
$('.character-counter').text($("#input1").val().length + $("#input2").val().length);
});
<form>
<input type="text" id="input1">
<!-- No # here --------^ -->
<input type="text" id="input2">
<!-- Nor here ---------^ -->
</form>
<div class="character-counter">0</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
function toCelsius(f) {
return (5 / 9) * ('temperature' - 32);
}
<h2>JavaScript Functions</h2>
<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<br> Enter Temperature <br>
<input type="number" name="temperature" "temperature"> <br><br>
<button type="button" onclick="toCelsius(f)"> Translate </button>
Using JS, what I want to accomplish is to be able to pull the number that the user inputs into the 'temperature' input into the 'toCelsius' function and then on click of the button invoke 'toCelsius'.
The end objective is for a user to be able to input a temperature in farenheit then translate it to celsius
You cannot pass (f) - instead read it in the function
You need to show the result - here I use a span
JS Math can create funny decimals. I use toFixed to get rid of them. You can add a number - toFixed(2) to show how many decimals you want
You can also use Math.round or Math.floor to round down
function toCelsius() {
var f = document.getElementById("temperature").value || 0; // Zero if nothing
document.getElementById("result").innerHTML=((5 / 9) * (f - 32)).toFixed();
}
<h2>JavaScript Functions</h2>
<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
Enter Temperature <br>
<input type="number" name="temperature" id="temperature"> <br><br>
<button type="button" onclick="toCelsius()"> Translate </button><br/>
Result: <span id="result"></span>°C
One way to pull (get) the value of the input is by using jquery or the DOM.
document.getElementByName('temperature').value
and
$("#temperature").val()
are ways to access the input.
I am trying to write a short piece of html code that, given two initial amounts, attempts to find the number greater than or equal to the first that wholly divides the second given amount. The code tries to divide the numbers, and if it is unsuccessful, adds 1 to the first number and tries to divide again, etc...
I want the code to return the value that does wholly divide the second number AND the answer to the division (with some plain text appearing around it).
Added to this, or at least I'd like there to be, is that upon clicking one of 5 different buttons a multiplication operation is performed on the first given number, it is rounded up to the nearest whole number, and THEN the function attempts to divide this into the second given number.
It's difficult to explain exactly what I want without showing you the code I have so far, so here it is:
<html>
<head>
<b>Rounded Commodity Pricing:</b><br>
<script language="Javascript">
function finddivid(marketprice,tradevalue) {
var KWDex = 0.281955
var GBPex = 0.625907
var USDex = 1
var CADex = 0.998727
var EURex = 0.784594
if
(currency == "KWD")
var currencyMarketprice = Math.ceil(marketprice*KWDex)
else if
(currency == "GBP")
var currencyMarketprice = Math.ceil(marketprice*GBPex)
else if
(currency == "USD")
var currencyMarketprice = Math.ceil(marketprice*USDex)
else if
(currency == "CAD")
var currencyMarketprice = Math.ceil(marketprice*CADex)
else if
(currency == "EUR")
var currencyMarketprice = Math.ceil(marketprice*EURex)
if (tradevalue % currencyMarketprice == 0)
return ("tonnage = " + tradevalue / currencyMarketprice + " mt, and price = " + currencyMarketprice +" " +currency +" per mt");
else
{for (var counter = currencyMarketprice+1; counter<(currencyMarketprice*2); counter++) {
if (tradevalue % counter == 0)
return ("tonnage = " + tradevalue / counter + " mt, and price = " + counter +" " +currency +" per mt");}}};
</script>
</head>
<p>Select currency:
<input type="button" value="KWD" OnClick="var currency = KWD">
<input type="button" value="USD" OnClick="var currency = USD">
<input type="button" value="GBP" OnClick="var currency = GBP">
<input type="button" value="EUR" OnClick="var currency = EUR">
<input type="button" value="CAD" OnClick="var currency = CAD">
<P>Enter today's price of commodity in USD: <input name="mktprc" input type="number"><br><p>
<P>Enter value of trade: <input name="trdval" input type="number">
<input type="button" value="Calculate" OnClick="showMeArea.value=finddivid(mktprc,trdval);">
<p>
<br><br>
<input name="showMeArea" readonly="true" size="30">
</html>
If you run this html in your browser you should see what I am trying to achieve.
It is far from complete but here are the main problems/features that I need help with:
I would like to be able to click on one of the 'currency' buttons so that upon clicking, the variable 'currency' is assigned and then used in the function finddivid.
(2. This isn't as important right now, but eventually, once this is working, I'd like it so that upon clicking one of the currency buttons, it changes colour, or is highlighted or something so that the user knows which currency rate they are using.)
Upon entering the numbers into the two boxes I would like to click 'Calculate' and have it return what I've written in the function into the 'showMeArea' read-only box at the end of the code.
I know I'm probably missing loads of stuff and I might be miles away from success but I am very new to programming (started 4 days ago!) so would like any like of help that can be offered.
Thanks in advance of your comments.
The first request requires that you put the currency into the actual script, and I would recommend using a setter function:
<script language="Javascript">
var currency; // you might want to set this at a default just in case
function setCurrency(val) { currency = val; } // Setter function
function finddivid(marketprice,tradevalue) {
Then call it in your button click:
<input type="button" value="KWD" onClick="setCurrency('KWD');">
As for the second request, I'd say you have the concept down well enough, but you don't have the method exactly right. First your inputs will need an id attribute:
<input name="mktprc" id="mktprc" input type="number">
<input name="trdval" id="trdval" input type="number">
The name attribute is used for posting values, the id attribute is used by javascript to find elements within a page. Using jQuery would make retrieving these elements easy, but I'll show both the jQuery and the standard JavaScript method of doing this:
jQuery:
<input type="button" value="Calculate" OnClick="$('#showMeArea').val(finddivid($('#mktprc'),$(#'trdval')));">
The $('#id') selects an element. The method .val() sets the value.
Note for the jQuery purists: Yes, there are much better/sophisticated ways to accomplish this with jQuery, but this answer is targeted to my perception of OP's JavaScript capability.
Standard Javascript:
<input type="button" value="Calculate" OnClick="document.getElementById('showMeArea').value = finddivid(document.getElementById('mktprc'),document.getElementById('trdval'));">