Develop Reference

What's wrong in this sortable table? It was working in jsbin but not in vscode

I've been struggling with value inputting into tables and table sorting. Finally I got happy when I got my first project working as inteded in jsbin while writing it, but when I exported it into my VSCode it stopped working. In the snippet initially it works, but after inputting something into the table the sorting stops working. In VSCode while ran on liveserver the table is missing implying that there's something wrong in the js.
This code is based on two examples that I found online and tried to combine them together but I assume they are overlapping each other somehow. Unfortunately I have no idea where to even start looking from.
Also how and where I could insert array.reverse() if I wanted to get reverse sorting?
And I just started learning Javascript, so my knowledge and understanding is really limited. Sorry and thank you.
class Product{
constructor(name, price, count){
this.name = name;
this.price = price;
this.count = count;
}
static get SORT_ORDER_ASC(){
return 0;
}
static get SORT_ORDER_DESC(){
return 1;
}
}
class Shop{
constructor(){
this.products = [];
}
addProduct (product) {
this.products.push(product);
};
deleteProductByName (productName) {
for (let i = 0; i < this.products.length; i++) {
if (this.products[i].name === productName) {
this.products.splice(i, 1);
}
}
};
get totalProductsPrice () {
let totalCost = 0;
for (let i = 0; i < this.products.length; i++) {
totalCost += this.products[i].count * this.products[i].price;
}
return totalCost;
};
sortProductsByPrice (sortOrder) {
let rows = document.querySelectorAll("#shopTable .data");
for(let i = 0; i < rows.length; i++)
{
this.products[i].name = rows.item(i).toString();
console.log(this.products[i].name);
}
if(sortOrder === 0) {
this.products.sort();
this.products.map(t => t.name + " " + t.price).join("\n");
}
else if(sortOrder === 1) {
this.products.sort();
this.products.reverse();
this.products.map(t => t.name + " " + t.price).join("\n");
}
else {
console.log("The parameter is incorrect");
}
};
show() {
let rows = document.querySelectorAll("#shopTable .data");
let tp = document.querySelectorAll("#totalPrice .data");
for (let i = rows.length - 1; i >= 0; i--) {
let e = rows.item(i);
e.parentNode.removeChild(e);
}
if(document.getElementById("totalPrice") !== null){
document.getElementById("totalPrice").remove();
}
//tp.parentNode.removeChild(tp);
let table = document.getElementById("shopTable");
for (let i = 0; i < this.products.length; i++) {
table.innerHTML += `<tbody id="tbProducts"><tr class="data">
<td>${this.products[i].name}</td>
<td>${this.products[i].price}</td>
<td>${this.products[i].count}</td>
</tr></tbody>`;
}
table.innerHTML += `<tfoot><tr><td id="totalPrice">Total price: ${shop.totalProductsPrice}</td></tr></tfoot>`;
}
}
let shop = new Shop();
shop.addProduct(new Product("product1", 200, 10));
shop.addProduct(new Product("product2", 500, 1));
shop.addProduct(new Product("product3", 1000, 1));
shop.show();
let btnAdd = document.getElementById("btnAdd");
btnAdd.addEventListener('click', (e) => {
e.preventDefault();
shop.addProduct(new Product(document.getElementById('_add_name').value,
parseInt(document.getElementById('_price').value),
parseInt(document.getElementById('_count').value)));
//let tmpTotalPrice =
document.getElementById("totalPrice").innerHTML = shop.totalProductsPrice;
shop.show();
}, false);
let btnDlt = document.getElementById("btnDlt");
btnDlt.addEventListener('click', (e) => {
e.preventDefault();
shop.deleteProductByName(document.getElementById('_del_name').value);
shop.show();
}, false);
/**
* Inject hyperlinks, into the column headers of sortable tables, which sort
* the corresponding column when clicked.
*/
var tables = document.querySelectorAll("table.sortable"),
table,
thead,
headers,
i,
j;
for (i = 0; i < tables.length; i++) {
table = tables[i];
if (thead = table.querySelector("thead")) {
headers = thead.querySelectorAll("th");
for (j = 0; j < headers.length; j++) {
headers[j].innerHTML = "<a href='#'>" + headers[j].innerText + "</a>";
}
thead.addEventListener("click", sortTableFunction(table));
}
}
/**
* Create a function to sort the given table.
*/
function sortTableFunction(table) {
return function(ev) {
if (ev.target.tagName.toLowerCase() == 'a') {
sortRows(table, siblingIndex(ev.target.parentNode));
ev.preventDefault();
}
};
}
/**
* Get the index of a node relative to its siblings — the first (eldest) sibling
* has index 0, the next index 1, etc.
*/
function siblingIndex(node) {
var count = 0;
while (node = node.previousElementSibling) {
count++;
}
return count;
}
/**
* Sort the given table by the numbered column (0 is the first column, etc.)
*/
function sortRows(table, columnIndex) {
var rows = table.querySelectorAll("tbody tr"),
sel = "thead th:nth-child(" + (columnIndex + 1) + ")",
sel2 = "td:nth-child(" + (columnIndex + 1) + ")",
classList = table.querySelector(sel).classList,
values = [],
cls = "",
allNum = true,
val,
index,
node;
if (classList) {
if (classList.contains("date")) {
cls = "date";
} else if (classList.contains("number")) {
cls = "number";
}
}
for (index = 0; index < rows.length; index++) {
node = rows[index].querySelector(sel2);
val = node.innerText;
if (isNaN(val)) {
allNum = false;
} else {
val = parseFloat(val);
}
values.push({ value: val, row: rows[index] });
}
if (cls == "" && allNum) {
cls = "number";
}
if (cls == "number") {
values.sort(sortNumberVal);
values = values.reverse();
} else if (cls == "date") {
values.sort(sortDateVal);
} else {
values.sort(sortTextVal);
}
for (var idx = 0; idx < values.length; idx++) {
table.querySelector("tbody").appendChild(values[idx].row);
}
}
/**
* Compare two 'value objects' numerically
*/
function sortNumberVal(a, b) {
return sortNumber(a.value, b.value);
}
/**
* Numeric sort comparison
*/
function sortNumber(a, b) {
return a - b;
}
/**
* Compare two 'value objects' as dates
*/
function sortDateVal(a, b) {
var dateA = Date.parse(a.value),
dateB = Date.parse(b.value);
return sortNumber(dateA, dateB);
}
/**
* Compare two 'value objects' as simple text; case-insensitive
*/
function sortTextVal(a, b) {
var textA = (a.value + "").toUpperCase();
var textB = (b.value + "").toUpperCase();
if (textA < textB) {
return -1;
}
if (textA > textB) {
return 1;
}
return 0;
}
body { margin-top: 4em; }
table, td, th { border: 1px solid black; margin: auto; }
td, th { padding: 0.5em 1em; }
<div id="_shop">
<form id="addForm">
<label for="_add_name">Name </label><input id="_add_name"><br/><br/>
<label for="_price">Price </label><input id="_price"><br/><br/>
<label for="_count">Count </label><input id="_count"><br/><br/>
<input type="button" id="btnAdd" value="Add"><br/><br/>
</form>
<form id="removeForm">
<label for="_del_name">Enter Name </label><input id="_del_name"><br/><br/>
<input type="button" id="btnDlt" value="Delete"><br/><br/>
</form>
<table class="sortable" id="shopTable" align="left">
<thead>
<th>Name:</th>
<th>Price:</th>
<th>Count:</th>
</thead>
</table>

