Javascript variabel scope confusion - javascript

I have a small problem with regards to scope. In the program below I have declared two variables in the .js file, countRows and countCols. Inside the saveTable(). However their value is 0 when after the function when I log them.
Why do they not hold their value from the function?
var table = document.getElementById("table");
var countRows = 0;
var countCols = 0;
function saveTable() {
countRows = table.rows.length;
countCols = table.rows[0].cells.length;
var data = "";
for(var i = 0; i < table.rows.length; i++) {
for(var j = 0; j < table.rows[i].cells.length; j++) {
data += table.rows[i].cells[j].innerHTML + ",";
}
}
document.cookie = data;
}
console.log(countRows); //These equal 0
console.log(countCols);


To add to #Steven Stark answer, it happens because you didn't call the function before logging the variable, they share the scope here. Example below:
let a = 0;
// This change a, because the function is directly accessing the a declared in the parent scope
function changeA() {
a = 3;
}
changeA();
console.log(a)
// This doesn't change a
function changeAParameter(a) {
// because this 'a' only exists in the scope of this function
a = 5;
}
changeAParameter(a);
console.log(a);
You can have more information about closure (which is beyond topic here), but is interesting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures


You have to invoke the function
var table = document.getElementById("table");
var countRows = 0;
var countCols = 0;
function saveTable() {
countRows = table.rows.length;
countCols = table.rows[0].cells.length;
var data = "";
for(var i = 0; i < table.rows.length; i++) {
for(var j = 0; j < table.rows[i].cells.length; j++) {
data += table.rows[i].cells[j].innerHTML + ",";
}
}
document.cookie = data;
}
// Call the function
saveTable();
console.log(countRows); //These equal 0
console.log(countCols);

Related

Forward to different users depending on labels - Gmail Apps Script

I am trying to create an Apps Script for Gmail, so that all messages labelled product-related and product-a are forwarded to the producta#gmail.com address, and all messages labelled "product-related" and product-b are forwarded to the productb#gmail.com address.
The script will be launched via a card, so there is no need for more automation.
Here's the code I did:
function testforward1() {
var label = "product-related";
//var interval = 2000;
//var date = new Date();
//var timeFrom = Math.floor(date.valueOf()/1000) - 60 * interval;
var threads = GmailApp.search('label:' + label);
for (var i = 0; i < threads.length; i++) {
if (label == "product-a" && "product-related") {
var recipient = 'producta#gmail.com';
var messages = threads[i].getMessages();
//var attachment = messages[i].getAttachments();
for (var j = 0; j < messages.length; j++) {
var body = messages[j].getBody();
messages[j].forward(recipient, {
htmlBody: body
});
}
}
if (label == "product-b" && "product-related") {
var recipient1 = 'productb#gmail.com';
var messages1 = threads[i].getMessages();
//var attachment1 = messages1[i].getAttachments();
for (var j = 0; j < messages1.length; j++) {
var body1 = messages1[j].getBody();
messages1[j].forward(recipient1, {
htmlBody: body1
});
}
}
}
}
I guess I did something wrong with the variables, but I'm a total beginner with Google Apps Scripts, and I already spent more than 10 hours on this, with no success.
I got no email transferred with this, but the execution gives no error. And I was wondering if the var label = "product-related"; should be replaced with something else?
I will be grateful if you could give me some help on this!

I made it work (I think)! :)
function testforward1() {
var threadsa = GmailApp.search('label: product-related label: product-a');
for (var i = 0; i < threadsa.length; i++) {
var recipient = 'producta#gmail.com';
var messages = threadsa[i].getMessages();
for (var j = 0; j < messages.length; j++) {
var body = messages[j].getBody();
messages[j].forward(recipient,{htmlBody: body});
}
}
var threadsb = GmailApp.search('label: product-related label: product-b');
for (var i = 0; i < threadsb.length; i++) {
var recipient = 'productb#gmail.com';
var messages = threadsb[i].getMessages();
for (var j = 0; j < messages.length; j++) {
var body = messages[j].getBody();
messages[j].forward(recipient,{htmlBody: body});
}
}
}
Now I still have a few more functions to implement, but the basic forwarding function works, and it's the most important.

Can't get JSON string's element

