Develop Reference

Get Elements of a HTML div

i am building a configuration utility and having a problem with the js.
I am very new to javascript so i apologize in advance for the request for help.
in my HTML i have multiple divs that are structured like this:
<div id="options" class="opt">
<h2 id="optionName">Power Button Options</h2>
<label for="pwrAvl">Power Button Available</label>
<input type="checkbox" name="pwrAvl" id="pwrAvl"/ >
<br /><br />
<label for="pwrLabel">Power Button Label</label>
<input type="text" name="pwrLabel" id="pwrLabel"/ >
<br /><br />
<label for="pwrGraphic">Power Button Graphic</label>
<select name="pwrGraphic" id="pwrGraphic">
<option value="" selected>
----- Please select a graphic -----
</option>
<option value="power.jpeg">Power</option>
<option value="light.jpg">Light</option>
<option value="help.jpg">Help</option>
<option value="camera.jpg">Camera</option>
</select>
<br /><br />
<label for="pwrIndex">Power Button Menu Index</label>
<input type="text" name="pwrIndex" id="pwrIndex"/ >
</div>
i have between 5-10 divs that will all be structured the same way just with different labels and input values.
i tried adding all the divs to an array and then enumerate through the array but that did not work.
here is my js file what i have tried:
{
const bar = document.querySelector('options');
var opts = document.querySelectorAll('.opt')
var option = {}
var nCount = $(".opt").length;
var divArray = [];
var optName = document.getElementById('optionName');
function addArray() {
for (let i = 0; i < nCount; i++) {
divArray[i] = opts[i];
}
}
const saveBtn = document.getElementById('submit');
saveBtn.addEventListener('click', (e) => {
putSettings();
});
function SystemOptions(optionName, optionAvailable, optionLabel, optionGraphic, optionIndex) {
this.optionName = optionName;
this.optionAvailable = optionAvailable;
this.optionLabel = optionLabel;
this.optionGraphic = optionGraphic;
this.optionIndex = optionIndex;
}
async function putSettings() {
let info = {
"SystemConfiguration": {
"Options": [],
}
}
addArray()
console.log(`Divarray = ${divArray.length}`)
//The following would never work
opts.forEach(label => {
$('[id=optionName]').each(function () {
var atId = this.id;
console.log(`Searched Name = ${atId.innerHTML}`)
});
});
divArray.forEach(element => {
var name = divArray.getElementById('optionName').innerHTML;
console.log(name)
option = new SystemOptions(name, "yes", "Help Label", "Option.jpeg", 3);
info.SystemConfiguration.Options.push(option);
});
for (let i = 0; i < nCount; i++) {
// console.log(` ${$(".opt").find("h2[id=optionName").each.text()}`)
console.log(` ${divArray[i].querySelector(optName[i]).innerHTML}`)
}
// i did this once to see if the SystemsOptions function worked
// obviosly it added the same data 7 times but i was trying to be sure the function worked and created the json objects
for (let i = 1; i < nCount; i++) {
option = new SystemOptions("Power", "yes", "Help Label", "Option.jpeg", 3);
info.SystemConfiguration.Options.push(option);
}
let data = JSON.stringify(info, 0, 4);
console.log(data);
}
}
any help would be greatly appreciated.

not the most eloquent but this does work.
sure there are better ways:
var opts = document.querySelectorAll('.opt');
var option = {};
const saveBtn = document.getElementById('submit');
saveBtn.addEventListener('click', (e) => {
putSettings();
});
function SystemOptions(optionName, optionAvailable, optionLabel, optionGraphic, optionIndex) {
this.optionName = optionName;
this.optionAvailable = optionAvailable;
this.optionLabel = optionLabel;
this.optionGraphic = optionGraphic;
this.optionIndex = optionIndex;
}
async function putSettings() {
let info = {
"SystemConfiguration" :{
"Options": [],
}
};
for(var opt of opts)
{
var name = opt.getElementsByTagName('h2')[0].innerHTML;
let isAvailable = opt.getElementsByTagName("input")[0].value;
let optLabel = opt.getElementsByTagName("input")[1].value;
let optGraphic = opt.getElementsByTagName('select')[0].value;
let index = opt.getElementsByTagName("input")[2].value;
option = new SystemOptions(name, isAvailable, optLabel, optGraphic, index);
info.SystemConfiguration.Options.push(option);
}
console.log(`Number of options = ${opts.length}`)
let data = JSON.stringify(info, 0, 4);
console.log(data);
};