There were few things odd with your code. I think, the sorting functionality wasn't implemented in the code you provided. Maybe you exported an older version?
Anyway, here are the few things, that you needed to change:
In the sortProductsByPrice() method, you were setting the name property of the product (in this.products array) to rows.item(i) which was completely off.
rows.item(i) will be the tr element at given index. What you wanted to do is set corresponding properties to corresponding td's values (rows is array of tr and each tr has three td elements.)
In the same method, where you sort the array, you need to provide a custom function to sort the products based on their price. This is needed, because JavaScript's default sort sorts the elements alphabetically. Moreover, this.products is an array of objects, so you need to sort them based on their price property.
In the event listener of btnAdd, you need to call the sortProductsByPrice method, before calling the show method.
class Product{
constructor(name, price, count){
this.name = name;
this.price = price;
this.count = count;
}
static get SORT_ORDER_ASC(){
return 0;
}
static get SORT_ORDER_DESC(){
return 1;
}
}
class Shop{
constructor(){
this.products = [];
}
addProduct (product) {
this.products.push(product);
};
deleteProductByName (productName) {
for (let i = 0; i < this.products.length; i++) {
if (this.products[i].name === productName) {
this.products.splice(i, 1);
}
}
};
get totalProductsPrice () {
let totalCost = 0;
for (let i = 0; i < this.products.length; i++) {
totalCost += this.products[i].count * this.products[i].price;
}
return totalCost;
};
sortProductsByPrice (sortOrder) {
let rows = document.querySelectorAll("#shopTable .data");
for(let i = 0; i < rows.length; i++)
{
let td = rows[i].querySelectorAll("td")
this.products[i].name = td[0].innerHTML;
this.products[i].price = td[1].innerHTML;
this.products[i].count = td[2].innerHTML;
//console.log(this.products[i].name);
}
if(sortOrder === 0) {
this.products.sort((a,b) => a.price - b.price);
this.products.map(t => t.name + " " + t.price).join("\n");
}
else if(sortOrder === 1) {
this.products.sort((a,b) => a.price - b.price);
this.products.reverse();
this.products.map(t => t.name + " " + t.price).join("\n");
}
else {
console.log("The parameter is incorrect");
}
};
show() {
let rows = document.querySelectorAll("#shopTable .data");
let tp = document.querySelectorAll("#totalPrice .data");
for (let i = rows.length - 1; i >= 0; i--) {
let e = rows.item(i);
e.parentNode.removeChild(e);
}
if(document.getElementById("totalPrice") !== null){
document.getElementById("totalPrice").remove();
}
//tp.parentNode.removeChild(tp);
let table = document.getElementById("shopTable");
for (let i = 0; i < this.products.length; i++) {
table.innerHTML += `<tbody id="tbProducts"><tr class="data">
<td>${this.products[i].name}</td>
<td>${this.products[i].price}</td>
<td>${this.products[i].count}</td>
</tr></tbody>`;
}
table.innerHTML += `<tfoot><tr><td id="totalPrice">Total price: ${shop.totalProductsPrice}</td></tr></tfoot>`;
}
}
let shop = new Shop();
shop.addProduct(new Product("product1", 200, 10));
shop.addProduct(new Product("product2", 500, 1));
shop.addProduct(new Product("product3", 1000, 1));
shop.show();
let btnAdd = document.getElementById("btnAdd");
btnAdd.addEventListener('click', (e) => {
e.preventDefault();
shop.addProduct(new Product(document.getElementById('_add_name').value,
parseInt(document.getElementById('_price').value),
parseInt(document.getElementById('_count').value)));
//let tmpTotalPrice =
document.getElementById("totalPrice").innerHTML = shop.totalProductsPrice;
shop.sortProductsByPrice(0)
shop.show();
}, false);
let btnDlt = document.getElementById("btnDlt");
btnDlt.addEventListener('click', (e) => {
e.preventDefault();
shop.deleteProductByName(document.getElementById('_del_name').value);
shop.show();
}, false);
/**
* Inject hyperlinks, into the column headers of sortable tables, which sort
* the corresponding column when clicked.
*/
var tables = document.querySelectorAll("table.sortable"),
table,
thead,
headers,
i,
j;
for (i = 0; i < tables.length; i++) {
table = tables[i];
if (thead = table.querySelector("thead")) {
headers = thead.querySelectorAll("th");
for (j = 0; j < headers.length; j++) {
headers[j].innerHTML = "<a href='#'>" + headers[j].innerText + "</a>";
}
thead.addEventListener("click", sortTableFunction(table));
}
}
/**
* Create a function to sort the given table.
*/
function sortTableFunction(table) {
return function(ev) {
if (ev.target.tagName.toLowerCase() == 'a') {
sortRows(table, siblingIndex(ev.target.parentNode));
ev.preventDefault();
}
};
}
/**
* Get the index of a node relative to its siblings — the first (eldest) sibling
* has index 0, the next index 1, etc.
*/
function siblingIndex(node) {
var count = 0;
while (node = node.previousElementSibling) {
count++;
}
return count;
}
/**
* Sort the given table by the numbered column (0 is the first column, etc.)
*/
function sortRows(table, columnIndex) {
var rows = table.querySelectorAll("tbody tr"),
sel = "thead th:nth-child(" + (columnIndex + 1) + ")",
sel2 = "td:nth-child(" + (columnIndex + 1) + ")",
classList = table.querySelector(sel).classList,
values = [],
cls = "",
allNum = true,
val,
index,
node;
if (classList) {
if (classList.contains("date")) {
cls = "date";
} else if (classList.contains("number")) {
cls = "number";
}
}
for (index = 0; index < rows.length; index++) {
node = rows[index].querySelector(sel2);
val = node.innerText;
if (isNaN(val)) {
allNum = false;
} else {
val = parseFloat(val);
}
values.push({ value: val, row: rows[index] });
}
if (cls == "" && allNum) {
cls = "number";
}
if (cls == "number") {
values.sort(sortNumberVal);
values = values.reverse();
} else if (cls == "date") {
values.sort(sortDateVal);
} else {
values.sort(sortTextVal);
}
for (var idx = 0; idx < values.length; idx++) {
table.querySelector("tbody").appendChild(values[idx].row);
}
}
/**
* Compare two 'value objects' numerically
*/
function sortNumberVal(a, b) {
return sortNumber(a.value, b.value);
}
/**
* Numeric sort comparison
*/
function sortNumber(a, b) {
return a - b;
}
/**
* Compare two 'value objects' as dates
*/
function sortDateVal(a, b) {
var dateA = Date.parse(a.value),
dateB = Date.parse(b.value);
return sortNumber(dateA, dateB);
}
/**
* Compare two 'value objects' as simple text; case-insensitive
*/
function sortTextVal(a, b) {
var textA = (a.value + "").toUpperCase();
var textB = (b.value + "").toUpperCase();
if (textA < textB) {
return -1;
}
if (textA > textB) {
return 1;
}
return 0;
}
body { margin-top: 4em; }
table, td, th { border: 1px solid black; margin: auto; }
td, th { padding: 0.5em 1em; }
<div id="_shop">
<form id="addForm">
<label for="_add_name">Name </label><input id="_add_name"><br/><br/>
<label for="_price">Price </label><input id="_price"><br/><br/>
<label for="_count">Count </label><input id="_count"><br/><br/>
<input type="button" id="btnAdd" value="Add"><br/><br/>
</form>
<form id="removeForm">
<label for="_del_name">Enter Name </label><input id="_del_name"><br/><br/>
<input type="button" id="btnDlt" value="Delete"><br/><br/>
</form>
<table class="sortable" id="shopTable" align="left">
<thead>
<th>Name:</th>
<th>Price:</th>
<th>Count:</th>
</thead>
</table>

