Develop Reference

Toggling JS button back and forth

my toggle button in javascript seems to work fine in turning on lightmode from default darkmode by running a function that changes the CSS. However, when I flip the button again, it does not change. This is somewhat expected since there's no reason it would change. How would I go about switching it back?
Button HTML:
<label for="ID_HERE" class="toggle-switchy" >
<input checked type="checkbox" id="ID_HERE">
<span class="toggle" onclick="lightmode();"></span>
<span class="switch"></span>
</span>
</label>
JS for button:
function lightmode() {
const bodyChanges = document.querySelectorAll('.margin_body');
for (let i = 0; i < bodyChanges.length; i++) {
bodyChanges[i].style.background = 'white';
}
/*const bodyChanges = document.querySelectorAll('.margin_body');
for (let i = 0; i < bodyChanges.length; i++) {
bodyChanges[i].style.backgroundImage = '';
} */
const paraChanges = document.querySelectorAll('.paragraph');
for (let i = 0; i < paraChanges.length; i++) {
paraChanges[i].style.color = 'black';
}
const topTitleChanges = document.querySelectorAll('.toptitle');
for (let i = 0; i < topTitleChanges.length; i++) {
topTitleChanges[i].style.color = 'black';
}
const alphabetSChanges = document.querySelectorAll('.AlphabetS');
for (let i = 0; i < alphabetSChanges.length; i++) {
alphabetSChanges[i].style.color = 'black';
}
const arowanaContainerChanges = document.querySelectorAll('.arowanacontainer');
for (let i = 0; i < arowanaContainerChanges.length; i++) {
arowanaContainerChanges[i].style.background = 'white';
}
const fishContainerChanges = document.querySelectorAll('.fishcontainer');
for (let i = 0; i < fishContainerChanges.length; i++) {
fishContainerChanges[i].style.background = 'white';
}
const articleContainerChanges = document.querySelectorAll('.articlescontainer');
for (let i = 0; i < articleContainerChanges.length; i++) {
articleContainerChanges[i].style.background = 'white';
}
const sideTextChanges = document.querySelectorAll('.sidetext');
for (let i = 0; i < sideTextChanges.length; i++) {
sideTextChanges[i].style.color = 'black';
}
const topMenuChanges = document.querySelectorAll('.topmenu');
for (let i = 0; i < topMenuChanges.length; i++) {
topMenuChanges[i].style.background = '#fff2f2';
}
const h3Changes = document.querySelectorAll('h3');
for (let i = 0; i < h3Changes.length; i++) {
h3Changes[i].style.background = '#fff2f2';
}
const articlePageChanges = document.querySelectorAll('.articlepage');
for (let i = 0; i < articlePageChanges.length; i++) {
articlePageChanges[i].style.color = 'black';
}
const articleTeaserChanges = document.querySelectorAll('.articleteaser');
for (let i = 0; i < articleTeaserChanges.length; i++) {
articleTeaserChanges[i].style.color = 'black';
}
/*const buttonTextChanges = document.querySelectorAll('.button_text');
for (let i = 0; i < buttonTextChanges.length; i++) {
buttonTextChanges[i].style.color = '#0C0C0C';*/
const box2Changes = document.querySelectorAll('.box2');
for (let i = 0; i < box2Changes.length; i++) {
box2Changes[i].style.color = 'rgb(245, 245, 245)';
}
const box3Changes = document.querySelectorAll('.box3');
for (let i = 0; i < box3Changes.length; i++) {
box3Changes[i].style.color = 'rgb(245, 245, 245)';
}
const projectPhoto1Changes = document.querySelectorAll('.projectphoto1');
for (let i = 0; i < projectPhoto1Changes.length; i++) {
projectPhoto1Changes[i].style.backgroundImage = 'linear-gradient(to bottom, #Fdfcfa 50%, lightgrey 50%)';
}
const section1Changes = document.querySelectorAll('.section1');
for (let i = 0; i < section1Changes.length; i++) {
section1Changes[i].style.backgroundColor = '#fff2f2';
}
const section1textChanges = document.querySelectorAll('.section1text');
for (let i = 0; i < section1textChanges.length; i++) {
section1textChanges[i].style.color = 'black';
}
const section1smalltextChanges = document.querySelectorAll('.section1smalltext');
for (let i = 0; i < section1smalltextChanges.length; i++) {
section1smalltextChanges[i].style.color = 'black';
}
const button_textChanges = document.querySelectorAll('.button_text');
for (let i = 0; i < button_textChanges.length; i++) {
button_textChanges[i].style.color = 'black';
}
const polygonfrontChanges = document.querySelectorAll('.polygonfront');
for (let i = 0; i < polygonfrontChanges.length; i++) {
polygonfrontChanges[i].style.fill = '#fff2f2';
}
const bgChanges = document.querySelectorAll('.bg');
for (let i = 0; i < bgChanges.length; i++) {
bgChanges[i].style.backgroundImage = 'url(".jpg")';
}
const bg2Changes = document.querySelectorAll('.bg2');
for (let i = 0; i < bg2Changes.length; i++) {
bg2Changes[i].style.backgroundImage = 'url(".jpg")';
}
const bg3Changes = document.querySelectorAll('.bg3');
for (let i = 0; i < bg3Changes.length; i++) {
bg3Changes[i].style.backgroundImage = 'url(".jpg")';
}
}

