We Keep Coding

firebase realtime database on("child_added") function not working

i am trying to print all firebase realtime database inputs out in my div tag using this code:
function courserep(name, course, matno, current_level){
firebase.database().ref("students/"+course+"/"+matno+"/result/"+current_level).on("child_added", function(snapshots){
var html = "";
html+="<div id='level'>";
html += "<p id='redmi'>"+snapshots.val().name+"</p>";
html += "<input type='number' id='grade'>";
html += "<button id='rebtn' onclick='hlevelii()'>ADD RESULT</button>";
html += "</div>";
document.getElementById("enteroo").innerHTML+=html;
})
}
i tried this code block, and like i said i am expecting it to get all the particular pushed files from the database

How to generate a mark sheet with names from an array and display with textbox beside?

I am trying to create a mark sheet for a project am currently working on where i have an array of names such as
var names = ["n1","n2","n3","n4","n5","n6","n7","n8"];
and i want to display the names in a table column and generate an amount of text boxes which is defined in a loop but so far i am having trouble to display the text boxes side by side of the names.
html+= "<table>";
html+= "<table style='border:1px solid black;'><tr><th>Student Name</th><th>ICA's</th>";
for(var i = 0; i<=names.length;i++)//retrieve names from the array
{
for(var j=1;j<=2;j++)//amount of textboxes need to be created
{
html+= ("<tr><td id='tableTD'>"+names[i]+"</td><td>"+txtBox+"</td></tr></table>");
}
}
display.innerHTML = html;
}
the result from this segment of codes is that i get a duplicate of the names with textbox beside them but not all in 1row for example "n1: textbox1, textbox2"
i have to display all that in a tables and i am limited to only html and javascript no jquery of server side language.
I cant seem to understand where the problem come from..

Is this more like what you're trying to do?
html = "<table>";
html+= "<tr><th>Student Name</th><th>ICA-1/th><th>ICA-2</th><th>Total</th></tr>";
for(var i = 0; i<=names.length;i++)//retrieve names from the array
{
html += "<tr id='row" + i +"'><td>"+names[i]+"</td>";
for(var j=1;j<=2;j++)//amount of textboxes need to be created
{
html+= "<td>"+txtBox+"</td>";
}
html += "<td id='total" + i "'> </td></tr>";
}
html += "</table>";
display.innerHTML = html;
additional code based on further questions below: (additional edits above and below to add totals to each row)
for (let row=0; row<names.length; row++)
{
let txtValue=document.querySelectorAll("#row" + row + " .stdMrk");
if(txtValue.length>0)
{
let rowTotal = 0;
for(var i = 0;i<=y;i++)
{
rowTotal += parseInt(txtValue[i].value);
}
//alert(rowTotal);
document.querySelector("#total" + row).innerHTML = rowTotal;
}
}
This outer loop gets the inputs for each row, then uses your loop to add them.

#Noah B
The below codes is the ans i got from you to display the tables which ive modified it abit to acomodate my requirements.
for(var i = 0; i<names.length;i++)//retrieve names from the array
{
html += "<tr id='row" + i +"'><td style='border:1px solid black;'>"+names[i]+"</td>";
for(var j=1;j<=2;j++)//amount of textboxes need to be created
{
html+= "<td style='border:1px solid black;'><input type='text' class='stdMrk' placeholder='0' value='0' /></td>";
}
for(var k=1;k<=1;k++)//display project or final exams txt box
{
html+= "<td style='border:1px solid black;'><input type='text' class='stdMrk' placeholder='0' value='0' /></td>";
}
html += "</tr>";
}
But my other issue is that now i need to retrieve the value of each rows and from what you can see,ive added an additional for loop to display another set of textboxes which has the same class name as the previous one.
For example n1 will have 3int value entered from the keyboard and i have to compute that 3value and return it. It must be a loop which get repeated for each names.
This is the codes i've written to retrieve the value but it display all the value 1by 1 without any means to know from which rows this belong to..
var txtValue = document.getElementsByClassName("stdMrk");
if(txtValue.length>0)
{
for(var i = 0;i<=y;i++)
{
x += parseInt(txtValue[i].value);
}
alert(x);
}//edit ive manage to create this but still need to iterate through all the names...
Thanks in advance..