How do I place the glass pieces in my hand on the large plane in the most optimized way?

I can place my small parts in the most optimized way for a single large part in my project. The algorithm logic is as follows; The pieces I have are sorted by height from largest to smallest and then placed from left to right. when i have multiple large parts i keep those big parts in a state.
In the first large piece, when there is no suitable place for the small pieces to be added, I want the appropriate region to be queried in the second big piece. here is my code:
index.js
import React, { useContext, useEffect, useRef, useState } from 'react'
import data from '../data'
import Graph from './graph/graph'
import SmallAreaGraph from './graph/small-area-graph';
import { IndexContext } from './IndexContext';
function Index() {
var height = 50;
var width = 50;
const [defaultHeight, setDefaultHeight] = useState(50);
const [defaultWidth, setDefaultWidth] = useState(50);
const [planes, setPlanes] = useState();
const [testState, setTestState] = useState([]);
const [bigBoard, setBigBoard] = useState(new Array(defaultWidth).fill(0).map(() => new Array(defaultHeight).fill(0)));
const [smallPlanes, setSmallPlanes] = useState([]);
const [smallPlanesArea, setSmallPlanesArea] = useState([]);
const [freeSpaceAreas, setFreeSpaceAreas] = useState([]);
const [bigPlanes, setBigPlanes] = useState([{ bigBoard: bigBoard, planes: [], height: defaultHeight, width: defaultWidth, color: "pink" }]);
var totalWidth;
const heightRef = useRef();
const widthRef = useRef();
var smallPlane, totalArea = 0;
function Placement() {
let total = 0;
let totalHeight = 0;
let allArea = [];
for (let i = 0; i < smallPlanes.length; i++) {
if (i === 0) {
smallPlanes[i].x = 1;
} else {
if (allArea !== []) {
} else {
total = total + smallPlanes[i - 1].width + 2;
totalHeight = totalHeight + smallPlanes[i - 1].height + 2;
allArea.push(smallPlanes[i - 1]);
}
if (total + smallPlanes[i].width > Number(width)) {
total = 0;
allArea.push(smallPlanes[i]);
smallPlanes[i].x = 1;
smallPlanes[i].y = allArea[0].height + 2;
return total
} else {
smallPlanes[i].x = total;
}
}
}
}
function Sort() {
let gecici;
for (let i = 0; i <= testState.length - 1; i++) {
for (let j = i; j <= testState.length; j++) {
// >(büyük) işareti <(küçük ) olarak değiştirilirse büyükten küçüğe sıralanır
if (testState[i]?.height < testState[j]?.height) {
gecici = testState[j];
testState[j] = testState[i];
testState[i] = gecici;
setTestState(testState);
}
}
}
// Placement();
}
useEffect(() => {
if (testState !== [] || testState !== undefined) {
Sort();
}
}, [testState]);
function AddBigPlane() {
setBigPlanes([...bigPlanes, { bigBoard: bigBoard, planes: [], height: defaultHeight, width: defaultWidth, color: "pink" }])
}
function Revaluation(w, h, row, col, k) {
totalWidth = totalWidth + Number(w);
if (Number(col + w) <= bigPlanes[k].bigBoard.length) {
if (Number(row + h) <= bigPlanes[k].bigBoard[row].length) {
for (let i = row; i < Number(row + h); i++) {
for (let j = col; j < Number(col + w); j++) {
let bashData = bigPlanes[k];
bashData.bigBoard[i][j] = 1
setBigPlanes(bashData);
}
}
}
}
}
function test(w, h, row, col, index) {
if (Number(row + w) <= bigPlanes[index].width && Number(col + h) <= bigPlanes[index].height) {
for (let i = row; i < Number(row + w); i++) {
for (let j = col; j < Number(col + h); j++) {
if (bigPlanes[index].bigBoard[i][j] === 0) {
if (i === (Number(row + w) - 1) && j === (Number(col + h) - 1)) {
freeSpaceAreas[index] = freeSpaceAreas[index] - smallPlane;
setFreeSpaceAreas([...freeSpaceAreas]);
setTestState([...testState, {
height: Number(heightRef?.current?.value), width: Number(widthRef?.current?.value)
}])
// return Revaluation(Number(widthRef?.current?.value), Number(heightRef?.current?.value), row, col, index);
// let bashData = bigPlanes;
// bashData[k].planes.height = Number(heightRef?.current?.value);
// bashData[k].planes.width = Number(widthRef?.current?.value);
// setBigPlanes(bashData);
}
}
}
}
}
}
function Control(index) {
//ilk 0 değerine sahip row-col (coordinat) değerlri
console.log(index);
for (let row = 0; row < bigPlanes[index].bigBoard.length; row++) {
for (let col = 0; col < bigPlanes[index].bigBoard[row].length; col++) {
if (bigPlanes[index].bigBoard[row][col] === 0) {
//bulunduktan sonra test fonksiyonuna aktarılır.
return test(Number(widthRef.current.value), Number(heightRef.current.value), row, col, index);
}
}
}
}
useEffect(() => {
if (bigPlanes.length !== freeSpaceAreas.length) {
for (let i = 0; i < bigPlanes.length; i++) {
console.log(bigPlanes);
setFreeSpaceAreas([...freeSpaceAreas, bigPlanes[i].width * bigPlanes[i].height])
}
}
}, [bigPlanes]);
function AreaControl() {
// smallPlanesArea?.length && smallPlanesArea.map(area => {
// totalArea = totalArea + area;
// })
console.log("test");
for (let i = 0; i < freeSpaceAreas.length; i++) {
if (smallPlane <= freeSpaceAreas[i]) {
console.log(i);
return Control(i);
}
}
heightRef.current.value = "";
widthRef.current.value = "";
}
function handleKeyDown(e) {
if (e.key === "Enter") {
if (heightRef?.current.value !== "") {
if (widthRef.current.value !== "") {
smallPlane = Number(heightRef?.current.value) * Number(widthRef?.current.value);
AreaControl();
// widthRef.current.value = "";
// heightRef.current.value = "";
} else {
alert("Lütfen bir genişlik değeri giriniz");
}
} else {
alert("Lütfen bir yükseklik değeri giriniz");
}
}
}
useEffect(() => {
console.log(freeSpaceAreas);
}, [freeSpaceAreas]);
function AddAreas() {
// Gerçek zamanlı arr state'i güncelleme.
setPlanes([...smallPlanes]);
ResetSmallPlane();
ResetBigPlane();
for (let i = 0; i < testState.length; i++) {
findCoords(testState[i])
}
}
var totalWidth = 0, totalHeight = 0, totW = 0, totH = 0;
// function RevaluationTwo(w, h, row, col) {
// let bashData;
// for (let i = row; i < Number(row + h); i++) {
// for (let j = col; j < Number(col + w); j++) {
// bashData = bigBoard;
// bashData[i][j] = 1;
// setBigBoard(bashData);
// }
// }
// }
function ResetBigPlane() {
for (let k = 0; k < bigPlanes.length; k++) {
for (let row = 0; row < bigPlanes[k].bigBoard.length; row++) {
for (let col = 0; col < bigPlanes[k].bigBoard[row].length; col++) {
if (bigPlanes[k].bigBoard[row][col] === 1) {
let bashData = bigPlanes;
bashData[k].bigBoard[row][col] = 0
setBigPlanes(bashData);
}
}
}
}
}
function bigPlanesControl() {
for (let i = 0; i < bigPlanes.length; i++) {
}
}
function ResetSmallPlane() {
let arrAttributes = [];
for (let i = 0; i < bigPlanes.length; i++) {
var arr = bigPlanes[i].planes;
arr.length = 0;
arrAttributes.push(arr);
}
setBigPlanes([...arrAttributes]);
}
function createCoords(w, h, row, col, i) {
let bashData = [];
totW = totW + Number(w);
if (Number(col + w) <= bigPlanes[i].width) {
if (Number(row + h) <= bigPlanes[i].height) {
bashData = bigPlanes;
bashData[i].planes.push({ height: h, width: w, x: col + 1, y: row + 1 });
setBigPlanes([...bashData]);
} else {
return;
}
} else {
return;
}
}
function findCoords(test) {
console.log(test);
for (let k = 0; k < bigPlanes.length; k++) {
for (let row = 0; row < bigPlanes[k].bigBoard.length; row++) {
for (let col = 0; col < bigPlanes[k].bigBoard[row].length; col++) {
if (bigPlanes[k].bigBoard[row][col] === 0) {
Revaluation(test.width, test.height, row, col, k);
if (Number(bigPlanes[k].bigBoard[row].length - col) >= test.width) {
return createCoords(test.width, test.height, row, col, k);
}
else
return;
}
}
}
}
}
function Approve() {
ResetSmallPlane();
ResetBigPlane();
for (let i = 0; i < testState.length; i++) {
findCoords(testState[i])
}
}
return (
<div className='container mt-5'>
<div className='big-plane'>
</div>
<div className='d-flex justify-content-between '>
<div></div>
<div className='d-flex'>
<div className='me-4'>
<input className='input form-control ' type="text" ref={heightRef} placeholder="Yükseklik giriniz.." onKeyUp={handleKeyDown} />
</div>
<div className='me-4'>
<input className='input form-control ' type="text" ref={widthRef} placeholder="Genişlik giriniz.." onKeyUp={handleKeyDown} />
</div>
<div className='btn btn-success' onClick={() => Approve()}>
Onayla
</div>
<div className='btn btn-success' onClick={() => AddAreas()}>
Ekle
</div>
</div>
<div className='btn btn-danger d-flex align-items-center'>
<div onClick={() => AddBigPlane()}>Cam Plaka Ekle</div> <b style={{ fontWeight: "bolder", fontSize: "20px", marginLeft: "5px" }}>+</b>
</div>
</div>
{
testState?.length ? testState.map((plane, i) => {
return <SmallAreaGraph color="purple" key={i} data={data} height={Number(plane.height)} width={Number(plane.width)} />
}) : ""
}
<div className='mt-5'>
{/* where large parts are added */}
{
bigPlanes.length ? bigPlanes.map((plane, i) => {
totalWidth = totalWidth + bigPlanes[i].width;
return <Graph smallPlanesProps={plane.planes} data={plane.bigBoard} key={i} color={plane.color} height={plane.height} width={plane.width} x={0} y={0} position="absolute" zIndex="-10" left={totalWidth} />
}
) : ""
}
</div>
</div>
)
}
export default Index

