I do not know why I am being asked to place commas where periods should be. const cards is saying I can't set it there when this is the way to set a variable.
I have tried to change from const to let and restructure .forEach syntax
class TabLink {
constructor(tabElement) {
// assign this.tabElement to the tabElement DOM reference
this.tabElement = tabElement;
// Get the `data-tab` value from this.tabElement and store it here
this.tabData = this.tabElement.dataset.tab;
// We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task:
// Check to see if this.tabData is equal to 'all'
if (this.tabElement.dataset.tab === "all") {
// If `all` is true, select all cards regardless of their data attribute values
this.cards = document.querySelectorAll(".card");
} else {
// else if `all` is false, only select the cards with matching this.tabData values
this.cards = document.querySelectorAll(`.card[tabData="${this.tabData}"]`);
}
// Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class.
this.cards = Array.from(this.cards).map((card) => new TabCard(card));
// Add a click event that invokes this.selectTab
this.tabElement.addEventListener('click', () => { this.selectTab() });
}
selectTab() {
// Select all elements with the .tab class on them
// const tabs = document.querySelectorAll();
const tabs = document.querySelectorAll('.tab');
// Iterate through the NodeList removing the .active-tab class from each element
Array.from(tabs).forEach((tabs))
link.classList.remove(".active-tab");
}
//
// Select all of the elements with the .card class on them
const cards = document.querySelectorAll('.card');
// Iterate through the NodeList setting the display style each one to 'none'
cards.forEach(card => {
card.style.display = "none";
})
// Add a class of ".active-tab" to this.tabElement
this.tabElement = ".active-tab";
// Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here.
this.cards.forEach(card => card.selectCard());
console.log(this.cards);
}
'const' can only be used in a .ts file.
';' expected.
',' expected.
',' expected.
Unexpected token. A constructor, method, accessor, or property was expected.
Declaration or statement expected.
Related
I want to know how to keep the effect on my web page even if the page is refreshed.
My JS Code:
const button = document.querySelectorAll(".btn");
button.forEach((color) => {
color.style.backgroundColor = color.getAttribute("data-color");
color.addEventListener("click", () => {
const data = color.getAttribute("data-color");
const root = document.querySelector(":root");
const styles = {
"--bs-primary-rgb": data,
};
for (const [property, value] of Object.entries(styles)) {
root.style.setProperty(property, value);
}
});
});
What does this code do?
This code selects all elements with a class of btn and then applies a click event listener to each of them. When one of the buttons is clicked, it gets the value of the data-color attribute and sets it as the value of the --bs-primary-rgb CSS variable on the root element.
The querySelectorAll method returns a static (not live) NodeList of elements that match the specified CSS selector. The forEach method is used to iterate over the elements in the NodeList and apply the desired style changes to each element. The style property of an element is an object that represents the inline style of the element, and the setProperty method is used to set the value of a specific CSS property on that style object.
The getAttribute method is used to retrieve the value of the specified attribute of an element. In this case, the value of the data-color attribute is retrieved and used to set the value of the --bs-primary-rgb CSS variable.
Check the full app in codepen:
Click Here
You can use localStorage to keep the effect even when the page is refreshed. You save the value (in this case the color) to a key (I named yours "color") and when you reload the page the value from the key is retrieved, if there is no key nothing happens (text stays blue until you start clicking the buttons).
window.addEventListener("load", ()=> {
if (localStorage["color"]) {
const root = document.querySelector(":root");
const styles = {
"--bs-primary-rgb": localStorage.getItem("color"),
};
for (const [property, value] of Object.entries(styles)) {
root.style.setProperty(property, value);
}
} else {
return
}
});
const button = document.querySelectorAll(".btn");
button.forEach((color) => {
color.style.backgroundColor = color.getAttribute("data-color");
color.addEventListener("click", () => {
const data = color.getAttribute("data-color");
localStorage.setItem("color", data);
const root = document.querySelector(":root");
const styles = {
"--bs-primary-rgb": localStorage.getItem("color"),
};
for (const [property, value] of Object.entries(styles)) {
root.style.setProperty(property, value);
}
});
});
I am wondering how can I use a constant in the map function, basically meaning: I have saved correctly the option I want from my falling menu regarding the constant (I checked it with console.log), for instance I have a name chosen and then I want to use it in the map function but unfortunately I get all the elements undefined when I use the constant; when I replace the constant with a directly written "name", I get all the elements correctly with their names.
Filterhosts=() =>{
var newState = this.state.array.slice(); // in the state array is empty
const selectedOption = this.state.selectedOption;
const writtenOption = this.state.writtenOption;
console.log(selectedOption) //ok
const namearray= this.state.filteredhosts.map(host=> {
return (
host.software.map((sub, subindex) => {
if(selectedOption=="name" || selectedOption=="vendor") {
newState.push(sub.selectedOption) //when I write sub.selectedOption , I receive empty array with all elements as undefined otherwise I become the names of all elements
}
else {
if(sub.vulnerable==true){
newState.push(sub.vulnerability.cve)}
}
})
)
})
const filteredarray = newState.filter( function(item){
return item === writtenOption // here I become properly the searched name//vendor
}
// how to show the whole info for the searched name/vendor(cpe, cve, cvss etc.)
)
console.log(newState); //ok
console.log(filteredarray); //ok
}
Oh I see.
sub.name
is the same as
sub["name"]
which is also the same as
sub[selectedOption]
IF selectedOption is "name". So just use newState.push(sub[selectedOption]) and I think that should work for you.
When I create an array of classes in JavaScript, editing one affects all other created objects in the array. I'm on node version 8.11.4.
I tried using the .push() method to send an update to the array but it still affected every object in the array instead of just the one that was intended.
This is the class that the objects of the array are.
Tile.js
let isObstacle;
class Tile {
constructor(){
isObstacle = false;
}
setObstacle() {
isObstacle = true;
}
getObstacleStatus() {
return isObstacle;
}
}
module.exports = Tile;
This is the second class where the array of Tile objects is. Test.js
const Tile = require('./Tile');
let g = [];
//g[0] = new Tile();
//g[1] = new Tile();
g.push(new Tile());
g.push(new Tile());
console.log(g[0].getObstacleStatus());
console.log(g[1].getObstacleStatus());
//g[0].setObstacle();
g.push(g[0].setObstacle());
console.log(g[0].getObstacleStatus());
console.log(g[1].getObstacleStatus());
The expected results are:
false
false
true
false
The actual results are:
false
false
true
true
The g[0].setObstacle(); is supposed to only set the g[0] instance of isObstacle to true but instead it sets both g[0] and g[1] to true.
What you are doing is a class that is modifying a global variable called, isObstacle. you are declaring that variable outside your class.
just declare isObstacle as an attribute of your class.
class Tile {
constructor() {
this.isObstacle = false;
}
setObstacle() {
this.isObstacle = true;
}
getObstacleStatus() {
return this.isObstacle;
}
}
#Vinay in this TypeScript + AngularJS 1: How to connect enum with select directive? question shows a relatively simple way to get a array for building a select drop-down in angular.
Unfortunately, I try to ape this code and I get errors ... first upon declaring the 'colors' array if I use var or let... (but it works if I don't). Unfortunately, that just moves the error to the next variable declaration in the setup of the for loop. Unfortunately, here, I can't not put in a let or a var.
I'm sure this is simple, but I'm just banging me head and missing it.
enum Color {
Green = <any>"Green",
Red = <any>"Red",
Blue = <any>"Blue"
}
export class ClassName {
colors: string[] = []; // <-- get error here if I declare var or let
for (var item in Color) { // <-- get error here
if (Color.hasOwnProperty(item)) {
this.colors.push(item);
}
}
}
Property declarations belong in the body, but executable code goes in the constructor:
export class ClassName {
colors: string[] = []; // <-- get error here if I declare var or let
constructor() {
for (var item in Color) { // <-- get error here
if (Color.hasOwnProperty(item)) {
this.colors.push(item);
}
}
}
}
Could you please tell me how to how to set/update a clicked item in React.js?.
I want the value of the clicked element to change to "test". How can I setup such event handler to do this?
Here is my code
On item click I am trying to update the item like that
btnClick(obj) {
obj.hse = 'test';
console.log(obj);
// this.setState({
// data: [obj]
// });
}
Since your data object is an array, I think the easiest way to implement this is to send your btnClick() function the id of the element that was clicked, update that value, and then save the new state.
Codepen
Like so:
this.state.data.map((item, i) => {
return <li onClick = {
this.btnClick.bind(this, i)
> {
item.hse
} < /li>;
})
By changing map(item) => { to map(item, i) => { you make use of the index parameter of the Array map method. This i variable is then used when binding the btnClick function.
btnClick(id) {
let temp = this.state.data.slice();
temp[id].hse = 'test';
this.setState({
data: temp
});
}
Here, the id is the index of the item clicked. Start off by creating a shallow copy of the this.state.data and put it into a local temp variable. Then, change the hse property of temp[id]. Finally, update the data state with the local variable.
edit: fixed broken codepen link