Cannot pass array parameter (building out html with string) - Unexpected identifier

I have modified my previous code to allow for a data array to be passed to a different function. Everything is working until I add this data array.
Currently what works (old version) is only passing the this operator and an ID.
Below in my code you will see that I build out the HTML along with a table and pass the html to be appended at a later time.
You can see that I am building a table with a delete button. It all works well, except now that I am passing the data array it is telling me "Unexpected identifier"
I have tested it with passing getDeleteItems(this,ID,ID) and it works fine
but getDeleteItems(this,ID,data) does not.
Below is my code, and you can see I am passing an array (that works throughout my code and other functions (including this one already!))
I am just stuck now and can't seem to see past this, maybe some fresh eyes can help!
Thanks!
function mouseOverTable(ID,parent,data)
{
// ID is in the first column (0)
// Type is in the second column (1)
// Title is in the third column (2)
// popup_ItemClicked()
var family = findFamily(ID,parent,data)
var sHTML = "";
sHTML += "<table class="+"table table-hover id='relationshipTable'"+">";
sHTML += "<thead>";
sHTML += "<tr>";
sHTML += "<th>"+"Select Item"+"</th>";
sHTML += "<th>"+"ID"+"</th>";
sHTML += "<th>"+"Content Name"+"</th>";
sHTML += "<th>"+"Type"+"</th>";
sHTML += "<th>"+"Status"+"</th>";
sHTML += "<th>"+"Date"+"</th>";
sHTML += "</tr>";
sHTML += "</thead>";
sHTML += "<tbody>";
//displays if it's a article.. blog ... etc..
for(var i = 0; i<family.length;i++)
{
sHTML += "<tr id='relationshipRow"+family[i].ID+"'>";
sHTML += "<td><input type = 'checkbox' value = '"+family[i].ID+"'></input></td>";
sHTML += "<td>"+family[i].ID+"</td>";
sHTML += "<td>"+family[i].Title+"</td>";
//shows the date that the contentitem was created
sHTML += "<td>" + family[i].Type +"</td>";
sHTML += "<td>" + family[i].Status +"</td>";
sHTML += "<td>" + (family[i].Date) +"</td>";
sHTML += "</tr>";
}
sHTML += "</tbody>";
sHTML += "</table>";
//console.log(data)
sHTML += "<input type = 'Button' id ='DeleteItems' value = 'Delete Selected' onclick='javascript: getDeleteItems(this,";
sHTML += ID;
sHTML += ",";
sHTML += data;
sHTML += ");'></input>";
return sHTML;
}
I just looked at console and the element tabs in chrome: it looks like for some reason it is parsing the object as such
onclick="javascript: getDeleteItems(this,791,[object Object],[object Object],[object Object],.... and this goes on...

Your error in the onclick="javascript: getDeleteItems
the third parameter expected to be an array you missed {} for the array objects.
So you must call getDeleteItems function like this
onclick="javascript: getDeleteItems(this,791,{[object Object],[object Object],[object Object]})"

As #Fatehi mentioned, the following lines are giving the error
sHTML += "<input type = 'Button' id ='DeleteItems' value = 'Delete Selected' onclick='javascript: getDeleteItems(this,";
sHTML += ID;
sHTML += ",";
sHTML += data;
sHTML += ");'></input>";
I believe that adding the curly braces wont fix your issue since that data variable is a parameter of the function and his value it's not global and the scope when you send it to the DOM is for global variables. You should better use data attributes for each value and then you could access them like this:
<input data-test="test" onclick="console.log(this.attributes['data-test'].value)">