Getting Cannot set properties of undefined

I have function CarFactory, which produce cars and should change color of these cars.
const warehouse = require("./warehouse");
function CarFactory(power = 10) {
this.warehouse = warehouse;
this.produceCar = (color = "red", wheels = 4, engine = false) => {
if (power < 2) {
return null
} else {
let car = { "id": warehouse.nextIdentifier, "color": color, "wheels": wheels, "engine": engine }
warehouse.createdCars.push(car);
warehouse.nextIdentifier++;
}
}
this.addEnergyPower = (value = 0) => {
power += value;
}
this.changeCarColor = (num) => {
if (power < 1) {
return null
} else {
warehouse.createdCars[num].color = 'blue'
}
}
}
module.exports = CarFactory;
But Im getting error Cannot set properties of undefined(setting 'color').
If I hardcode 0 like this to: createdCars[0] it actually works for car indexed 0.
this is warehouse file
let warehouse = {
createdCars: [],
nextIdentifier: 0
};
module.exports = warehouse;
this is where jest tries to change color
for (let i = 0; i < myFactory.warehouse.createdCars.length; i += 2) {
let car = myFactory.warehouse.createdCars[i];
if (myFactory.changeCarColor(car) !== null) {} else {
if (energyBoosts.length > 0) {
myFactory.addEnergyPower(energyBoosts.shift());
i -= 2;
} else {
break
}
}
}

