Choose item by name and color - javascript

I want my bot to choose an item from this site https://www.supremenewyork.com/shop/all/t-shirts, by name and color, but I was able to make it work only when it's choosing by name or color, not both. The code of it looks like this
function pickItem() {
chrome.storage.sync.get("itemName", function(data) {
let items = document.getElementsByClassName("name-link");
for(i = 0; i < items.length; i++) {
if ((items[i].innerHTML).includes(data.itemName)) {
chrome.runtime.sendMessage({redirect: items[i].href});
break;
}
}
})
}
This code is supposed to choose both name and color, but isn't working. I would be very thankful for any hints.
function pickItem() {
let items = document.getElementsByClassName("name-link");
chrome.storage.sync.get(["itemName", "color"], function(data) {
for(i = 0; i < items.length; i++) {
if ((items[i].innerHTML).includes(data.itemName)) {
var name_item_found = items[i];
for(j= 0; j < name_item_found.length; j++) {
if((name_item_found[j].innerHTML).includes(data.color)) {
chrome.runtime.sendMessage({redirect: name_item_found[j].href});
break;
}
}
}
}
})
}

I've found a solution, so I'm posting it here if someone has the same problem in the future.
function pickItem() {
let items = document.getElementsByClassName("name-link");
chrome.storage.sync.get(["itemName", "color"], function(data) {
for(i = 0; i < items.length; i++) {
if(items[i].innerHTML == data.itemName) {
for(j = 0; j < items.length; j++) {
if(items[j].innerHTML == data.color) {
if(items[i].href == items[j].href) {
chrome.runtime.sendMessage({redirect: items[i, j].href})
}
}
}
}
}
})
}

Related

can anyone explain what are these functions doing

function deleteParentNodeOnClick() {
for (var i = 0; i < deleteButton.length; i++) {
deleteButton[i].addEventListener("click", deleteNodeOnClick);
}
}
function deleteNodeOnClick(e) {
var trash = document.querySelectorAll("i");
for (var ind = 0; ind < trash.length; ind++) {
console.log(e);
this.parentNode.parentNode.remove();
}
}

How to pass a value from one function to another

var boxes = document.getElementsByName('toggle');
function markPreceding() {
var curIndex = null;
for (var j = 0; j < boxes.length; j++) {
if (boxes[j].checked) {
curIndex = j;
}
}
}
function checkInputs() {
for (var k = 0; k <= curIndex.length; k++) {
boxes[k].checked = true;
}
}
for (var i = 0; i <= boxes.length; i++) {
boxes[i].onchange = markPreceding;
boxes[i].onchange = checkInputs;
}
<input type="checkbox" id="product-1" name="toggle">
<input type="checkbox" id="product-2" name="toggle">
<input type="checkbox" id="product-3" name="toggle">
<input type="checkbox" id="product-4" name="toggle">
<input type="checkbox" id="product-5" name="toggle">
Have a problem passing this "curIndex" value to checkInputs function.
This should check inputs before checked input and get its value to do it.
Only ES5 synthax needed for this project.
EDIT: The ES5 Syntax way
const boxes = document.getElementsByName('toggle');
boxes.forEach(function(box, I) {
box.onclick = function(e) {
markPreceding(i);
};
});
function markPreceding(i) {
for (var j = 0; j < boxes.length; j++) {
if(j <= i) {
document.getElementById('product-' + (j + 1)).checked = true;
} else {
document.getElementById('product-' + (j + 1)).checked = false;
}
}
}
ORIGINAL:
Try using this:
const boxes = document.getElementsByName('toggle');
boxes.forEach((box, i) => {
box.onclick = (e) => {
markPreceding(i);
};
});
function markPreceding(i) {
for (var j = 0; j < boxes.length; j++) {
if(j <= i) {
document.getElementById(`product-${j + 1}`).checked = true;
} else {
document.getElementById(`product-${j + 1}`).checked = false;
}
}
}
For some reason, there seems to be an issue with updating the inputs through the NodeList array returned by document.getElementsByName. Not sure why, but this code has been verified. See working example here.

Is only able to use the last element of the antZipCodes array when using the pestDisplay function