I'm totally new to javascript and I'm trying to display an array of object which is stored in local storage using javascript and html and display each element of the JSON string in td tag of a table
In studentList.js file, first of all, I create a Student object:
function Student(id, name, birthDay, gender, falcuty, point ) {
this.id = id
this.name = name
this.birthDay = birthDay
this.gender = gender
this.falcuty = falcuty
this.point = point
}
var table = document.getElementById("table-stud")
And an array of 'Student' object:
var collection = [];
collection.push(new Student("01","A","20/11/1998","M","IT","8.0"),
new Student("02","B","2/1/1998","F","IT","8.0"),
new Student("03","C","9/9/1997","F","CK","8.8"))
Save student in local storage:
function saveStudent(collection) {
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = JSON.stringify(collection[i])
console.log(studentObjectSerialiseData)
window.localStorage.setItem("student"+i, studentObjectSerialiseData)
}
}
Display students:
function getStudents() {
console.log(Student.length)
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student"+i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for(var j = 0; j < Student.length; j++) {
var td = document.createElement("td")
td.innerText = temp[j]
tr.appendChild(td)
}
table.appendChild(tr)
}
}
saveStudent(collection);
getStudents();
In HTML file, I called studentList.js file and added id to the 'table' tag, the localStorage worked perfectly but when I want to display, this happened:
id Name birthDay Gender Falcuty Point
undefined undefined undefined undefined undefined undefined
undefined undefined undefined undefined undefined undefined
undefined undefined undefined undefined undefined undefined
Please help me solve this problem!

The problem is mostly on the parts you're trying to loop over the keys of Student. Utilize Object.keys for achieving it instead:
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for (var j = 0; j < Object.keys(temp).length; j++) {
var td = document.createElement("td")
console.log(temp)
td.innerText = temp[Object.keys(temp)[j]]
tr.appendChild(td)
}
table.appendChild(tr)
}
}
For a working example, see this snippet: https://jsbin.com/koqikiquzu/1/edit?html,js,output (Tried to embed through SO's own playground, but using localStorage is a bit tricky here).

temp in getStudents() is an object so you need to loop over that too.
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for (var j = 0; j < Student.length; j++) {
for(var i in temp) {
var td = document.createElement("td")
td.innerText = temp[i]
tr.appendChild(td)
}
}
table.appendChild(tr)
}
}

You can get the result by using for in loop inside j for loop and appends to tr tag if j and i are equal.
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i);
var temp = JSON.parse(studentObjectSerialiseData);
var tr = document.createElement("tr");
for (var j = 0; j < Student.length; j++) {
for (x in temp) {
if (j == i) {
var td = document.createElement("td");
td.innerText = (temp)[x];
tr.appendChild(td);
}
}
}
table.appendChild(tr)
}
}

Access Student in a for in loop to get the keys.
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student"+i)
var temp = JSON.parse(studentObjectSerialiseData)
console.log(temp);
for(var j in Student) {
console.log(temp[j]) ;
}
}

.remove is not function How to fix?

var dbRefObjectHis = firebase.database().ref('Box1').child('history');
dbRefObjectHis.on('value',gotData, errData);
function gotData(data) {
var ref = d3.selectAll('.His');
for (var i = 0; i < ref.length; i++){
ref[i].remove();
}
var history = data.val();
var keys = Object.keys(history);
for (i = 0; i < keys.length; i++) {
var k = keys[i];
var humidity = history[k].humidity;
var temperature = history[k].temperature;
$('.His').append('Humidity:' + humidity + 'Temperature:' + temperature );
}

This happens when the element you are trying to remove is not a removable Node.
try replacing
for (var i = 0; i < ref.length; i++){
ref[i].remove();
}
with
ref.forEach(function(e) {
e.remove();
});

How do I reverse results of a table row with Javascript from PHP

I'd like to be able to reverse the results of a table returned from a PHP database with javascript, but can't seem to figure out how to get the reverse(); method to work. I'd appreciate any help you could give me.
This is my Javascript:
function title()
{
var sortedOn = 0;
var display = document.getElementById("table");
var list = new Array();
var tableLength = display.rows.length;
for(var i = 1; i < tableLength; i++){
var row = display.rows[i];
var info = row.cells[0].textContent;
list.push([info,row]);
}
list.sort();
var listLength = list.length;
for(var i = 0; i < listLength; i++) {
display.appendChild(list[i][1]);
}
This is in my html table:
<th>Title</th>

function reverse(){
var display = document.getElementById("table");
var length = display.rows.length;
for(var i = 0; i < length; i++)
{
display.appendChild(
display.removeChild(display.rows[length - i - 1])
);
}
}
Here's the fiddle

Show the first row of the table in alert message using javascript

I want to show the first row of the table in alert message at a time
function GetCellValues() {
var rows = document.getElementsByTagName('tr');
for (var c = 0; c < rows.length; c++) {
var row = rows[c];
var inputs = row.getElementsByTagName('input');
for (var k = 0; k < inputs.length; k++) {
alert(inputs[k].value);
//here I want some code to show the first table row at a time.
}
}
}
window.onload = function () {
makeTable();
};

Try This,
function GetCellValues() {
var rows = document.getElementsByTagName('tr');
for (var c = 0; c < rows.length; c++) {
var row = rows[c];
var inputs = row.getElementsByTagName('input');
var inputValList=[];
for (var k = 0; k < inputs.length; k++) {
// alert(inputs[k].value);
inputValList.push(inputs[k].value);
}
if(inputValList.length>0){
alert(inputValList);
}
}
}
I just hope...this will solve your problem.

Categories

Resources