Custom JS selector is not taking effect at ngModel

I have created a custom selector system with JS trying to make it look better. It looks perfect and changes the selector when I make it visible, but it doesn't changes my ngModel at my Angular component, keeping it at undefined. Here is my JS and HTML.
<div class="form__select">
<select id="gender" name="gender" #gender="ngModel" [(ngModel)]="user.occupation">
<option value="0">Selecciona un género</option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
<option value="3">Otro</option>
</select>
</div>
load_selector() {
const selectors: HTMLCollectionOf<Element> = document.getElementsByClassName("form__select");
document.addEventListener("click", MainScript.close_selector);
[].forEach.call(selectors, (selector) => {
const select: any = selector.getElementsByTagName("select")[0];
let replaced: HTMLElement = document.createElement("DIV");
replaced.setAttribute("class", "form__select-box");
replaced.innerHTML = select.options[select.selectedIndex].innerHTML;
selector.appendChild(replaced);
let option_parent: HTMLElement = document.createElement("DIV");
option_parent.setAttribute("class", "form__select-items");
[].forEach.call(select.options, (options) => {
let option: HTMLElement = document.createElement("DIV");
option.setAttribute("class", "form__select-item");
option.innerHTML = options.innerHTML;
option.addEventListener("click", function () {
const parent_node: any = (<HTMLElement>(<HTMLElement>(<HTMLElement>this.parentNode)).parentNode).getElementsByTagName("select")[0];
let previous_sibling: any = this.parentNode.previousSibling;
for (let i = 0; i < parent_node.length; i++) {
if (parent_node.options[i].innerHTML == this.innerHTML) {
parent_node.selectedIndex = i;
previous_sibling.innerHTML = (<HTMLElement>this).innerHTML;
let actual_selected = (<HTMLElement>(<HTMLElement>this.parentNode)).getElementsByClassName("form__select-item--selected");
[].forEach.call(actual_selected, (node) => {
node.classList.remove("form__select-item--selected");
node.classList.add("class", "form__select-item");
});
this.classList.add("form__select-item--selected");
}
}
previous_sibling.click();
});
option_parent.appendChild(option);
});
selector.appendChild(option_parent);
replaced.addEventListener("click", function (e) {
e.stopPropagation();
(<any>this).nextSibling.classList.toggle("form__select-items--active");
(<any>this).classList.toggle("form__select-box--active");
});
});
}

How to obtain one by one in IndexedDB

