We Keep Coding

Angular Column is not Displayed when Toggle is Open

In my code, I have a grid list where the user can add a column by sliding a toggle button. The code works fine but when I refresh the page, the column is not there even though the toggle is open. I have to close the toggle and re-open it in order to see the column. Here is my code what should I fix?
HTML:
<mat-slide-toggle [(ngModel)]="this._materialPlan.IncludeAdditionalProduction"
(change)="toggleAdditionalProduction()" class="mr-8">Ek Üretim</mat-slide-toggle>
TS:
constructor() {
this.initializeGridColumns();
}
initializeGridColumns() {
this.displayedColumns = [
'Sequence',
'StockIntegrationCode',
'ReceiptName',
'PackagingTheoricYieldQuantity',
'GeoType',
];
let itemIndex = 0;
if (this._materialPlan.IncludeAdditionalProduction == true) {
this.displayedColumns.push("AdditionalProductionQuantity");
}
else {
itemIndex = this.displayedColumns.indexOf("AdditionalProductionQuantity");
if (itemIndex > 0) {
this.displayedColumns.splice(itemIndex, 1);
}
}
this.displayedColumns.push("Actions");
}
toggleAdditionalProduction() {
if (this._materialPlan.IncludeAdditionalProduction == true) {
this.form.controls["AdditionalProductionQuantity"].clearValidators();
this.form.controls["AdditionalProductionQuantity"].updateValueAndValidity();
} else {
this.form.controls["AdditionalProductionQuantity"].setValidators(Validators.required);
this.form.controls["AdditionalProductionQuantity"].updateValueAndValidity();
}
this.initializeGridColumns();
}

After toggle happens, you need to call " initializeGridColumns() " to initialize the columns again.
This is based on the explanation you had on your question. Also you dont really show what is the function does upon toggle.

Open & Close Menu with the same button (Closing not working)

I'm trying to make an overlay menu that opens and close with the click of the same menu. I've tried using some solutions I've seen on this forum but the code I currently have only opens the menu and doesn't close it?
document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav(){
navSize = document.getElementById("myNav").style.width;
if (navSize == 20) {
return close();
}
return open();
}
function open() {
document.getElementById("myNav").style.width = "20%";
}
function close() {
document.getElementById("myNav").style.width = "0";
}
Here is the fiddle: https://jsfiddle.net/Santos1600/j2L7yga5/1/
I've already got the menu working while using a different button to close the menu, but I would prefer it, from a design point of view, if the same button did both actions on click.

there is an error in width calculation
function toggleNav() {
navSize = document.getElementById("myNav").offsetWidth;
if (navSize > 0) {
return close();
}
return open();
}
If you need it to close after clicking on the different entries
you have 2 options:
1) you can close the menu if you click in any link by just adding
onclick="toggleNav();"
to the specific links.
2) Or in a more generic way, add a class on links ex "mylink"
and
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'mylink') {
toggleNav();
}
}, false);
in your code

Try this: https://jsfiddle.net/reyq2064/
// document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav() {
navSize = document.getElementById("myNav").style.width;
if (navSize == '20%') {
return close();
}
return open();
}

How to back to className when menu is hide

I would like to make mobile menu witch changing background color and height from(10% to 100%. When menu is active nav—active hover all page for darkening)
const nav = document.getElementById("navigation");
const burger = document.getElementById("mobileBurger");
const menu = document.getElementById("mobileMenu");
burger.addEventListener("click", function() {
nav.classList.toggle("nav--active");
if (nav.classList.contains("nav--scroll")) {
nav.classList.remove("nav--scroll");
}
console.log(nav.classList.contains("nav"));
});
window.addEventListener("scroll", function() {
let scrolled = window.pageYOffset;
if (scrolled >= 40) {
nav.classList.add("nav--scroll");
} else nav.classList.remove("nav--scroll");
});
When nav is „nav—scrolled”, and I click on button, then I would like to leave only class=„nav nav—active”. Ok I did this, but how to back to „nav—scrolled” after hide menu. Of course only when it had this class?