When clicking, you should check the input status to know if the mode should toggle to light or dark mode.
<span class="toggle" onclick="toggle()"></span>
function toggle() {
if(document.getElementById("ID_HERE").checked)
lightmode()
else
darkmode()
}

populate js table with json data

can you please please help me with something? i'm trying to create a table based on the information i receive from an endpoint. i've managed to create the structure of the table.
<div class="available-movies-component">
<div class="color-code-wrapper">
<span class="title">Key</span>
</div>
<div class="table-wrapper">
</div>
</div>
const API = 'https://raw.githubusercontent.com/alex-cenusa/movies/master/movies.json';
async function getData() {
try {
let response = await fetch(API);
if (response.status == 200) {
let data = await response.json();
return data;
} else {
throw new Error(response.status);
}
} catch (error) {
console.log(error);
}
}
getData().then((data) => {
const KEY = data.data.key.forEach((key) => {
const LEGEND_WRAPPER = document.querySelector('.color-code-wrapper');
const UNIT_TYPE = key.type;
const KEY_BTN = document.createElement('button');
KEY_BTN.innerText = UNIT_TYPE;
const KEY_BTN_COLOR = key.color;
KEY_BTN.style.backgroundColor = KEY_BTN_COLOR;
LEGEND_WRAPPER.appendChild(KEY_BTN);
});
const TABLE_WRAPPER = document.querySelector('.table-wrapper');
let col = [];
for (let i = 0; i < data.data.movies.length; i++) {
for (let key in data.data.movies[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
const table = document.createElement('table');
let tr = table.insertRow(-1); // table row.
for (let i = 0; i < col.length; i++) {
let th = document.createElement('th'); // table header.
th.innerHTML = col[i];
tr.appendChild(th);
}
for (let i = 0; i < data.data.movies.length; i++) {
tr = table.insertRow(-1);
for (let j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = data.data.movies[i][col[j]];
}
}
TABLE_WRAPPER.appendChild(table);
});
and here is my jsfiddle https://jsfiddle.net/nopqxdvz/
what i need to do now, and i need some help with is to create a button inside every row corresponding to Type/Use column, with the name inside the object and for the background-color of the button to have the hex code inside the object. and for the Rental, to have a link with the href of the url provided if the url exists. right now i'm getting [object Object]
thanks in advance for every help i can get!

https://jsfiddle.net/cjr6sfpb/2/ here solution
Code i changed added button styling :
// added this mergeObjectValues function to handle.
let button_style= {
"Comedy" : "blue-button",
"Thriller":"pink-button",
"Alternative":"green-button",
"Documentary":"red-button"
}
function mergeObjectValues(key,obj,tablecell){
let merge_string = [];
let button;
for (let i = 0; i < obj.length; i++) {
if(merge_string.indexOf(obj[i][key]) == -1)
{
merge_string.push(obj[i][key]);
if (key == 'type'){
button = document.createElement('button');
button.classList.add(button_style[obj[i][key]]);
button.innerHTML = obj[i][key];
tablecell.append(button);
}
else{
merge_string.push(obj[i][key]);
tablecell.innerHTML = obj[i][key];
}
}
}
return tablecell;
}
const table = document.createElement('table');
let tr = table.insertRow(-1); // table row.
for (let i = 0; i < col.length; i++) {
let th = document.createElement('th'); // table header.
th.innerHTML = col[i];
tr.appendChild(th);
}
let col_key ={
"Type/Use" : "type",
"Rental" : "name"
}
for (let i = 0; i < data.data.movies.length; i++) {
tr = table.insertRow(-1);
for (let j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var tablecontent = data.data.movies[i][col[j]];
console.log(col);
console.log(tablecontent instanceof Array);
if( tablecontent instanceof Array){
tabCell = mergeObjectValues(col_key[col[j]],tablecontent,tabCell);
}else{
tabCell.innerHTML = tablecontent;
}
}
}

If and else both executed in nested loop

In google apps spreadsheet I am parsing json and filling up cells. After seting value to cell I check if the row has this value and if it does I go to the next cell and set new value, then I check the second value and so on. But something goes wrong and the if and else are both executing..
var customfields = SpreadsheetApp.openById('id').getSheetByName('Form').getRange('J25').getValue();
if (customfields == true) {
var jj = 2;
var ii = 1;
for each(item in data) {
var size = Object.keys(data[k].customfields).length;
if (size == 0) {
k = k + 1;
continue;
}
Logger.log(k)
for (j = 0; j < size; j++) {
var vl = data[k].customfields[j].value;
var nm = data[k].customfields[j].name;
var rng = SpreadsheetApp.openById('id').getSheetByName('Data').getMaxColumns();
for (var cn = 0; cn <= rng; cn++) {
var dat = sheet.getRange(1, cn).getValue();
Logger.log("IF STATEMENT")
if (dat == nm) {
sheet.getRange(ii, cn).setValue(nm);
} else {
sheet.getRange(ii, br).setValue(nm);
}
}
Logger.log(nm)
br = br + 1;
}
k = k + 1;
}
}

How to Escape comma(,) in string selected value javascript?

Hello i am trying to escape comma(,) in a string.and i am using split and join when i select multiple values.But in some cases within my selection i have comma(,) so it is considering that as different string.How i can escape comma in selection.
What i am trying is
$('#info').on('rowselect', function (event) {
var rows = $("#info").jqxGrid('selectedrowindexes');
var selectedvalue = new Array();
if (rows != "") {
for (var m = 0; m < rows.length; m++) {
var row = $("#info").jqxGrid('getrowdata', rows[m]);
selectedvalue [selectedvalue .length] = row;
}
var len = selectedvalue .length;
var data = "";
for (var i = 0; i < len; i++) {
data += selectedvalue[i].fieldvale +",";
}
var newStr = data.substring(0, data.length - 1);
var finalOutput = newStr.split(',');
var fieldvale = "" + finalOutput.join("','") + "";
GetGidbyplots($('#ddlIndustrialarea').find('option:selected').text(), fieldvale);
}
});
My selection values are like :'10','11','12','117,142&141'

My working Solution is
$('#info').on('rowselect', function (event) {
var rows = $("#info").jqxGrid('selectedrowindexes');
var selectedvalue = new Array();
if (rows != "") {
for (var m = 0; m < rows.length; m++) {
var row = $("#info").jqxGrid('getrowdata', rows[m]);
selectedvalue [selectedvalue .length] = row;
}
var len = selectedvalue .length;
var data = "";
for (var i = 0; i < len; i++) {
data += selectedvalue[i].fieldvale +":";
}
var newStr = data.substring(0, data.length - 1);
var finalOutput = newStr.split(':');
var fieldvale = "" + finalOutput.join("','") + "";
GetGidbyplots($('#ddlIndustrialarea').find('option:selected').text(), fieldvale);
}
});

Gridview search filter with paging

function Search_Gridview(strKey, strGV) {
var strData = strKey.value.toLowerCase().split(" ");
var tblData = document.getElementById(strGV);
var rowData;
for (var i = 1; i < tblData.rows.length; i++) {
rowData = tblData.rows[i].innerHTML;
var styleDisplay = 'none';
for (var j = 0; j < strData.length; j++) {
if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
styleDisplay = '';
else {
styleDisplay = 'none';
break;
}
}
tblData.rows[i].style.display = styleDisplay;
}
}
i have a gridview and i want to add search filter on it. This code works correctly but search just one page not all rows. How i make this, i discovered but i didn't solve this.