I am trying to obtain, one by one, the elements in IndexedDB. My target is:
Obtain the first element[key].verbo and adjetivo and sustativo and print in html, to see in the web.
Wait to the user insert a one sentence in what includes these words and click check.
Obtain the second element[key].verbo and adjetivo and sustativo and print in html, to see in the web.
The same as 2.
And continue in the same way.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IndexedDB: Local Database with HTML5</title>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var dataBase = null;
var pulsador = false;
function startDB() {
dataBase = indexedDB.open('db', 1);
dataBase.onupgradeneeded = function (e) {
var active = dataBase.result;
var object = active.createObjectStore("people", {keyPath: 'id', autoIncrement: true});
object.createIndex('by_adjetivo', 'adjetivo', {unique: false});
object.createIndex('by_verbo', 'verbo', {unique: true});
};
dataBase.onsuccess = function (e) {
alert('Base de datos cargada');
loadAll();
};
dataBase.onerror = function (e) {
alert('Error al cargar Base de datos');
};
}
function add() {
var active = dataBase.result;
var data = active.transaction(["people"], "readwrite");
var object = data.objectStore("people");
var request = object.put({
verbo: document.querySelector("#verbo").value,
adjetivo: document.querySelector("#adjetivo").value,
sustantivo: document.querySelector("#sustantivo").value
});
request.onerror = function (e) {
alert(request.error.adjetivo + '\n\n' + request.error.message);
};
data.oncomplete = function (e) {
document.querySelector('#verbo').value = '';
document.querySelector('#adjetivo').value = '';
document.querySelector('#sustantivo').value = '';
alert('Object successfully added');
loadAll();
};
}
function loadAll() {
var active = dataBase.result;
var data = active.transaction(["people"], "readonly");
var object = data.objectStore("people");
var elements = [];
object.openCursor().onsuccess = function (e) {
var result = e.target.result;
if (result === null) {
return;
}
elements.push(result.value);
result.continue();
};
data.oncomplete = function () {
var outerHTML = '';
for (var key in elements) {
v=elements[key].verbo;
outerHTML+='\n\ <tr>\n\<td>'
+"\t"+"Verbo: \t"+ elements[key].verbo + '</td>\n\<td>'
+"\t"+"Adjetivo: \t"+ elements[key].adjetivo + '</td>\n\ <td>'
+"\t"+"Sustantivo: \t"+ elements[key].sustantivo
+ '</td>\n\ </tr>';
document.querySelector("#elementsList").innerHTML = outerHTML; // I want print one verbo,adjetivo and sustantivo
gradeTest(elements[key].verbo,elements[key].adjetivo,elements[key].sustantivo); //Before, i want
}
elements = [];
};
}
function gradeTest(p1,p2,p3) {
var a1 = document.getElementById('q1').value.toLowerCase();
if(a1.includes(p1) )
if (a1.includes(p2))
if (a1.includes(p3)) {
alert('They are equal');//and we can continue to two elements[key].
}
}
</script>
</head>
<body onload="startDB();">
<input type="text" id="verbo" placeholder="Enter verbo" />
<input type="text" id="adjetivo" placeholder="Enter adjetivo" />
<input type="text" id="sustantivo" placeholder="Enter sustantivo" />
<button type="button" onclick="add();">Save</button>
<hr>
<div id="elements">
<table>
<caption>g</caption>
<thead>
<tr>
<th>Verbo</th>
<th>Adjetivo</th>
<th>Sustantivo</th>
</tr>
</thead>
<tbody id="elementsList">
<tr>
<td colspan="3">Not elements to show</td>
</tr>
</tbody>
<tr>
<td>introduce one verb,adjetive and sustantive</td>
<td><input name="q1" type="text" id="q1" size="30" maxlength="30"/></td>
</tr>
<tr>
<td><input name="submit" type="button" onClick="gradeTest()" value="check"/></td>
</tr>
</table>
</div>