I took a stab at it for you, but the html would be helpful to test it.
Notice moved the scroll check to a separate function to call when needed.
const nav = document.getElementById("navigation");
const burger = document.getElementById("mobileBurger");
const menu = document.getElementById("mobileMenu");
burger.addEventListener("click", function() {
// toggle returns a true or false based on if it adds/removes
if( nav.classList.toggle("nav--active") == false) {
// if it added (made inactive), lets check and see if scroll also applies.
checkScrolled();
} else {
if (nav.classList.contains("nav--scroll")) {
nav.classList.remove("nav--scroll");
}
}
console.log(nav.classList.contains("nav"));
});
window.addEventListener("scroll", function() {
checkScrolled();
});
function checkScrolled() {
let scrolled = window.pageYOffset;
if (scrolled >= 40 && nav.classList.contains("nav--scroll") == false) {
nav.classList.add("nav--scroll");
} else {
nav.classList.remove("nav--scroll");
}
}

Jquery If Else Statement Issue

I have multiple buttons and when I click each one I want an element associated with that button to slide down and then when I click the same button the same element slides back up. The code below works but if I click one button it slides down then I click the second button nothing happens because it runs the else if part of the code. How would I fix this?
var moreOption = 1;
$(".more-button").click(function(){
var buttonNumber = $(this).attr('buttonNumber');
if (moreOption === 1) {
$("#more"+buttonNumber).slideDown();
moreOption = 2;
} else if (moreOption === 2) {
$("#more"+buttonNumber).slideUp();
moreOption = 1;
}
});

Just use a data-attribute on the button and switch the state manually like this:
<button class="more-button" data-showMore="1" data-buttonNumber="1"/>
$(".more-button").click(function(){
var buttonNumber = $(this).data('buttonNumber');
var moreOption = $(this).data('showMore');
if (moreOption == '1') {
$("#more"+buttonNumber).slideDown();
$(this).data('showMore', '2');
} else if (moreOption == '2') {
$("#more"+buttonNumber).slideUp();
$(this).data('showMore', '1');
}
});

Javascript Thumbs up/down

I have the following javascript, which is linked to a thumbs up and thumbs down button. When each is click the other turns off. This works perfectly. However the localstorage part doesn't
At the moment, when i refresh the page both buttons come 'on' (their active state colour)
I was trying to use removeItem so that when a button is pressed the localstorage for the other is forgotten and it won't show. However they both still come one.
Any ideas
Updated; Changed to ThumbStatus
function thumbsup(){
document.getElementById("thumbsup").classList.remove("btn-default")
document.getElementById("thumbsup").classList.add("btn-success")
document.getElementById("thumbsdown").classList.remove("btn-danger")
document.getElementById("thumbsdown").classList.add("btn-default")
localStorage.setItem('ThumbStatus',up);
localStorage.removeItem('ThumbStatus', down);
}
function thumbsdown(){
document.getElementById("thumbsdown").classList.remove("btn-default")
document.getElementById("thumbsdown").classList.add("btn-danger")
document.getElementById("thumbsup").classList.remove("btn-success")
document.getElementById("thumbsup").classList.add("btn-default")
localStorage.setItem('ThumbStatus',down);
localStorage.removeItem('ThumbStatus', up);
}
function Loadthumbs1() {
//if something was already saved....
if ( localStorage.getItem('ThumbStatus', up) )
{
var up = localStorage.getItem('ThumbStatus', up);
}
document.getElementById("thumbsup").classList.add("btn-success")
}
function Loadthumbs2() {
if ( localStorage.getItem('ThumbStatus', down) ) {
var down = localStorage.getItem('ThumbStatus', down);
}
document.getElementById("thumbsdown").classList.add("btn-danger")
}

var tu = document.getElementById("thumbsup");
var td = document.getElementById("thumbsdown");
var thumbStatus = localStorage.getItem('ThumbStatus');
function thumbsup() {
tu.classList.remove("btn-default");
tu.classList.add("btn-success");
td.classList.remove("btn-danger");
td.classList.add("btn-default");
localStorage.setItem('ThumbStatus', 'up');
}
function thumbsdown() {
td.classList.remove("btn-default");
td.classList.add("btn-danger");
tu.classList.remove("btn-success");
tu.classList.add("btn-default");
localStorage.setItem('ThumbStatus', 'down');
}
function Loadthumbs() {
if (thumbStatus && thumbStatus === 'up' ) {
thumbsup();
}
if (thumbStatus && thumbStatus === 'down' ) {
thumbsdown();
}
}