In a course I'm taking my lecturer wrote the below code for submitting data from a form when the submit button is pressed. It stores this to sessionStorage and then renders the received messages below the form. I made sure to copy it exactly and mine doesn't work. It seems to be because the .fullName, .email, .feedbackType and .comment are not being assigned a type. When I ran the lecturers code file from my vscode and checked it in the browser his worked fine. My work is identical to his bar some different CSS styles. It is currently just putting undefined for each item
function submitMessage(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const fullName = document.getElementById('fullName').value;
const feedbackType = document.getElementById('feedbackType').value;
const comment = document.getElementById('comment').value;
const messageObject = {
email,
fullName,
feedbackType,
comment,
};
let currentMessages = [];
if (window.sessionStorage.getItem('messages')) {
currentMessages = JSON.parse(
window.sessionStorage.getItem('messages')
);
}
currentMessages.push({
messageObject
});
/*temporary fix, find a solution for this error, .push not working/recognised. Code matching lectures is currentMessages.push(messageObject)*/
window.sessionStorage.setItem(
'messages',
JSON.stringify(currentMessages)
);
renderMessages();
}
function renderMessages() {
let currentMessages = [];
if (window.sessionStorage.getItem("messages")) {
currentMessages =
JSON.parse(
window.sessionStorage.getItem("messages")
);
}
let listItems = [];
for (let i = 0; i < currentMessages.length; i++) {
let listItem = " ";
const currentMessage = currentMessages[i];
listItem += `<dt>${currentMessage.fullName} - ${currentMessage.email}</dt>`;
listItem += `<dd>${currentMessage.feedbackType}: ${currentMessage.comment}</dd>`;
listItem += `<br />`;
listItems.push(listItem);
}
let descList = document.getElementById('currentMessages');
descList.innerHTML = listItems.join('');
}
renderMessages();
Related
I have a simple program that reads a css file (which is available on GitHub pages) and parse the css to an array so I can put at in a list.
I have an dictionary with words, like a vocabulary list which shows me the translation and I can also search for words.
Everything works fine so far but I am really new and this is my first project and I want some advise about my codestructure.
At the moment I have to fetch the csv file (which never changes) in different methods with getData. I do this in init dictionary and again in search and show, because I need the dictionary again. Wouldn’t it be better to get the data once and then use it with all functions?
But then I have to write a lot function into another which is not so good practice I think.
I would really appreciate some advise or link or topics/ direction I have to research, because I can’t find an answer about how to structure this well.
I just use html, css and js without any framework or library.
initDictionary();
async function initDictionary(){
//get data
const dictionary = await getData();
//fill html list with words
fillList(dictionary);
}
//show translation and info when click on word
show = async function (i){
let dictionary = await getData();
document.getElementById("word-text").innerHTML = dictionary[i].Wort;
document.getElementById("info").innerHTML = dictionary[i].Notizen;
}
//search stuff
search = async function() {
let dictionary = await getData();
let query = document.getElementById('search').value;
console.log(query);
if (query == ""){
return;
}
//init found to false
let found = -1;
for(let i=0; i< dictionary.length; i++){
if(query == dictionary[i].Übersetzung){
found = i;
break;
}else {
document.getElementById("word-text").innerHTML = "word not found";
document.getElementById("info").innerHTML ="";
}
}
if ( found >= 0){
show (found);
query = document.getElementById('search').value="";
}
}
//Start search when u press enter
let input = document.getElementById("search");
input.addEventListener("keyup", function(event) {
console.log(event);
if (event.key=== "Enter") {
search();
}
});
// get data
async function getData(){
const csv = await fetch('https://aboutwhite.github.io/data/data.csv');
let scvText = await csv.text();
let dictionary = csvToArray(scvText);
return dictionary;
}
// fill html list with words
function fillList(dictionary){
for(let i=0; i< dictionary.length; i++){
document.getElementById('word-list').innerHTML += "<li onclick='show("+i+")'>" + dictionary[i].Übersetzung+"</li>";
}
}
//parse csv to array
function csvToArray(str){
let delimiter = ","
const headers = str.slice(0, str.indexOf("\n")).split(delimiter);
const rows = str.slice(str.indexOf("\n") + 1).split("\n");
const arr = rows.map(function (row) {
const values = row.split(delimiter);
const el = headers.reduce(function (object, header, index) {
object[header] = values[index];
return object;
}, {});
return el;
});
return arr;
}
The problem is that every time I click on an element with a state things appear twice. For example if i click on a button and the result of clicking would be to output something in the console, it would output 2 times. However in this case, whenever I click a function is executed twice.
The code:
const getfiles = async () => {
let a = await documentSpecifics;
for(let i = 0; i < a.length; i++) {
var wrt = document.querySelectorAll("#writeto");
var fd = document.querySelector('.filtered-docs');
var newResultEl = document.createElement('div');
var writeToEl = document.createElement('p');
newResultEl.classList.add("result");
writeToEl.id = "writeto";
newResultEl.appendChild(writeToEl);
fd.appendChild(newResultEl);
listOfNodes.push(writeToEl);
listOfContainers.push(newResultEl);
wrt[i].textContent = a[i].data.documentName;
}
}
The code here is supposed to create a new div element with a paragraph tag and getting data from firebase firestore, will write to the p tag the data. Now if there are for example 9 documents in firestore and i click a button then 9 more divs will be replicated. Now in total there are 18 divs and only 9 containing actual data while the rest are just blank. It continues to create 9 more divs every click.
I'm also aware of React.Strictmode doing this for some debugging but I made sure to take it out and still got the same results.
Firebase code:
//put data in firebase
createFileToDb = () => {
var docName = document.getElementById("title-custom").value; //get values
var specifiedWidth = document.getElementById("doc-width").value;
var specifiedHeight = document.getElementById("doc-height").value;
var colorType = document.getElementById("select-color").value;
parseInt(specifiedWidth); //transform strings to integers
parseInt(specifiedHeight);
firebase.firestore().collection("documents")
.doc(firebase.auth().currentUser.uid)
.collection("userDocs")
.add({
documentName: docName,
width: Number(specifiedWidth), //firebase-firestore method for converting the type of value in the firestore databse
height: Number(specifiedHeight),
docColorType: colorType,
creation: firebase.firestore.FieldValue.serverTimestamp() // it is possible that this is necessary in order to use "orderBy" when getting data
}).then(() => {
console.log("file in database");
}).catch(() => {
console.log("failed");
})
}
//get data
GetData = () => {
return firebase.firestore()
.collection("documents")
.doc(firebase.auth().currentUser.uid)
.collection("userDocs")
.orderBy("creation", "asc")
.get()
.then((doc) => {
let custom = doc.docs.map((document) => {
var data = document.data();
var id = document.id;
return { id, data }
})
return custom;
}).catch((err) => {console.error(err)});
}
waitForData = async () => {
let result = await this.GetData();
return result;
}
//in render
let documentSpecifics = this.waitForData().then((response) => response)
.then((u) => {
if(u.length > 0) {
for(let i = 0; i < u.length; i++) {
try {
//
} catch(error) {
console.log(error);
}
}
}
return u;
});
Edit: firebase auth is functioning fine so i dont think it has anything to do with the problem
Edit: This is all in a class component
Edit: Clicking a button calls the function createFileToDb
I think that i found the answer to my problem.
Basically, since this is a class component I took things out of the render and put some console.log statements to see what was happening. what i noticed is that it logs twice in render but not outside of it. So i took the functions out.
Here is the code that seems to fix my issue:
contain = () => {
const documentSpecifics = this.waitForData().then((response) => {
var wrt = document.getElementsByClassName('writeto');
for(let i = 0; i < response.length; i++) {
this.setNewFile();
wrt[i].textContent = response[i].data.documentName;
}
return response;
})
this.setState({
docs: documentSpecifics,
docDisplayType: !this.state.docDisplayType
})
}
As for creating elements i put them in a function so i coud reuse it:
setNewFile = () => {
const wrt = document.querySelector(".writeto");
const fd = document.querySelector("#filtered-docs");
var newResultEl = document.createElement('div');
newResultEl.classList.add("result");
var wrtEl = document.createElement('p');
wrtEl.classList.add("writeto");
fd.appendChild(newResultEl);
newResultEl.appendChild(wrtEl);
}
The firebase and firestore code remains the same.
the functions are called through elements in the return using onClick.
I've been dealing with this for some time. I've a list of sections in which the user checks some checkboxes and that is sent to the server via AJAX. However, since the user can return to previous sections, I'm using some objects of mine to store some things the user has done (if he/she already finished working in that section, which checkboxes checked, etc). I'm doing this to not overload the database and only send new requests to store information if the user effectively changes a previous checkbox, not if he just starts clicking "Save" randomly. I'm using objects to see the sections of the page, and storing the previous state of the checkboxes in a Map. Here's my "supervisor":
function Supervisor(id) {
this.id = id;
this.verif = null;
this.selections = new Map();
var children = $("#ContentPlaceHolder1_checkboxes_div_" + id).children().length;
for (var i = 0; i < children; i++) {
if (i % 2 == 0) {
var checkbox = $("#ContentPlaceHolder1_checkboxes_div_" + id).children()[i];
var idCheck = checkbox.id.split("_")[2];
this.selections.set(idCheck, false);
}
}
console.log("Length " + this.selections.size);
this.change = false;
}
The console.log gives me the expected output, so I assume my Map is created and initialized correctly. Since the session of the user can expire before he finishes his work, or he can close his browser by accident, I'm storing this object using local storage, so I can change the page accordingly to what he has done should anything happen. Here are my functions:
function setObj(id, supervisor) {
localStorage.setItem(id, JSON.stringify(supervisor));
}
function getObj(key) {
var supervisor = JSON.parse(localStorage.getItem(key));
return supervisor;
}
So, I'm trying to add to the record whenever an user clicks in a checkbox. And this is where the problem happens. Here's the function:
function checkboxClicked(idCbx) {
var idSection = $("#ContentPlaceHolder1_hdnActualField").val();
var supervisor = getObj(idSection);
console.log(typeof (supervisor)); //Returns object, everythings fine
console.log(typeof (supervisor.change)); //Returns boolean
supervisor.change = true;
var idCheck = idCbx.split("_")[2]; //I just want a part of the name
console.log(typeof(supervisor.selections)); //Prints object
console.log("Length " + supervisor.selections.size); //Undefined!
supervisor.selections.set(idCheck, true); //Error! Note: The true is just for testing purposes
setObj(idSection, supervisor);
}
What am I doing wrong? Thanks!
Please look at this example, I removed the jquery id discovery for clarity. You'll need to adapt this to meet your needs but it should get you mostly there.
const mapToJSON = (map) => [...map];
const mapFromJSON = (json) => new Map(json);
function Supervisor(id) {
this.id = id;
this.verif = null;
this.selections = new Map();
this.change = false;
this.selections.set('blah', 'hello');
}
Supervisor.from = function (data) {
const id = data.id;
const supervisor = new Supervisor(id);
supervisor.verif = data.verif;
supervisor.selections = new Map(data.selections);
return supervisor;
};
Supervisor.prototype.toJSON = function() {
return {
id: this.id,
verif: this.verif,
selections: mapToJSON(this.selections)
}
}
const expected = new Supervisor(1);
console.log(expected);
const json = JSON.stringify(expected);
const actual = Supervisor.from(JSON.parse(json));
console.log(actual);
If you cant use the spread operation in 'mapToJSON' you could loop and push.
const mapToJSON = (map) => {
const result = [];
for (let entry of map.entries()) {
result.push(entry);
}
return result;
}
Really the only thing id change is have the constructor do less, just accept values, assign with minimal fiddling, and have a factory query the dom and populate the constructor with values. Maybe something like fromDOM() or something. This will make Supervisor more flexible and easier to test.
function Supervisor(options) {
this.id = options.id;
this.verif = null;
this.selections = options.selections || new Map();
this.change = false;
}
Supervisor.fromDOM = function(id) {
const selections = new Map();
const children = $("#ContentPlaceHolder1_checkboxes_div_" + id).children();
for (var i = 0; i < children.length; i++) {
if (i % 2 == 0) {
var checkbox = children[i];
var idCheck = checkbox.id.split("_")[2];
selections.set(idCheck, false);
}
}
return new Supervisor({ id: id, selections: selections });
};
console.log(Supervisor.fromDOM(2));
You can keep going and have another method that tries to parse a Supervisor from localStorageand default to the dom based factory if the localStorage one returns null.
I am new to programming, and I don't quite grasp the idea of utilizing class constructor in real life. For instance, let's just say I am trying to create a DOM event handler so I can take user input and push it into CreateTodoList.todos array.
class CreateTodoList {
constructor(list) {
this.todoList = list;
this.todos = [];
}
Then let's just assume that I have built addTodo() function which takes text parameter where an user enters her/his todo.
addTodo(text) {
this.todos.push(text);
this.todoList.appendChild(CreateTodoList.addtoList(text));
}
Here, addtoList creates DOM element that takes value of the user input.
This addTodo function, then pushes the text parameter into the array I made in constructor, while also calling addtoList that makes the DOM element.
Now, let's say I click on "add" button where it takes user input value.
I will build an event handler that responds to click which will add user input to the todoList.
CreateTodoList.eventHandler('click', (e) => {
let userText.todos = document.querySelector(#userInput).value;
addTodo(userText);
})
I am trying to build an eventHandler here, so I can add user input to todoList, and have implemented this several times, but had no luck but receiving reference error.
Below is my full code.
/** #format */
const add = document.querySelector('#btn_add');
let addInput = document.querySelector('#add');
const form = document.querySelector('#form');
class CreateTodoList {
constructor(list) {
this.todoList = list;
this.todos = [];
}
addtoList(text) {
let checkboxEl = document.createElement('span');
checkboxEl.classList.add('round');
let checkboxEl2 = document.createElement('input');
checkboxEl2.id = 'checkbox';
checkboxEl2.type = 'checkbox';
let checkboxEl3 = document.createElement('label');
checkboxEl3.htmlFor = 'checkbox';
checkboxEl.appendChild(checkboxEl2);
checkboxEl.appendChild(checkboxEl3);
let todoTextEl = document.createElement('input');
todoTextEl.value = text;
todoTextEl.disabled = true;
todoTextEl.classList.add('edit_input');
todoTextEl.id = 'edit_input';
todoTextEl.type = 'text';
todoTextEl.name = 'edit_input';
let todoTextEl2 = document.createElement('label');
todoTextEl2.htmlFor = 'edit_input';
let editEl = document.createElement('i');
editEl.classList.add('far');
editEl.classList.add('fa-edit');
let deleteEl = document.createElement('i');
deleteEl.classList.add('far');
deleteEl.classList.add('fa-trash-alt');
let dateEl = document.createElement('small');
dateEl.textContent = timeago.format(new Date());
let liEl = document.createElement('li');
liEl.appendChild(checkboxEl);
liEl.appendChild(todoTextEl);
liEl.appendChild(todoTextEl2);
liEl.appendChild(editEl);
liEl.appendChild(deleteEl);
liEl.appendChild(dateEl);
let list = document.querySelector('ul');
list.appendChild(li);
return liEl;
}
removeFromList(text) {
let list = document.querySelector('ul');
let childs = Array.from(list.childNodes);
let removable = child.find((i) => i.innerText === text);
return item;
}
//todos 배열(todo 데이터에) text를 추가한다.
//todoList 에 liEL(리스트 엘레먼트) 를 append 한다.
addTodo(text) {
this.todos.push(text);
this.todoList.appendChild(CreateTodoList.addtoList(text));
}
removeTodo(text) {
let removed = this.todos.filter((el) => el !== text);
todo.todoList.removeChild(CreateTodoList.removeFromList(text));
this.todos = removed;
}
get getList() {
return this.todos;
}
}
class Handlers {}
This function is called as a form submit, and further calls a new function for rendering the list of divs. After this is done the website is refreshed because of drag and drop functionality. The problem is that I cant seem to find a way to create an unique ID that persists through page refresh and isnt overwritten on page load because of ex: "let taskId = 0".
Any ideas? :)
function createNewTask(event){
if(document.querySelector("[name='description']").value === "") {
alert("Cannot add empty task.");
} else {
event.preventDefault();
let taskId = 0;
const description = document.querySelector("[name='description']").value;
const givenTo = document.querySelector("[name ='givenTo']").value;
const createdByName = document.querySelector("[name = 'workerName']").value;
const task = {taskId, description, givenTo, createdByName, section: 'task-section'};
const taskList = JSON.parse(window.localStorage.getItem("taskList")) || [];
taskId++;
taskList.push(task);
window.localStorage.setItem("taskList", JSON.stringify(taskList));
// renderTaskList();
renderStoredList();
//Reload page after createNewTask to activate draggable
location.reload();
}
}
Use length to get the next taskId.
function createNewTask(event){
if(document.querySelector("[name='description']").value === ""){
alert("Cannot add empty task.");
} else {
event.preventDefault();
const tasklist = JSON.parse(window.localStorage.getItem("taskList")) || []
let taskId = tasklist.length;
const description = document.querySelector("[name='description']").value;
const givenTo = document.querySelector("[name ='givenTo']").value;
const createdByName = document.querySelector("[name = 'workerName']").value;
const task = {taskId, description, givenTo, createdByName, section: 'task-section'};
taskList.push(task);
window.localStorage.setItem("taskList", JSON.stringify(taskList));
// renderTaskList();
renderStoredList();
//Reload page after createNewTask to activate draggable
location.reload();
}
}
As I cannot add a comment yet, I'll post it here as an answer.
What I would do on my end to keep track of the taskId is to also store the latest taskId that was last used in my localStorage, that way, it would persist.
window.localStorage.setItem('lastTaskId', taskId);
And then simply take that each time the page loads.
Hope this helps!
What if you assign taskId based on previous length of the taskList:
const taskList = JSON.parse(window.localStorage.getItem("taskList")) || [];
let taskId = taskList.length