Try creating an array of the items before hand and using a global variable to track the position in the items array. For example:
// Declare a global variable to hold the items
var items = [];
// Open a connection and query for items
function fillItems() {
var openRequest = indexedDB.open('mydb, 1);
openRequest.onsuccess = onOpenConnection;
}
// Query the store for all items
function onOpenConnection(openRequestEvent) {
if(openRequestEvent.type !== 'success' ) {
console.log('connection error');
return;
}
var connection = openRequestEvent.target.result;
var transaction = connection.transaction('mystorename');
var store = transaction.objectStore('mystorename');
var request = store.openCursor();
request.onsuccess = addNextItemFromDatabase;
}
// Add the item at the cursor's current position to the items array,
// and then request the cursor to advance by 1
function addNextItemFromDatabase(event) {
var cursor = event.target.result;
if(cursor) {
items.push(cursor.value);
cursor.continue();
}
}
// When page is loaded, fill the items array
fillItems();
// Global variable that keeps track of index into items array
var currentItemPosition = -1;
// Get the button the user clicks
var button = document.getElementById('mybutton');
// Attach a click listener function that is called whenever the
// button is clicked
button.onclick = function(event) {
// Increment the current position by 1 each time the button
// is clicked
currentItemPosition = currentItemPosition + 1;
// Check if in bounds
if(currentItemPosition >= items.length) {
console.log('out of bounds');
return;
}
// Get the item at the current position
var currentItem = items[currentItemPosition];
console.log(currentItem.verbo);
console.log(currentItem.adjectivo);
// etc..
};

Google Chrome Local Storage Adding Links

So I'm trying to add an option on my options page for people to set 1-3 letters as a link to a website. Currently I'm getting a NaN value for the linkNumber when I run the function.
The Function:
function addLink () {
chrome.storage.local.get('linkNumber', function (x) {
if (x.linkNumber == undefined) {
chrome.storage.local.set({'linkNumber': '0'}, function() {
addLink();
});
} else {
var linkNumberInteger = parseInt(x.linkNumber);
var handle = document.getElementById("short");
var link = document.getElementById("long");
var handleValue = handle.value;
var linkValue = link.value;
var handleNumber = x.linkNumber + '-handle';
var urlNumber = x.linkNumber + '-link';
var objectOne = {};
var objectTwo = {};
objectOne[handleNumber] = x.linkNumber + '-handle';
objectTwo[urlNumber] = x.linkNumber + '-link';
console.log(x.linkNumber);
console.log(handleNumber);
chrome.storage.local.set({handleNumber: handleValue}, function(y) {
console.log(y.handleNumber + ' handle saved');
});
chrome.storage.local.set({urlNumber: linkValue}, function(z) {
console.log(z.handleNumber + ' link saved');
});
var linkNumberIntegerNext = linkNumberInteger++;
var n = linkNumberIntegerNext.toString();
chrome.storage.local.set({'linkNumber': n}, function() {
});
alert('Link Added');
}
});
}
The Html:
<h3 class="option">Add Quick Link:</h3>
<input contenteditable="true" type="text" class="short-quicklink" id="short" maxlength="3">
<span>http://</span><input contenteditable="true" type="text" class="long-quicklink" id="long">
<button class="add">Add Quick Link</button>

if statement counter variable confusion javascript

As a novice in javascript, I am having trouble writing an If statement, with an event happening after the fourth turn. I want the alert to pop up after the user has clicked four options. I added the counter variable "turns" to the output so I can see if it has been counting correctly but it does not.
var question1 = new Array();
var turns = 0;
window.onload = function () {
var eSelect = document.getElementById('question1');
var optOtherReason = document.getElementById('displayresponse');
var options = document.getElementsByTagName("option");
eSelect.onchange = function () {
var li = document.createElement("li");
li.innerHTML = options[eSelect.selectedIndex].innerHTML;
var ol = document.getElementById("appendedtext");
ol.appendChild(li);
question1.push(li.innerHTML);
var x = document.getElementById("display");
x.innerHTML = question1 + turns;
turns + 1;
}
if (eSelect.selectedIndex == 3) {
optOtherReason.style.display = 'block';
turns - 1;
}
if (turns = 4) {
alert("hey your turn is over")
}
}
<select id="question1" name="question">
<option value="x">Reason1</option>
<option value="y">Reason2</option>
<option value="other">Otherreason</option>
<option value="none">None</option>
</select>
<br>
<div id="displayresponse" style="display:none;">If you did not see a choice here, you may search for other sites.</div>
<ol id="appendedtext"></ol>
<div id="display"></div>

To compare two expression you need to use == :
if ( turns == 4)
Also, turns is a variable, so to sum/substract one you should use:
turns += 1
turns -= 1
Or, as pointed out in comments, you could also use:
turns++;
turns--;