how to get a number from div then multiply - javascript

my result is the following
Showing 5 to 40 of 50 entries i need to get the total entries ignoring "Showing 5 to 40 of" and keeping the number "50" insert it into input total then multiply it by 10
<div class="info" id="info">Showing 30 to 40 of 50 entries</div>
<input type="text" id="total" name="total">
<input type="text" id="total" name="x10">

This answer is with the strong assumption that the text always shows "Showing 5 to 40 of 50 entries" or a similar text, you'd also need to change the id for one of the boxes, as all id should be unique to be useable in the js code
// use js to get the value
const info = document.getElementById("info").innerHTML
// get an array of text seperated by space
const texts = info.split(" ")
// get the 2nd last character
const number = parseInt(texts[texts.length - 2])
// put those values into the input boxes
document.getElementById("total").value = number
document.getElementById("totalTimes10").value = number*10
<div class="info" id="info">Showing 30 to 40 of 50 entries</div>
<input type="text" id="total" name="total">
<input type="text" id="totalTimes10" name="x10">

Using Node.textContent property of the node to get the text content of div and then use String.split() method to extract the total entries.
const text = document.querySelector("#info").textContent.split(" ");
const entries = text[text.length - 2];
document.querySelector("#total").value = entries;
document.querySelector("#totalTimes10").value = 10 * entries;
<div class="info" id="info">Showing 30 to 40 of 50 entries</div>
<input type="text" id="total" name="total">
<input type="text" id="totalTimes10" name="x10">

Related

JavaScript can toFixed() not cut everything after it's a specific size?

i want to make this toFixed() number to cut the number to 3 last digits, but also i want to show its e i mean it's 10^number
like if i put 0.1 to Number 1, it shows 2.204e-7 insted of 0.000 in number 2
html:
<h4>number 1</h4>
<input type="number" id="num1" oninput="myFunc()">
<h5 id="real"></h5>
<br>
<h4>number 2</h4>
<input type="number" id="num2">
javascript:
function myFunc(){
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
num2.value = num1.value * 0.00000220462;
document.getElementById("real").innerHTML = "real value is: " + num2.value;
if(num1.value.toString().includes("0.") | num1.value.toString().startsWith(".")){
num2.value = Number.parseFloat(num2.value).toFixed(3);
}
}
check this link: https://codepen.io/RawandHr/pen/ZEYaONw
Try using toExponential() instead of toFixed().

javascript copy (duplicate) text from 1 field to another

i have 20 fields
10 with name= from 1 to 10
and 10 fields with same name from 1 to 10
<input name="1" type="text">
...
<input name="10" type="text">
and 10 fields like this
<input name="1" type="text">
...
<input name="10" type="text">
so what i want is: to write in first 10 fields , and other 10 to be filled automatically
i can change names to id or add prefix to id of second group.
or its better with names .
if u change names to id 1-10 then second group id a1-a10
function populateSecondTextBox() {
document.getElementById('1').value = document.getElementById('a1').value;
}
this is for 1 only,
someone can add answer for doing all with 1 code
you want to mirror the changes like this ?
for(let i=1; i<11 ; i++){
let input = document.getElementsByName(i.toString())[0];
let mirror = document.getElementsByName(i.toString())[1];
input.onkeyup=()=>{ mirror.value = input.value; }
}

Add three numbers and display result in textbox with Javascript

i was just trying to write a code that will use 3 input fields and show their sum into result field. If a person put data in field 1, the result field should show the data in result field and when user put data in second field, result field should show the sum of field 1 and field 2 and when user put data into field 3, their sum should be show on result field. I write below code but not got any success. I am a new learner.
<body>
Field 1: <input type="text" id="num1" onkeyup="sum();" > </br>
Field 2: <input type="text" id="num2" onkeyup="sum();" > </br>
Field 3: <input type="text" id="num3" onkeyup="sum();"> </br>
Sum: <input type="text" id="final" />
<script type="text/javascript">
function sum()
{
var w = document.getElementById('num1').value;
var x = document.getElementById('num2').value;
var y = document.getElementById('num3').value;
var z=parseInt(w)+parseInt(x)+parseInt(y);
document.getElementByID('final').value=z;
}
</script>
</body>
Two issues:
(1) Small typo in your last line, you used getElementByID instead of getElementById
(2) You need to account for the case where there is no value, one way to do this is to or it with 0 (which evaluates to 0 if there is no value).
Here is a working example:
function sum()
{
var w = document.getElementById('num1').value || 0;
var x = document.getElementById('num2').value || 0;
var y = document.getElementById('num3').value || 0;
var z=parseInt(w)+parseInt(x)+parseInt(y);
document.getElementById('final').value=z;
};
https://jsfiddle.net/yq60qad0/
It's a typo. =>
document.getElementByID('final').value=z;
should be Id, not ID

