Develop Reference

Send a grid as json

I'm relatively new to the world of JavaScript. I create a grid in which I can select any cells.
Now I would like to send all cells as binary with a Json document to the backend. For this purpose, an unselected cell should have a 0 and a selected one should have a 1. I orientate myself on Conway's Game of Life. I've been at it for 2 days now and don't know how best to implement it. Does anyone have an idea?
Here is my code to create the grid
var rows = 10;
var cols = 10;
var grid = new Array(rows);
var nextGrid = new Array(rows);
var startButton = document.getElementById('start');
startButton.addEventListener('click', event => {
initialize()
})
function initializeGrids() {
for (var i = 0; i < rows; i++) {
grid[i] = new Array(cols);
nextGrid[i] = new Array(cols);
}
}
function copyAndResetGrid() {
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
grid[i][j] = nextGrid[i][j];
}
}
}
// Initialize
function initialize() {
createTable();
initializeGrids();
}
// Lay out the board
function createTable() {
var gridContainer = document.getElementById('gridContainer');
if (!gridContainer) {
// Throw error
console.error("Problem: No div for the drid table!");
}
var table = document.createElement("table");
for (var i = 0; i < rows; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < cols; j++) {
var cell = document.createElement("td");
cell.setAttribute("id", i + "_" + j);
cell.setAttribute("class", "dead");
cell.onclick = cellClickHandler;
tr.appendChild(cell);
}
table.appendChild(tr);
}
gridContainer.appendChild(table);
}
function cellClickHandler() {
var rowcol = this.id.split("_");
var row = rowcol[0];
var col = rowcol[1];
var classes = this.getAttribute("class");
if(classes.indexOf("live") > -1) {
this.setAttribute("class", "dead");
grid[row][col] = 0;
} else {
this.setAttribute("class", "live");
grid[row][col] = 1;
}
}

nested for loop breaks parent loop

function next() {
document.getElementById('config').setAttribute("hidden","true");
document.getElementById('formdiv').removeAttribute("hidden");
mixer();
}
function mixer() {
var x = 0;
for (var i = 0; i < parseInt(document.getElementById('nm').value); i++) {
var title = document.createElement("P");
title.style = "font-family:verdana;font-size:18px;";
title.id = "p"+String(i);
document.getElementById("myForm").appendChild(title);
document.getElementById("p"+String(i)).innerText = "Enter the amount of mixer number "+String(i+1);
var mixers = document.createElement("INPUT");
mixers.type = "text";
mixers.id = "m"+String(i);
mixers.size = '1';
document.getElementById("myForm").appendChild(mixers);
var options = ['Select a unit','ml','L','UK Pints','US Pints'];
var dropdown = document.createElement("SELECT");
dropdown.id = "s"+String(x);
document.getElementById("myForm").appendChild(dropdown);
/*for (j = 0; i < options.length; j++) {
var optiontag = document.createElement("OPTION");
optiontag.value = options[j];
optiontag.innerText = options[j];
document.getElementById("s"+String(x)).appendChild(optiontag);
}*/
x += 1;
}
}
this function creates the output when passed mn = 3
https://imgur.com/Hhv6fVE
when i un-comment the nested loop at the bottom, it outputs this
https://imgur.com/80juxgX
it should output the same as the first image but with the options for the
dropdown menus

.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 to create more elements for the entered value in a textboxes in javascript?

I use for loop to create 3 textboxes with it's ids in javascript.. if I enter numbers on each text box I want to display same number of paragraphs element under each text box..
I have a problem: each textbox affected when i enter value in the other text boxes..
There is my codes:
for (i = 0; i < 3; i++) {
var tx = document.createElement('input');
tx.setAttribute('id', i);
tx.onblur = function () {
for (i = 0; i < 3; i++) {
var no = document.getElementById(i).value;
num = Number(no);
var d = document.getElementById('di' + i);
for (x = 0; x < num; x++) {
var tx1 = document.createElement('p');
tx1.innerHTML = " p" + x;
d.appendChild(tx1);
}
}
};
var div1 = document.createElement('div');
div1.setAttribute('id', "di" + i);
var div = document.getElementById('div1');
div.appendChild(tx);
div.appendChild(div1);
}