So I figured out this puzzle. I had the following functions 1) that called mouseover, the mouseover function, then the delete function. Before I was creating a delete button in mouseover(and I still am). However I made mouseover return 2 items now, one that returns the html for the table and the other that returns a tableid. I also removed the findfamily function in mouseover and moved it up to where it was being called from, then passed that as the data.
functionThatCalledMouseOver(ID,parent,data){
// below have variables defining row family =findparent etc...
row.child(mouseOverTable(ID,parent,findParent)[0]).show();
//now create onclick even passing fullData
$('#'+DeleteItems).on('click',function(){
getDeleteItems(this,ID,data);
});
}
My ultimate goal was the following: I had some sharepoint list items I was deleting from a table. Usually when I create charts tables etc, I will do a call and store all data locally in an array. The array is what created the table I was making. So in theory after the table data is deleted from sharepoint, it is still in my local array.
The problem with this was that when I removed the elements (visually showing they were deleted), it I hid the children of the parent in the main table I created, then clicked to show it again, it would show the deleted items since it was not server information and just a local array.
For future people reading this, I tried my original method with turning the object into a JSON string, then using the escape function. So... escape(JSON.stringify(data)).. this got passed to the delete function. This does work for appearances only. Once decoded on the getDeleteItems function it is separate data from the original data I was trying to delete. So in my case this wouldn't work.
however, moving everything to the function that originally called the mouseover was the way to go. It allowed me to get to the object I needed to remove items from.

Call a javascript function from anchor tag inside td inside javascript code

Only Basic javascript knowledge is required.If anyone knows please help me.
I don't know how to do it but i have tried it in many ways but still not able to pass the value.
Simply, i have a for loop and i have a td inside it. I want to call a javascript function from this td click but problem is i am unable to pass any parameter to this function.
the code is here :
function GetContractList(abc) {
var data = abc
for (var it in data) {
tab += "<tr>";
tab += "<td>" + data[it].ContractCode + "</td>";
if (data[it].ContractCode != "") {
var Contract = data[it].ContractCode;
tab += "<td><a onclick='Delete_User(Contract);'>View</td>";
// tab += "<td><a data=" + data[it].ContractCode + " href='javascript:Delete_User(this.data);'>View</td>";
}
else {
tab += "<td></td>";
}
As u can see, i have tried to pass parameter to Delete_User function but the syntax is somewhere broken.
tab += "<td><a onclick='Delete_User(Contract);'>View</td>";
this line gives error-- Contract is not defined.
"<td><a data=" + data[it].ContractCode + " href='javascript:Delete_User(this.data);'>View</td>".
This line also doesnot passes any value to the function.
Please someone help me out.

try:
var cont = data[it].ContractCode.replace(/"/g, '\\"');
tab += '<td><a onclick="Delete_User(\''+cont+'\');">View</td>";
first line encodes any double quotes
the second line inserts the contract as a parameter and adds single quotes around it

You need to escape the quote for the parameter of the function.
tab += '<td>View</td>';
// ^^ ^^
function Delete_User(id) {
console.log('Delete_User', id);
}
var cc = '4711abc',
tab = 'View';
document.write(tab);

javascript : built an html form from json, but can't update the form

I have a javascript code that takes objects from json.
from this, i built an html string:
var htmlstr = "<table border=0>";
for (var i=0;i<jsonData.people.length;i++) {
htmlstr=htmlstr+"<tr><td>" + jsonData.people[i].name + "</td>";
htmlstr=htmlstr+"<td>"+ jsonData.people[i].cash + "</td>";
htmlstr=htmlstr+"<td><button onclick='changeCash(i)'>Update</button></td></tr>";
}
htmlstr=htmlstr+"</table>";
layer.addFeatures(features);
layer.events.on({ "featureselected": function(e) { updateMak('mak', htmlstr) } });
function changeCash(k) {
jsonData.people[k].cash=jsonData.people[k].cash+100;
}
The HTML page is as follows:
<script type="text/javascript">
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
alert("Mobile device detected."); }
function updateMak(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
} </script>
<div id="mak"> List of People </div>
Lets say this displays 10 people with their money.
If I click on one of their Update buttons, I think the json data is updated as intended. But I don't know how to verify it. The values in the form doesn't update the new value from the changeCash function.
How do I update the htmlstr and also update what's already displayed on screen?
Please advise.

When you generate htmlstr for the people cash
htmlstr=htmlstr+"<td>"+ jsonData.people[i].cash + "</td>";
You should also generate id for this td so that you can update the content from the function changeCash(k).
Something like
htmlstr=htmlstr+"<td id='peoplecash"+i+"'>" + jsonData.people[i].cash + "</td>";
And then in your changeCash function
function changeCash(k) {
jsonData.people[k].cash=jsonData.people[k].cash+100;
var peoplecash= document.getElementById("peoplecash"+k);
peoplecash.innerHTML = jsonData.people[k].cash;}