How to change field data from one format to another format

In my form I have four fields. All fields are free to accept numbers and those numbers are converted into predefined character format (I implemented it half with bad logic but in result field it's not combining all field data into some format. Suppose if you type number 2 in every field then result field should look like : 'XXYYZZNN') ,
What I want is :
I will fix a character for each field, for T1 it's ' X ' ,for T2 it's ' Y ',
for T3 it's ' Z ' for T4 it's ' N '
Now
if i enter 2 (it can be 0-9) in T1 the result field should show 'XX'
if i enter 3 in T2 the Result field should show 'XXYYY' (hear XX is previous field data)
if i enter 1 in T3 the Result field should show 'XXYYYZ' and
if i enter 4 in T4 the Result field should show 'XXYYYZNNNN'
like wise final result will be 'XXYYYZNNNN'
How can i do this? Any help will be appreciated. Thanks.
This would be my approach:
Use data attributes to define the character for each input (also use proper label tags and type attributes for inputs)
<div>
<label for="textBox1">T1 :</label>
<input type="text" id="textBox1" data-char="X"></input>
<br/>
<label for="textBox2">T2 :</label>
<input type="text" id="textBox2" data-char="Y"></input>
<br/>
<label for="textBox3">T3 :</label>
<input type="text" id="textBox2" data-char="Z"></input>
<br/>
<label for="textBox4">T4 :</label>
<input type="text" id="textBox3" data-char="N"></input>
<br/>
<label for="message">Result :</label>
<input type="text" id="message"></input>
</div>
Then I would go through all textboxes on every keyup event, parsing their value into a number and appending the corresponding character to the result
$(document).ready(function () {
$('[id^="textBox"]').keyup(function(){
var result = '';
$('[id^="textBox"]').each(function(){
var count = parseInt($(this).val(),10) || 0;
result += Array(count+1).join($(this).data('char'));
});
$('#message').val(result);
});
});
Working fiddle
DEMO
$(document).ready(function () {
function another_format(len,char_code){
var ret='';
for(var i=0;i<len;i++){
ret +=char_code;
}
return $.trim(ret);
}
$("#textBox,#textBox1,#textBox2,#textBox3").keyup(function (event) {
console.log(event.keyCode);
if (event.keyCode >=49 && event.keyCode <= 57 && event.keyCode == 8 && event.keyCode=46) {
var x = another_format($('#textBox').val(),'X');
var y = another_format($('#textBox1').val(),'Y');
var z = another_format($('#textBox2').val(),'Z');
var n = another_format($('#textBox3').val(),'N');
$('#message').val(x+y+z+n);
}
});
});

Multiplying Taxes and Adding to Total Amount

We don't always have to add taxes to order so I need a way that taxes will be bypassed by default unless specified.
So I have the following text box:
<input class="txt1" type="text" name="subtotal" value="" id="subtotal"
size="16" tabindex="42" onChange="enableBeforeUnload();"
onKeyUp="enableBeforeUnload();">
I have this text box working correctly-it sums the values.
I have two text boxes that I'm trying to multiply by the tax percent and display the total:
<input class="txt1" type="text" name="tax" id="tax" value="1" size="16" tabindex="42"
onChange="enableBeforeUnload();" onKeyUp="enableBeforeUnload();">
<input class="txt2" type="text" name="total1" value="" id="total1" size="16"
tabindex="42" onChange="enableBeforeUnload();" onKeyUp="enableBeforeUnload();">
I tried using the following with no luck:
var tax = +$("#tax").val(), // get tax and convert to a number
total = tax ? sum * tax : sum; // if tax is a non-zero number multiply
// otherwise just take the sum as is
and this:
totAmt.val(sum + sum*parseFloat(taxAmt.val()/100));
I could not implement either correctly.
Thanks in advance.
http://jsfiddle.net/thetylercox/jh2Ne/7/ i coul dnot get this to work correctly
http://soldbybillcox.com/treasure/demo.php its working fine here
For starters, you are calling:
$("#tax")
But you don't have an element with an id of tax. you could use:
$("input[name=tax]")
-edit->
So is the problem getting the values, or the logic in calculating the total?
You could throw your tax logic in a function:
function getTax(tax){
var taxFloat = parseFloat(tax)
if(isNaN(taxFloat)){
return 1;
}else{
return taxFloat;
}
}
Then use:
total = getTax($('#tax').val()) * sum;
And what's that plus doing in your formula?
Should just be:
var tax = $("#tax").val()
try adding a function to do your calculations
total = getTax($('#tax').val()) * sum;

Categories

Resources