From what I can tell in the line if (myFactory.changeCarColor(car) !== null) {} else{ car would be { "id": warehouse.nextIdentifier, "color": color, "wheels": wheels, "engine": engine } but what it seems like you would want is the id. So change if (myFactory.changeCarColor(car) !== null) {} else{ to if (myFactory.changeCarColor(car.id) !== null) {} else{ and see if that works.

You have this.changeCarColor = (num) but appears you want to pass a car to that and then get the id? I have no idea what this is so I then fails here:
console.log(typeof energyBoosts); with "undefined" for energyBoosts
But that is the NEXT question not the one at hand.
let warehouse = {
createdCars: [],
nextIdentifier: 0
};
function CarFactory(power = 10) {
this.warehouse = warehouse;
this.produceCar = (color = "red", wheels = 4, engine = false) => {
// console.log("here");
if (power < 2) {
return null;
} else {
let car = {
"id": warehouse.nextIdentifier,
"color": color,
"wheels": wheels,
"engine": engine
};
warehouse.createdCars.push(car);
warehouse.nextIdentifier++;
}
}
this.addEnergyPower = (value = 0) => {
power += value;
}
this.changeCarColor = (car) => {
console.log(car.color, car.id, power);
if (power < 1) {
return null;
} else {
warehouse.createdCars[car.id].color = 'blue';
}
}
}
let myFactory = new CarFactory();
//console.log(myFactory);
for (let c = 0; c < 10; c++) {
//console.log(c);
myFactory.produceCar("red", 4, false);
}
//console.log("GO!", myFactory.warehouse);
for (let i = 1; i < myFactory.warehouse.createdCars.length; i += 2) {
//console.log(i);
let car = myFactory.warehouse.createdCars[i];
console.log("Car:", car);
if (myFactory.changeCarColor(car) == null) {
console.log(typeof energyBoosts);
if (energyBoosts.length > 0) {
myFactory.addEnergyPower(energyBoosts.shift());
i -= 2;
} else {
break;
}
}
}

calculate score based on array object using jquery

I’m beginner in JavaScript and I’m trying to make a quiz that calculates the score of object(type) in the array. So the total score should count how much the user get in each part(ex:2/2 in math, 1/2 in science. Total= 3/4).
Is there any possible way to do that using jquery ?
help me please, thank you
var all_questions = [{
type:"math",
question_string: "4 + 4",
choices: {
correct: "8",
wrong: ["2", "3", "9"]
}
}, {
type:"math",
question_string: "4 * 4",
choices: {
correct: "16",
wrong: ["24", "13", "4"]
}
}, {
type:"sience",
question_string: "What part of the body helps you move?",
choices: {
correct: "Muscles",
wrong: ["Eyes", "Pancreas", "Lungs"]
}
}, {
type:"sience",
question_string: 'What star shines in the day and provides light?',
choices: {
correct: "Sun",
wrong: ["Moon", "Venus", "Mars"]
}
}];
var Quiz = function(quiz_name) {
this.quiz_name = quiz_name;
this.questions = [];
}
Quiz.prototype.add_question = function(question) {
var index_to_add_question = Math.floor(Math.random() * this.questions.length);
this.questions.splice(index_to_add_question, 0, question);
}
Quiz.prototype.render = function(container) {
var self = this;
$('#quiz-results').hide();
$('#quiz-name').text(this.quiz_name);
var question_container = $('<div>').attr('id', 'question').insertAfter('#quiz-name');
function change_question() {
self.questions[current_question_index].render(question_container);
$('#prev-question-button').prop('disabled', current_question_index === 0);
$('#next-question-button').prop('disabled', current_question_index === self.questions.length - 1);
var all_questions_answered = true;
for (var i = 0; i < self.questions.length; i++) {
if (self.questions[i].user_choice_index === null) {
all_questions_answered = false;
break;
}
}
$('#submit-button').prop('disabled', !all_questions_answered);
}
var current_question_index = 0;
change_question();
$('#prev-question-button').click(function() {
if (current_question_index > 0) {
current_question_index--;
change_question();
}
});
$('#next-question-button').click(function() {
if (current_question_index < self.questions.length - 1) {
current_question_index++;
change_question();
}
});
$('#submit-button').click(function() {
var score = 0;
for (var i = 0; i < self.questions.length; i++) {
if (self.questions[i].user_choice_index === self.questions[i].correct_choice_index) {
score++;
}
}
var percentage = score / self.questions.length;
console.log(percentage);
var message;
if (percentage === 1) {
message = 'Great job!'
} else if (percentage >= .75) {
message = 'You did alright.'
} else if (percentage >= .5) {
message = 'Better luck next time.'
} else {
message = 'Maybe you should try a little harder.'
}
$('#quiz-results-message').text(message);
$('#quiz-results-score').html('You got <b>' + score + '/' + self.questions.length + '</b> questions correct.');
$('#quiz-results').slideDown();
$('#quiz button').slideUp();
});
question_container.bind('user-select-change', function() {
var all_questions_answered = true;
for (var i = 0; i < self.questions.length; i++) {
if (self.questions[i].user_choice_index === null) {
all_questions_answered = false;
break;
}
}
$('#submit-button').prop('disabled', !all_questions_answered);
});
}
var Question = function(question_string, correct_choice, wrong_choices) {
// Private fields for an instance of a Question object.
this.question_string = question_string;
this.choices = [];
this.user_choice_index = null; // Index of the user's choice selection
// Random assign the correct choice an index
this.correct_choice_index = Math.floor(Math.random() * wrong_choices.length + 1);
// Fill in this.choices with the choices
var number_of_choices = wrong_choices.length + 1;
for (var i = 0; i < number_of_choices; i++) {
if (i === this.correct_choice_index) {
this.choices[i] = correct_choice;
} else {
// Randomly pick a wrong choice to put in this index
var wrong_choice_index = Math.floor(Math.random(0, wrong_choices.length));
this.choices[i] = wrong_choices[wrong_choice_index];
// Remove the wrong choice from the wrong choice array so that we don't pick it again
wrong_choices.splice(wrong_choice_index, 1);
}
}
}
Question.prototype.render = function(container) {
var self = this;
var question_string_h2;
if (container.children('h2').length === 0) {
question_string_h2 = $('<h2>').appendTo(container);
} else {
question_string_h2 = container.children('h2').first();
}
question_string_h2.text(this.question_string);
if (container.children('input[type=radio]').length > 0) {
container.children('input[type=radio]').each(function() {
var radio_button_id = $(this).attr('id');
$(this).remove();
container.children('label[for=' + radio_button_id + ']').remove();
});
}
for (var i = 0; i < this.choices.length; i++) {
var choice_radio_button = $('<input>')
.attr('id', 'choices-' + i)
.attr('type', 'radio')
.attr('name', 'choices')
.attr('value', 'choices-' + i)
.attr('checked', i === this.user_choice_index)
.appendTo(container);
var choice_label = $('<label>')
.text(this.choices[i])
.attr('for', 'choices-' + i)
.appendTo(container);
}
$('input[name=choices]').change(function(index) {
var selected_radio_button_value = $('input[name=choices]:checked').val();
self.user_choice_index = parseInt(selected_radio_button_value.substr(selected_radio_button_value.length - 1, 1));
container.trigger('user-select-change');
});
}
$(document).ready(function() {
var quiz = new Quiz('');
for (var i = 0; i < all_questions.length; i++) {
var question = new Question(all_questions[i].question_string, all_questions[i].choices.correct, all_questions[i].choices.wrong);
quiz.add_question(question);
}
var quiz_container = $('#quiz');
quiz.render(quiz_container);
});
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Multiple Choice Quiz</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="quiz">
<h1 id="quiz-name"></h1>
<button id="submit-button">Submit</button>
<button id="next-question-button">Next</button>
<button id="prev-question-button">Back</button>
<div id="quiz-results">
<p id="quiz-results-message"></p>
<p id="quiz-results-score"></p>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

Basically you're looking for a group by logic - you want to group the answers by the question type. In order to solve this:
Add question_type to Question (not mandatory, we can take it from the original array of question. I'll keep it for readability).
In order to implement the group by logic, we can reduce to filter the right answers and convert the Questions array into a score dictionary. The keys are the questions type, the value is the score.
For every right answer, we either adding plus one if the category already exists or initiating as 1 if not.
I'm using a shorter version yet does exactly the same:
acc.set(curr.question_type, (acc.get(curr.question_type) || 0) + 1);
// |-- add / update --| |- current score if exists -| 0 if not, plus one
Here is the full reduce
// global counter for total answers
let totalScore = 0;
const result = a.reduce((acc, curr) => {
// if it's the right answer
if (curr.user_choice_index === curr.correct_choice_index) {
// add / update the entity with 1 if's the first right answer in the category so far or add 1 if it exists
acc.set(curr.question_type, (acc.get(curr.question_type) || 0) + 1);
totalScore++;
}
return acc;
}, new Map());
The second part is to render the results:
// convert the Map back to array
const scoreText = Array.from(score.entries())
// render each type in a different line
.map(([type, scoreByType]) => `<b>${type}</b>: ${scoreByType}`)
.join('<br />');
Read more about
Map
Map.entries
Array.from
Array.reduce
Full working example:
var all_questions = [{
type:"math",
question_string: "4 + 4",
choices: {
correct: "8",
wrong: ["2", "3", "9"]
}
}, {
type:"math",
question_string: "4 * 4",
choices: {
correct: "16",
wrong: ["24", "13", "4"]
}
}, {
type:"sience",
question_string: "What part of the body helps you move?",
choices: {
correct: "Muscles",
wrong: ["Eyes", "Pancreas", "Lungs"]
}
}, {
type:"sience",
question_string: 'What star shines in the day and provides light?',
choices: {
correct: "Sun",
wrong: ["Moon", "Venus", "Mars"]
}
}];
var Quiz = function(quiz_name) {
this.quiz_name = quiz_name;
this.questions = [];
}
Quiz.prototype.add_question = function(question) {
var index_to_add_question = Math.floor(Math.random() * this.questions.length);
this.questions.splice(index_to_add_question, 0, question);
}
Quiz.prototype.render = function(container) {
var self = this;
$('#quiz-results').hide();
$('#quiz-name').text(this.quiz_name);
var question_container = $('<div>').attr('id', 'question').insertAfter('#quiz-name');
function change_question() {
self.questions[current_question_index].render(question_container);
$('#prev-question-button').prop('disabled', current_question_index === 0);
$('#next-question-button').prop('disabled', current_question_index === self.questions.length - 1);
var all_questions_answered = true;
for (var i = 0; i < self.questions.length; i++) {
if (self.questions[i].user_choice_index === null) {
all_questions_answered = false;
break;
}
}
$('#submit-button').prop('disabled', !all_questions_answered);
}
var current_question_index = 0;
change_question();
$('#prev-question-button').click(function() {
if (current_question_index > 0) {
current_question_index--;
change_question();
}
});
$('#next-question-button').click(function() {
if (current_question_index < self.questions.length - 1) {
current_question_index++;
change_question();
}
});
$('#submit-button').click(function() {
let totalScore = 0;
const score = self.questions.reduce((acc, curr) => {
if (curr.user_choice_index === curr.correct_choice_index) {
acc.set(curr.question_type, (acc.get(curr.question_type) || 0) + 1);
totalScore++;
}
return acc;
}, new Map());
var percentage = score / self.questions.length;
console.log(percentage);
var message;
if (percentage === 1) {
message = 'Great job!'
} else if (percentage >= .75) {
message = 'You did alright.'
} else if (percentage >= .5) {
message = 'Better luck next time.'
} else {
message = 'Maybe you should try a little harder.'
}
$('#quiz-results-message').text(message);
const scoreText = Array.from(score.entries())
.map(([type, scoreByType]) => `<b>${type}</b>: ${scoreByType}`)
.join('\n');
$('#quiz-results-score').html('You got <b>' + totalScore + '/' + self.questions.length + '</b> questions correct.\n' + scoreText);
$('#quiz-results').slideDown();
$('#quiz button').slideUp();
});
question_container.bind('user-select-change', function() {
var all_questions_answered = true;
for (var i = 0; i < self.questions.length; i++) {
if (self.questions[i].user_choice_index === null) {
all_questions_answered = false;
break;
}
}
$('#submit-button').prop('disabled', !all_questions_answered);
});
}
var Question = function(question_string, correct_choice, wrong_choices, question_type) {
// Private fields for an instance of a Question object.
this.question_string = question_string;
this.question_type = question_type;
this.choices = [];
this.user_choice_index = null; // Index of the user's choice selection
// Random assign the correct choice an index
this.correct_choice_index = Math.floor(Math.random() * wrong_choices.length + 1);
// Fill in this.choices with the choices
var number_of_choices = wrong_choices.length + 1;
for (var i = 0; i < number_of_choices; i++) {
if (i === this.correct_choice_index) {
this.choices[i] = correct_choice;
} else {
// Randomly pick a wrong choice to put in this index
var wrong_choice_index = Math.floor(Math.random(0, wrong_choices.length));
this.choices[i] = wrong_choices[wrong_choice_index];
// Remove the wrong choice from the wrong choice array so that we don't pick it again
wrong_choices.splice(wrong_choice_index, 1);
}
}
}
Question.prototype.render = function(container) {
var self = this;
var question_string_h2;
if (container.children('h2').length === 0) {
question_string_h2 = $('<h2>').appendTo(container);
} else {
question_string_h2 = container.children('h2').first();
}
question_string_h2.text(this.question_string);
if (container.children('input[type=radio]').length > 0) {
container.children('input[type=radio]').each(function() {
var radio_button_id = $(this).attr('id');
$(this).remove();
container.children('label[for=' + radio_button_id + ']').remove();
});
}
for (var i = 0; i < this.choices.length; i++) {
var choice_radio_button = $('<input>')
.attr('id', 'choices-' + i)
.attr('type', 'radio')
.attr('name', 'choices')
.attr('value', 'choices-' + i)
.attr('checked', i === this.user_choice_index)
.appendTo(container);
var choice_label = $('<label>')
.text(this.choices[i])
.attr('for', 'choices-' + i)
.appendTo(container);
}
$('input[name=choices]').change(function(index) {
var selected_radio_button_value = $('input[name=choices]:checked').val();
self.user_choice_index = parseInt(selected_radio_button_value.substr(selected_radio_button_value.length - 1, 1));
container.trigger('user-select-change');
});
}
$(document).ready(function() {
var quiz = new Quiz('');
for (var i = 0; i < all_questions.length; i++) {
var question = new Question(all_questions[i].question_string, all_questions[i].choices.correct, all_questions[i].choices.wrong, all_questions[i].type);
quiz.add_question(question);
}
var quiz_container = $('#quiz');
quiz.render(quiz_container);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Multiple Choice Quiz</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="quiz">
<h1 id="quiz-name"></h1>
<button id="submit-button">Submit</button>
<button id="next-question-button">Next</button>
<button id="prev-question-button">Back</button>
<div id="quiz-results">
<p id="quiz-results-message"></p>
<p id="quiz-results-score"></p>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="./script.js"></script>
</body>
</html>

String to node error

I've encountered an error - "Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'" on line 113. As far as I understand (I'm a beginner), the problem is that the variable "shoppingListItem" isn't a Node, but a String. How can I fix this?
var shoppingList = {
list: [{
item: 'milk',
isBought: false,
itemCounter: 1
}, {
item: 'beer',
isBought: false,
itemCounter: 1
}, {
item: 'sugar',
isBought: false,
itemCounter: 1
}],
displayShoppingList: function() {
//debugger;
if (this.list.length > 0) {
for (var x = 0; x < this.list.length; x++) {
if (this.list[x].isBought === true) {
console.log('(x)' + this.list[x].item);
} else {
console.log('( )' + this.list[x].item);
}
}
} else {
console.log('Your shopping list is empty');
}
},
addToShoppingList: function(item) {
this.list.push({
item: item,
isBought: false,
itemCounter: 1
});
this.displayShoppingList();
},
changeShoppingList: function(place, newItem) {
this.list[place].item = newItem;
this.displayShoppingList();
},
changeCounter: function(place, newCounter) {
this.list[place].itemCounter = newCounter;
this.displayShoppingList();
},
makeItemBought: function(place) {
this.list[place].isBought = !this.list[place].isBought;
this.displayShoppingList();
},
deleteFromShoppingList: function(place) {
this.list.splice(place, 1);
this.displayShoppingList();
},
toggleAllItems: function() {
var allItems = this.list.length;
var boughtItems = 0;
for (var y = 0; y < allItems; y++) {
if (this.list[y].isBought === true) {
boughtItems++;
}
}
if (boughtItems === allItems) {
for (var z = 0; z < allItems; z++) {
this.list[z].isBought = false;
}
} else {
for (var a = 0; a < this.list.length; a++) {
this.list[a].isBought = true;
}
}
this.displayShoppingList();
}
};
var handlers = {
showAll: function() {
shoppingList.displayShoppingList();
},
toggleAll: function() {
shoppingList.toggleAllItems();
showOnScreen.displayShoppingList();
},
addToShoppingList: function() {
var addToShoppingListInput = document.getElementById('addToShoppingListText');
shoppingList.addToShoppingList(addToShoppingListInput.value);
addToShoppingListInput.value = "";
showOnScreen.displayShoppingList();
},
changeShoppingList: function() {
var changeShoppingListInputNumber = document.getElementById('changeShoppingListNumber');
var changeShoppingListInputText = document.getElementById('changeShoppingListText');
shoppingList.changeShoppingList(changeShoppingListInputNumber.valueAsNumber, changeShoppingListInputText.value);
changeShoppingListInputNumber.value = "";
changeShoppingListInputText.value = "";
showOnScreen.displayShoppingList();
},
};
var showOnScreen = {
displayShoppingList: function() {
var shoppingUnorderedList = document.querySelector('ul');
shoppingUnorderedList.innerHTML = '';
for (var x = 0; x < shoppingList.list.length; x++) {
var shoppingListItem = document.createElement('li');
var isBoughtDisplay = '';
if (shoppingList.list[x].isBought === true) {
isBoughtDisplay = '(x)' + shoppingList.list[x].item + ' ' + shoppingList.list[x].itemCounter;
} else {
isBoughtDisplay = '( )' + shoppingList.list[x].item + ' ' + shoppingList.list[x].itemCounter;
}
shoppingListItem.textContent = isBoughtDisplay;
shoppingListItem.appendChild(this.createDeleteButton); // error is here
shoppingUnorderedList.appendChild(shoppingListItem);
}
},
createDeleteButton: function() {
var deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete item';
deleteButton.className = 'deleteButtonClass';
return deleteButton;
}
};
//shoppingList.addToShoppingList('muffin');
//shoppingList.toggleAllItems();
//add multiple items at the same time - divide them by “,” and push one by one(?)
//counter on each item - add ‘counter’ property to item/isBought, increase by one (tap) or manually by counter (how? - figure out!)
//swipe movements and mobile devices adaptation (read docs)
<!DOCTYPE html>
<html>
<body>
<h1>Список покупок</h1>
<button onclick='showOnScreen.displayShoppingList()'>Show Shopping List</button>
<button onclick='handlers.toggleAll()'>Toggle all on/off</button>
<div>
<input type='text' id='addToShoppingListText'>
<button onclick='handlers.addToShoppingList()'>Add to shopping list</button>
</div>
<div>
<input type='number' id='changeShoppingListNumber'>
<input type='text' id='changeShoppingListText'>
<button onclick='handlers.changeShoppingList()'>Change Shopping List Item</button>
</div>
<div>
<input type='number' id='changeCounterPlace'>
<input type='number' id='changeCounterValue'>
<button onclick='handlers.changeCounter()'>Change number of items</button>
</div>
<ul>
</ul>
<script src="script.js"></script>
</body>
</html>

The "createDeleteButton" is a function but you are not call it. Just change to :
shoppingListItem.appendChild(this.createDeleteButton());
And it should work