Logout button class, Im creating instance to connect it with API. After the moment instance created it is immediately activated like the button was pushed
Can you help to understand what is wrong?
I'm just beginner
class LogoutButton {
constructor() {
[this.logoutBtn] = document.getElementsByClassName('logout');
this.action = (f) => f;
this.logoutBtn.addEventListener('click', this.logoutClick.bind(this));
}
logoutClick(event) {
event.preventDefault();
this.action();
}
}
instance
"use strict"
let newLogoutButton = new LogoutButton();
const logoutSuccess = (data) => {
if (data.success === true) {
location.reload();
} else {
alert("");
}
};
newLogoutButton.action = ApiConnector.logout(logoutSuccess);
the issue is with the last line
newLogoutButton.action = ApiConnector.logout(logoutSuccess);
change it to
newLogoutButton.action = () => ApiConnector.logout(logoutSuccess);
The last line needs to be a function, right now you're just immediately calling .logout()
newLogoutButton.action = () => ApiConnector.logout(logoutSuccess);
Related
I'm trying to keep what I save in local storage on the page, that way if I were to refresh I would still have whatever I entered in the textarea box.
However I'm not sure if it's because I am using a variable that assigns to e.target then the relative path to what I am trying to save, but when I console.log my variable it says it's not defined and I'm assuming that my issue is because I don't fully understand jQuery.
function updateHours() {}
function handleSave(e) {
var value = $(e.target).siblings('.description').val()
var hour = $(e.target).closest('.time-block').attr('id')
localStorage.setItem(hour, value)
}
function main() {
updateHours();
$(document).on('click', '.saveBtn', handleSave)
console.log(localStorage.getItem(value))
}
$(document).ready(main)
Try something like this:
function updateHours(){
document.querySelectorAll('.time-block').forEach(el => {
const savedValue = localStorage.getItem(el.id);
const description = el.querySelector('.description');
if (savedValue && description) {
console.debug("Load value", el.id, savedValue);
description.value = savedValue;
}
});
}
function handleSave(e){
const el = e.target.closest('.time-block');
if (!el) { return; }
const description = el.querySelector('.description');
if (!description) { return; }
console.debug("Save value", el.id, description.value);
localStorage.setItem(el.id, description.value);
}
function main(){
updateHours();
document.addEventListener('click', e => {
if (!e.target.classList.contains('saveBtn')) { return; }
handleSave(e);
});
}
window.addEventListener('DOMContentLoaded', main);
I have function in my application which returns the student details by making an ODATA call.
However the below code returns "this.edmOdataClient.query is not a function" error.
value of Id that is passed to the function is
4B199,9h7dH,ATC3S,fDB5Y,h33Ny,kousB,lTibg,nuGM
Below is my code snippet
async getStudent(Id) {
try {
if (Id != undefined) {
let index: number;
for (index = 0; index < Id.length; index++) {
const element = Id[index];
console.log("ELEMENT" +element);
this.student = await this.OdataClient.get<any>
(
this.edmOdataClient
.query(`CD_STUDENT`)
.filter(new FilterClause("SECTION").eq("A"))
.andFilter(new FilterClause("ID").eq(element))
.select(["NAME", "GRADE"])
.orderBy("ID")
).then(result => result.value[0])
}
}
return this.student;
}
catch (error) {
logger.info(error.message)
return error;
}
Also is there a way to check result.value.length?
When am trying to do so am getting error that result is undefined
this is only something you can call if your function belongs to a class (also note that arrow functions dont respond to this unless you bind the function)
const externalFunc = () => {
console.log('external func')
}
class MyClass {
constructor () {
this.externalFunc = externalFunc.bind(this)
}
myFuncOne () {
console.log('func one')
}
myFuncTwo () {
console.log('func two')
this.myFuncOne()
}
}
const klass = new MyClass()
klass.myFuncTwo()
// => func two
// => func one
klass.externalFunc()
// => external func
in your code, essentially the error is saying that getStudent is unable to reach edmOdataClient because its not bound to this
whatever class your code is running within doesnt have access to edmOdataClient
This is my code:
window.onload = function ()
{
var user = firebase.auth().currentUser
var login = document.getElementById("NavLogin");
if (user) {
login.innerHTML = "Account";
login.href = "AccountPage/AccountPage.html";
}
else {
login.innerHTML = "Login";
login.href = "AccountPage/LoginPage.html"
}
}
I have tried changing it to the onload of the body, but that didn't help either. I do not understand why it only works if called manually.
From your code I can see that you need to wait until #NavLogin element is loaded. If this element needs to be present in your page to run the rest of the code, then I would suggest you to use a pulling function like bellow:
function waitForElement(selector, cb) {
var tick = setInterval(function () {
var target = document.querySelector(selector);
if (null !== target) {
clearInterval(tick);
cb(target);
}
}, 200);
};
Then you can call the pulling function and pass your target element as the first parameter:
waitForElement("#NavLogin", function(login){
if (user) {
login.innerHTML = "Account";
login.href = "AccountPage/AccountPage.html";
}
else {
login.innerHTML = "Login";
login.href = "AccountPage/LoginPage.html"
}
})
If the target element is found, the callback function will be called and the target element will be passed as parameter to the callback function
So, I'm trying to access the two functions within the function within a Class. modal_1() as shown below in the code. The console.log("inside 1st"); works fine, but when im trying to go further ( e.g. modal_1.show_modal_1(); ) it gives me the following error message:
Modals Class:
const Modals = class {
modal_1(){
console.log("inside 1st");
var hide_modal_1 = function () {
console.log("hide modal 1");
//document.getElementById("modal_setup3DScene").style.display = "none";
};
var show_modal_1 = function() {
console.log("show modal 1");
//document.getElementById("modal_1-content").style.display = "block";
};
}
};
What I use to call the Modals Class:
let modals_List;
function setup() {
modals_List = new Modals();
modals_List.modal_1().show_modal_1();
}
You do not explicitly return something inside the function modal_1, so the return value will be undefined. Then you are trying to call show_modal_1() on undefined. Because that property does not exist on it, you get this error.
You can solve it by returning the functions as follows:
const Modals = class {
modal_1() {
console.log("inside 1st");
return {
hide_modal_1: functio () {
console.log("hide modal 1");
},
show_modal_1: function() {
console.log("show modal 1");
}
}
}
};
I'm created a function that stops its parent if a condition is given:
handleUserSubmit () {
this.userForm.options.hasFormSubmitted = true
if (!this.userForm.options.isFormValid) return
},
handleUpdateUser () {
const fields = this.userForm.schema
this.userInput.buildId = this.user.objectId
this.handleUserSubmit()
// rest of code
}
However the rest of the code runs no matter what the condition is. What am I doing wrong?
Move the conditional return to the function from which you need to return from:
handleUserSubmit () {
this.userForm.options.hasFormSubmitted = true
return !this.userForm.options.isFormValid;
},
handleUpdateUser () {
const fields = this.userForm.schema
this.userInput.buildId = this.user.objectId
if(this.handleUserSubmit()) return;
// rest of code
}