The array I'm trying to manipulate
const choices = Array.from(document.getElementsByClassName("choice-text"));
when I console.log this I get this
I'm trying to access that p.choice-text, choice-text is a class in my html btw and all I want to do is remove a class from the classList. I can't for the life of me figure it out any help would be appreciated.
Update:
tried
choices.forEach(p => {
p.classList.remove("unwanted-class");
})
did not work
You can use a forEach loop to loop through the elements and do whatever you want then:
const choices = Array.from(document.getElementsByClassName("choice-text"));
choices.forEach((p) => {
p.classList.remove('another-class');
}
You could alternatively use a for loop without having to convert the result to an array:
const choices = document.getElementsByClassName("choice-text");
for (var i = 0; i < choices.length; i++) {
choices[i].classList.remove('another-class');
}
Related
I am trying to loop through and increment the following:
var result_types = document.querySelectorAll('[data-title]')[0].attributes[2].nodeValue
specifically to grab and increment this value:
[0].attributes
Currently, I have the following:
var card = document.querySelectorAll('[data-title]')[0].attributes[2].nodeValue;
for (var i = 0; i < card.length; i++) {
console.log(card[i]);
}
I am trying to get this [0].attributes to increment to [1].attributes etc. when it is clicked
I am not sure what you are asking here, but if the issue is looping through the elements, this is happening because you get a NodeList back from querySelectorAll and not an array. Below will let you loop through node elements.
const nodes = document.querySelectorAll('.nodes');
[].forEach.call(nodes, (singleNode) => {
//Whatever you want.
})
boxIds => an array of unique file IDs received.
Every cluster has an array of files.
I am looking to iterate over each cluster and look for a matching file id, if that id exists, remove that file from that specific cluster.
For some reason I am getting erroneous results while using splice(), since it's mutating the original array this creates a result that returns an array and removes every other file.
moveFilesToCluster: function(state,payload){
const boxIds = payload.boxIds;
const moveToClusterId = payload.clusterId;
let fileAddToCluster = [];
state.assignmentClusters.forEach(cluster =>{
cluster.files.slice().forEach((file,index) =>{
if (_.includes(boxIds, file.id)){
fileAddToCluster.push(file);
cluster.files.splice(index,1)
}
});
});
}
I also tried (in this code) to add slice() before the forEach() (see above), but that isn't really delivering.
I also tried (in this code) to add slice() before the forEach() (see above), but that isn't really delivering.
As I said in a comment, I find it surprising that that isn't working. Using slice as in your question clones cluster.files and then loops through the clone, and you're modifying the original. That should work. It's not how I'd recommend doing it, but it should work.
The classic way to do this would be with filter:
const boxIds = payload.boxIds;
const moveToClusterId = payload.clusterId;
let fileAddToCluster = [];
state.assignmentClusters.forEach(cluster =>{
cluster.files = cluster.files.filter(file) {
if (_.includes(boxIds, file.id)){
fileAddToCluster.push(file);
return false;
}
return true;
});
});
But if you want to modify the array in place, you could use a boring old while loop and only increment the index if you don't remove the entry:
const boxIds = payload.boxIds;
const moveToClusterId = payload.clusterId;
let fileAddToCluster = [];
state.assignmentClusters.forEach(cluster =>{
let i = 0;
while (i < cluster.files.length) {
if (_.includes(boxIds, file.id)){
fileAddToCluster.push(file);
cluster.files.splice(i, 1);
} else {
++i;
}
}
});
I would like to make a function which takes a string as input, creates several elements, then appends each element to the element previously created, so that the text is displayed as a list item, within a div, within a span. The intent is to eventually make a basic to do list, but for now I'm stuck on the basic steps
I thought that a for loop could be useful for the creation of elements, though I can't figure out how to append what I have previously appended. Here's how I started:
const elementsArray = [
'ol',
'li',
'div',
'span',
];
const makeToDoItem = (toDoItem) => {
for (i = 0; i < elementsArray.length; i++) {
const createElement =
document.createElement(elementsArray[i]);
document.body.appendChild(createElement);
};
};
makeToDoItem("post on stackoverflow");
I understand that
document.body.appendChild(createElement);
is doing what I am telling it to do: create four elements in the body. How can I append them the way I would like to?
Is the .map function better for this? I am having trouble grasping how to apply .map here.
Thanks for your help!
const elementsArray = [
'ol',
'li'
];
const makeToDoItem = (toDoItem) => {
for (i = 0; i < elementsArray.length; i++) {
const createElement =
document.createElement(elementsArray[i]);
if (elementsArray[i] === 'li') {
createElement.textContent = toDoItem;
}
document.body.appendChild(createElement);
};
};
makeToDoItem("post on stackoverflow");
makeToDoItem("another post");
You can do the above but instead you probably want to create the <ol> in HMTL and then append <li> elements inside it.
I'm trying use js onmousehover to hover over an image and in a seperate fixed location tell me the name of said image. I have successfully done this but I can only get it to work on the first element when I have about six that I need to do. here is a sample of my code:
function getElementsById(ids) {
var idList = ids.split(" ");
var results = [], item;
for (var i = 0; i < idList.length; i++) {
item = document.getElementById(idList[i]);
if (item) {
results.push(item);
}
}
return(results);
}
function hover(description) {
console.log(description);
document.getElementsById('content content1').innerHTML = description;
}
and to call it I've been using this:
<div class="product-description-box">
<p>
<div class="colorHeading">colors available: <span class="selectedColor" id="content"></span></div>
<div class="prodColors"></div>
</p>
</div>
I am using different ids for each section. Js is for sure not my strong suit so any help would be appreciated!
A faster way of doing it is to pull your elements collection and then convert it into an array:
Like so:
[].slice.call(document.getElementsByClassName("box"))
.forEach(function(element) {element.addEventListener("mouseover", checkBoxColor);});
This calls slice on the collection of HTML elements returned by getElementsByClassName in order to convert it into an Array. After that I run the forEach method to add the event listener to each HTML element.
Fiddle: https://jsfiddle.net/0saLvq2q/
In your case if you need to return multiple elements by many different ID's you can use querySelectorAll() to pull the elements instead of getElementsByClassName().
'ids' isn't automatically a list. What you want to use is the Arguments Object.
function getElementsById() {
var i, results = [], item;
for (i = 0; i < arguments.length; i++) {
item = document.getElementById(arguments[i]);
if (item) {
results.push(item);
}
}
return(results);
I'm using the DuracellTomi datalayer plugin to push cart data from woocommerce to a GTM model to handle some tracking.
The DuracellTomi plugin pushes content to the transactionProducts[] array in the following format:
transactionProducts: Array[1]
0 : Object
category:""
currency:"USD"
id:8
name:"Test"
price:100
quantity:"1"
sku:8
I'd like to loop through this array and unstack it into three separate arrays, pricelist, skulist, and quantitylist. Currently I anticipate doing so as some variation on
//Get Product Information
if(stack = {{transactionProducts}}){
for(i = 0; i < stack.length; i++) {
if(stack.i.sku){
skulisttemp.i = stack.i.sku;
}
if(stack.i.price){
pricelisttemp.i = stack.i.price;
}
if(stack.i.sku){
quantitylisttemp.i = stack.i.quantity;
}
}
{{skulist}} = skulisttemp;
{{pricelist}} = pricelisttemp;
{{quantitylist}} = quantitylisttemp;
}
Obviously this is not going to work because of how the tag referencing is set up, but I'm wondering if anyone has dealt with this and knows what the best way to index through these arrays might be. (For those who don't know, the square bracket array call doesn't work with GTM variables and instead the . format is used instead.)
You would need to create 3 variable type custom javascript function that picks your required value from dataLayer and returns it in an array.
Something like
function(){
var products = {{transactionProducts}};
var skuArray = [];
for(i = 0; i < products.length; i++) {
if(products[i].sku){
skuArray.push(products[i].sku)
}
}
return skuArray
}
hope this helped you :)