Insert sum of two value automatically in javascript [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have to do something like this but i am kind of stuck in here.
So i have a table with header column as
Fe Ni Co Magnetic NonMagnetic
below each item, i have input box of value in which user can enter value.
In the above table Fe, Ni are magnetic and Co is Non-magnetic.
So, when user enters value under Fe and Ni, its sum get automatically inserted Under Magnetic and if he enter value for Co, its value will get inserted under NonMagnetic.
I have tried using id of box below item name and id of item but was unable to get this done. I want to do all this using html and javascript.
This is just a part of code. Whole code is way bigger. So i don't want to confuse, so i am just putting context of part code.
If anyone can suggest me some ways to do it. That will be helpful.

You can easily do this like so:
const feInput = document.getElementById('fe');
const niInput = document.getElementById('ni');
const coInput = document.getElementById('co');
const magnetic = document.getElementById('magnetic');
const nonMagnetic = document.getElementById('non-magnetic');
function updateMagnetic() {
const fe = feInput.value;
const ni = niInput.value;
magnetic.innerHTML = Number(fe) + Number(ni);
}
function updateNonMagnetic() {
const co = coInput.value;
nonMagnetic.innerHTML = Number(co);
}
feInput.addEventListener('input', updateMagnetic);
niInput.addEventListener('input', updateMagnetic);
coInput.addEventListener('input', updateNonMagnetic);
<table>
<thead>
<tr>
<th>Fe</th>
<th>Ni</th>
<th>Co</th>
<th>Magnetic</th>
<th>NonMagnetic</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fe" type="number" /></td>
<td><input id="ni" type="number" /></td>
<td><input id="co" type="number" /></td>
<td id="magnetic">0</td>
<td id="non-magnetic">0</td>
</tr>
</tbody>
</table>

Related

Is there anyway to show serial number in a table? [duplicate]

This question already has an answer here:
How to display the index data in a *ngFor?
(1 answer)
Closed 1 year ago.
I'm currently new angular, so if there is any mistake in my implementation then please let me know,
This my HTML code from component.html file
<table id="table">
<tr>
<th>Sl.No.</th>
<th>Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Skill</th>
<th>Gender</th>
</tr>
<tr *ngFor = " let i of counter()">
<td></td> <!-- To print the serial number here -->
<td>{{nameFromLocalStorage}}</td>
<td>{{emailFromLocalStorage}}</td>
<td>{{phoneFromLocalStorage}}</td>
<td>{{skillFromLocalStorage}}</td>
<td>{{genderFromLocalStorage}}</td>
<td>
<button (click)="delete()" ><img src="./assets/icon/trash.png"></button>
</td>
</tr>
</table>
Here is code for counter() from component.ts file
counter() {
//TO DO
//Implementation is remaining,
return new Array(20);
}
The counter is supposed to return a value, the value is to be captured by the html file in the *ngFor directive and based on that it should create the required number of rows. Then I wanted to display the serial number in the first column of the table.
According to the code above I'm able to get 20 rows.
Note:- I have seen the solution in CSS and doesn't wish to implement until its the only option left.
My question is that how do I get the serial number there.
From my understanding i in the *ngFor directive should starts from zero so, is there anyway to directly display the value of i it self.
I'll be very glad if you can help me learn and correct my mistake.
Thank you in advance.
Yes you can loop it as simple dont know what your serial no is, if its from array then just use CounterArr.Serial_No.
<tr *ngFor = " let CounterArr of counter();let i = index;">
<td>{{i+1}}</td>
<td>{{CounterArr.nameFromLocalStorage}}</td>
<td>{{CounterArr.emailFromLocalStorage}}</td>
<td>{{CounterArr.phoneFromLocalStorage}}</td>
<td>{{CounterArr.skillFromLocalStorage}}</td>
<td>
<button (click)="delete()" ><img src="./assets/icon/trash.png"></button>
</td>
</tr>

Search JSON between two dates [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a JSON object which needs to be searched if I input a angular form with two dates
I tried searching using a single date angular form control.
template code:
<div>
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Invoice summary</h5>
<hr>
<p class="card-text">Total revenue made by this venue: <strong>
{{totalRevenue}}</strong></p>
<p *ngIf="invoicesFiltered === true" class="card-text">Revenue
made on <strong>{{inputInvoiceDate}}</strong> is <strong>
{{filteredTotalRevenue}}</strong></p>
</div>
</div>
<div>
<div style="float:left;">
<label for="queryInvoiceDate">Start Date:</label>
<input
#queryInvoiceDate
(change)="filterInvoice(queryInvoiceDate.valueAsDate)"
type="date"
class="form-control"
style="width:100%">
</div>
<table class="table table-striped" [mfData]="filteredInvoices" #mf="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th>Advertiser Acct Balance</th>
<th>Service Fee Amt</th>
<th>Target Amt for Venue</th>
<th>Venue Acct Balance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let invoice of mf.data">
<td>{{invoice.acntbalances}}</td>
<td>{{invoice.servicefeeamount}}</td>
<td>{{invoice.targetamount}}</td>
<td>{{invoice.targetbalance}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator [rowsOnPageSet]="[10,15,20]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
component code:
filterInvoice(queryInvoiceDate: any) {
this.inputInvoiceDate = queryInvoiceDate.toISOString().split('T')[0];
this.filteredInvoices = (queryInvoiceDate) ?
this.invoices.filter(i =>
i.timestamp.includes(queryInvoiceDate.toISOString().split('T')[0])) : this.invoices;
console.log(queryInvoiceDate.toISOString());
this.filteredTotalRevenue = this.filteredInvoices.reduce((sum, invoice) => {
return sum + invoice.targetamount; }, 0);
}
What would i need to do if I want to pass two dates and search for all JSON values falling between the passed dates and specific timestamps?
I would strongly recommend using momentjs if you need to do anything with dates in javascript that isn't trivial. That is likely to be the case if you are writing a real-world application as opposed to a theoretical exercise. Javascript dates are messy and nasty, and you can see that you are already doing ugly things like .toISOString().split('T')[0] in order to extract the date. In momentjs, you can do something like moment(queryInvoiceDate1).isBefore(moment(i.timestamp)) && moment(queryInvoiceDate2).isAfter(moment(i.timestamp)) to filter the invoices by the date range. This will let you write much more readable and maintainable code.
On the other hand, the nice thing about ISO strings is that they can be compared vie lexicographical (alphabetical) sort, so '2018-09-01' is > '2018-08-01' and < '2018-09-03' for instance. So you could use your current method of extracting the date from the ISO string and simply use >= and <= operators in the filter.

Loop through multiple TD, grab multiple values, fill array

I have two tables on the page.
Inside of my second table I am dynamically adding html from JS.
I am checking to see if the <tr> inside of the tbody are empty using:
var rowCount = $('#dynatable >tbody >tr').length;
If the row count is 0 I continue on with my javascript, if 1 or more <tr> exists I need to go through each <tr> and grab the two input values inside the <td>; for every <tr> available. Then need to collect the data into an array for server-side processing.
<table id="dynatable">
<thead>
<tr>
<th>Time</th>
<th>Description</th>
</tr>
</thead>
<tbody id="p_scents">
<tr><td class="ts_td"><input type="text" name="ts_value[]" class="timestamp_input"/></td><td><TEXTAREA NAME="ts_description[]" class="ts_desc" rows="3" cols="30" style="resize:none;" ></TEXTAREA></td></tr>
<tr><td class="ts_td"><input type="text" name="ts_value[]" class="timestamp_input"/></td><td><TEXTAREA NAME="ts_description[]" class="ts_desc" rows="3" cols="30" style="resize:none;" ></TEXTAREA></td></tr>
</tbody>
I have browsed similar questions but I cannot figure out a solution for my situation. I had a previous solution using simpleHTMLDOM + PHP but it's way too slow performance wise.
I was told to use JS or jquery and I am quite unfamiliar with both, any help is greatly appreciated.
How do I grab the values of multiple inputs from multiple <tr>'s inside a specific table and store the values in an array?
If your classes will be the same, you could do something like this with jQuery.
It put the values into arrays.
var values = $("input[class='timestamp_input']").map(function(){return $(this).val();}).get();
var textAreaValues = $("textarea[class='ts_desc']").map(function(){return $(this).val();}).get();
console.log(values);
console.log(textAreaValues);
JSFiddle demo here.

how to save information in input tags using cookie [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a table on web page.
I wanna save informaton in input's fields using cookie. i. e. I want to reopen my web page and see data from last opening web page.
HTML
<table class="table table-striped" id="table-visual-features">
<thead>
<tr>
<th>Visual Feature</th>
<th>Step</th>
<th>Output</th>
<th>Data Feature</th>
</tr>
</thead>
<tbody>
<tr><td>x</td>
<td><select><option>first</option></select></td>
<td><select><option>output</option></select></td>
<td><input name="data-feature_x" id="value0" class = "feature-execution"/></td>
</tr>
<tr><td>x</td>
<td><select><option>second</option></select></td>
<td><select><option>output</option></select></td>
<td><input name="data-feature_x" id="value1" class = "feature-execution"/></td>
</tr>
<tr><td>x</td>
<td><select><option>third</option></select></td>
<td><select><option>output</option></select></td>
<td><input name="data-feature_x" id="value2" class = "feature-execution"/></td>
</tr>
</tbody>
</table>
You can use jQuery Cookie to set and retrieve the contents of cookies.
Using $.cookie.json = true allows you to store JSON data.
Code:
var getValue = function(id){
return document.querySelector('#'+id).value;
};
var saveCookie = function(){
document.cookie = '';
document.cookie += 'a='+getValue('value0');
document.cookie += 'b='+getValue('value1');
document.cookie += 'c='+getValue('value2');
};
Demo:
http://jsbin.com/IZULuRE/4/edit
Of course, edit code for your usage :), its only demo.

HTML / javascript image in specific cell [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
Ok here is my questation. im stuck for a while
I have a table 3x3. In that table I have 5 images;
1st image is in the middle cell of the top row, saying "Home"
2nd, 3rd, & 4th images are in the middle row
2nd image is in the left column and says "Software"
3rd image is in the middle of the table and displays my logo
4th image is in the right column and says "Forum"
5th image is in the 3rd row, middle cell and says "About"
So I want to keep the logo image (in the center of table) displayed until user hovers over one of the 4 categories (Home, Forum, Software, About). When they hover over the category, the middle image should become an image representing that specific category.
For example, if user hovers over Software image (left column, middle row), logo image would be replaced with image representing Software.
Sorry for bad language and I hope you get idea of what I want to do
This should get you in the right direction.
HTML
<table>
<tr>
<td id=""></td>
<td id="home">Home</td>
<td id=""></td>
</tr>
<tr>
<td id="software">Software</td>
<td id="logo">Logo</td>
<td id="forum">Forum</td>
</tr>
<tr>
<td id=""></td>
<td id="about">About</td>
<td id=""></td>
</tr>
</table>
jQuery
var logoBlock = $("#logo");
$("a").hover(
function(){
logoBlock.find("a").text( $(this).text()+" is Hovered" );
},
function(){
logoBlock.find("a").text("Logo");
}
);
http://jsfiddle.net/daCrosby/MvWYD/
Is this what you want to do?
jsFiddle here
HTML:
<table id="tbl">
<tr><td></td><td><img id="hom" src="http://png-2.findicons.com/files/icons/1261/sticker_system/128/home.png"></td><td></td></tr>
<tr>
<td>
<img id="swr" src="https://cdn1.iconfinder.com/data/icons/ecommerce-and-business-icon-set/256/software.png">
</td>
<td>
<img id="lgo" src="http://graph.facebook.com/1671019266/picture?type=large">
</td>
<td>
<img id="frm" src="http://wespenre.com/graphics/forum-icon.png">
</td>
</tr>
<tr id="tr2"><td></td><td><img id="abt" src="http://png-3.findicons.com/files/icons/730/soft/128/info.png"></td><td></td></tr>
</table>
javascript/jQuery:
/*
See these posts:
http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery
*/
var img_logo = $('#lgo');
$('img').hover(
function() {
var xx = $(this).attr('src');
img_logo.attr('src', xx);
},
function() {
img_logo.attr('src', "http://graph.facebook.com/1671019266/picture?type=large");
}
);

Categories