There are issues in code.
1)
var div = document.getElementById('div1');
div.appendChild(tx);
The code is asking for div with ID div1 which is never appended to DOM hence it returns null
thus null.appendChild(tx) fails.
Thanks
Added JSFiddle. If this is what you are trying to make..
http://jsfiddle.net/khm63wte/

just change your code, create a div on your document <div id="t"></div>, in your javascript create div first, then your input and append them to the document here is a working code
for (i = 0; i < 3; i++) {
var div1 = document.createElement('div');
div1.setAttribute('id', "di" + i);
document.getElementById('t').appendChild(div1)
var tx = document.createElement('input');
tx.setAttribute('id', i);
document.getElementById("di"+i).appendChild(tx);
tx.onblur = function () {
for (i = 0; i < 3; i++) {
var no = document.getElementById(i).value;
num = Number(no);
var d = document.getElementById('di' + i);
for (x = 0; x < num; x++) {
var tx1 = document.createElement('p');
tx1.innerHTML = " p" + x;
d.appendChild(tx1);
}
}
};
}

Replace array elements with onclick

I am trying to display new list of shuffled array on onclick but my code is just appending the new shuffled array below the previous list. My code is:
function shuffleArray() {
var array = ['1','2','3','4'];
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
for (i=0;i<array.length;i++) {
var span = document.createElement('span');
span.innerHTML = array[i];
span.onclick = shuffleArray; //calls the same function
var div = document.createElement('div');
div.appendChild(span);
document.body.appendChild(div);
}
}
Current output:
2
1
4 // if I click here then results gets appended below
3
3
2
4
1 // if I click here then results gets appended below
2
1
4
3 // and so on
Desired output: I want the page content to get updated with new array elements, each time I click some array element.

What follows is the simple version, but this is prone to memory leaks because you are using .onclick and are not removing those references before destroying the elements with .innerHTML='';
var wrapping_div = document.createElement('div');
document.body.appendChild(wrapping_div);
function shuffleArray() {
var array = ['1','2','3','4'];
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
wrapping_div.innerHTML = '';
for (i=0;i<array.length;i++) {
var span = document.createElement('span');
span.innerHTML = array[i];
span.onclick = shuffleArray; //calls the same function
var div = document.createElement('div');
div.appendChild(span);
wrapping_div.appendChild(div);
}
}
shuffleArray();
A better way is http://jsfiddle.net/NCUDv/2/:
var wrapping_div = document.createElement('div');
document.body.appendChild(wrapping_div);
function shuffleArray() {
var i, j, temp, span, div,
c = wrapping_div.childNodes,
l = c.length,
array = ['1','2','3','4'],
k = array.length;
for (i=k-1; i>=0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
for (i=l-1; i>=0; i-- ) {
c[i].firstChild.removeEventListener('click', shuffleArray);
wrapping_div.removeChild(c[i]);
}
for (i=0; i<k; i++) {
span = document.createElement('span');
span.innerHTML = array[i];
span.addEventListener('click', shuffleArray);
div = document.createElement('div');
div.appendChild(span);
wrapping_div.appendChild(div);
}
}
shuffleArray();

var container=document.createElement ("div");
document.body.appendChild (container);
function shuffleArray() {
var array = ['1','2','3','4'], l=array.length;
var i,j,tmp;
for (i = l - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
var span;
container.innerHTML="";
for (i=0;i<l;i++) {
span = document.createElement('span');
span.innerHTML = array[i];
span.onclick = shuffleArray; //calls the same function
container.appendChild(span);
}
}
edited
var container=document.createElement ("div");
document.body.appendChild (container);
function shuffleArray() {
var array = ['1','2','3','4'], l=array.length;
var i,j,tmp;
for (i = l - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
var p;
container.innerHTML="";
for (i=0;i<l;i++) {
p = document.createElement('p');
p.style.margin="0px";
p.innerHTML = array[i];
p.onclick = shuffleArray; //calls the same function
container.appendChild(span);
}
}