I wrote some JS that involves targeting the DOM, specifically a text input form. It only changes the display for the last element of the array when the user types in 95827. If the user types in 95828 or 95604, the display isn't filtered properly.
Here's a link to the full code.
I was told it may have to do with the removeDisplay function and how it's iterating through display (divs), but still can't manage to fix it.
Still new to DOM Manipulation.
var display = document.querySelectorAll(".display");
var zipCodeSearch = document.querySelector("#site-search");
var ants = document.querySelector("#ants");
const antZipCodes = [95828, 95604, 95827];
zipCodeSearch.addEventListener('change', function(e) {
// for(var i = 0; i < antZipCode.length; i++) {
// if(antZipCode[i] === Number(e.target.value)) {
// removeDisplay(displayNone);
// addDisplay(ants);
// }
// }
pestDisplay(antZipCodes, ants, display, e);
});
function removeDisplay(items) {
for(var i = 0; i < items.length; i++) {
items[i].style.display = "none";
}
}
function addDisplay(item) {
item.style.display = "block";
}
function displayAll(items) {
for(var i = 0; i < items.length; i++) {
items[i].style.display = "block";
}
}
function pestDisplay(arr, id, display, e) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] === Number(e.target.value)) {
removeDisplay(display);
addDisplay(id);
} else {
displayAll(display);
}
}
}

Why do all divs have the same name?

I want to delete after clicking the product button, but it does not work properly I do not know why. It does not remove the correct object from the table
document.addEventListener('click', function(e) {
if (e.target.id === 'removeItem') {
var divWithItem = document.getElementsByClassName('containerBasket__allProducts__product');
// Pobieram name itemu
var nameItem = e.target.parentElement.parentElement.getAttribute('name');
var thisItemDiv = e.target.parentElement.parentElement;
var thisItem = JSON.parse(products[nameItem]);
products.splice(thisItem, 1);
localStorage.setItem('product', JSON.stringify(products));
thisItemDiv.remove();
for (var i = 0; i < products.length; i++) {
for (var j = 0; j < divWithItem.length; j++) {
divWithItem[j].setAttribute('name', [j]);
}
}
console.log(products);
}
});
Before looping
After looping
Why does a div with the same name?

What is wrong with this javascript codes

see the code.
Thanks for the help everyone. Much appreciated for the valuable feedback. But it haven't helped. I really thank you.
$.get("http://nominatim.openstreetmap.org/search?q=pekin,+china&format=json&polygon=1&addressdetails=1").done(function(data)
{
var aJsonData = new Array();
var iBiggest = 0;
aJsonData = JSON.parse(data);
aData = aJsonData;
for(var i=0; i < aData.length; i++)
{
if(i != 0)
{
if((aData[i].polygonpoints.length) > (aData[iBiggest].polygonpoints.length))
{
iBiggest = i;
}
}
}
alert(iBiggest);
for(var j=0; j < aData[iBiggest].polygonpoints.length; j++)
{
//alert(aData[iBiggest].polygonpoints[j]);
}
});
Your for loop is wrong, the array index will start from 0 to length - 1 so i <= aData.length is wrong.
So the loop should be
$
.get("http://nominatim.openstreetmap.org/search?q=london,+england&format=json&polygon=1&addressdetails=1")
.done(function(data) {
var iBiggest = 0;
for (var i = 1; i < data.length; i++) {
if ((data[i].polygonpoints.length) > (data[iBiggest].polygonpoints.length)) {
iBiggest = i;
}
}
// this is not working
alert(iBiggest);
for (var j = 0; j < data[iBiggest].polygonpoints.length; j++) {
// alert(aData[iBiggest].polygonpoints[j]);
}
}, 'json');
Demo: Fiddle
I solved it.
$.getJSON("http://nominatim.openstreetmap.org/search?q=pekin,+china&format=json&polygon=1&addressdetails=1", function(data)
{
var iBiggest = 0;
for(var i = 1; i < data.length; i++)
{
if(data[i].polygonpoints != 'undefined' && data[i].polygonpoints)
{
if((data[i].polygonpoints.length) > (data[iBiggest].polygonpoints.length))
{
iBiggest = i;
}
}
}
alert(iBiggest);
for(var j = 0; j < data[iBiggest].polygonpoints.length; j++)
{
alert(data[iBiggest].polygonpoints[j]);
}
});

Categories