Пишу на React
const [imageUrls, setImageUrls] = useState([]);
async function readAsDataURL(image) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(image);
});
}
useEffect(() => {
(async () => {
try {
const urlPromises = selectedImages.map(readAsDataURL);
const urls = await Promise.all(urlPromises);
setImageUrls(urls);
} catch (error) {
console.error(error);
}
})();
}, [selectedImages]);
return imageUrls.map((url, index) => <img src={url} alt="" key={`previewImage:${index}`} />);
Пытаюсь через document.querySelectorAll но тоже выходит ошибка
<script>
// Получаем все карточки товаров
const cards = document.querySelectorAll('.cart');
cards.forEach((card) => {
const addToCartLink = card.querySelector('.buy_button');
const inputElement = card.querySelector('.kolvo input');
const plusButton = card.querySelector('.kolvo .plus');
const minusButton = card.querySelector('.kolvo .minus');
// Функция для обновления ссылки при изменении значения input
const updateLink = () => {
const inputValue = inputElement.value;
const newLink = addToCartLink.getAttribute('href').replace(/q=\d+/, 'q=' + inputValue);
addToCartLink.setAttribute('href', newLink);
};
// plus
plusButton.addEventListener('click', () => {
inputElement.stepUp();
updateLink();
});
// minus
minusButton.addEventListener('click', () => {
inputElement.stepDown();
updateLink();
});
// Обработчик события при изменении значения input
inputElement.addEventListener('input', () => {
updateLink();
});
});
</script>
<div class="cart">
<a class="buy_button" href="/addtocart.php?id=387&q=1" rel="nofollow">Добавить в корзину</a>
<div class="kolvo">
<span class="minus">-</span>
<input type="number" value="1" min="1">
<span class="plus">+</span>
</div></div>
эти функции выполняются только когда, пользователь находится на сайте
node index.js
. // set localStorage
localStorage.setItem('myKey', 'myValue');
// get localStorage
let value = localStorage.getItem('myKey');
console.log(value); // myValue
const fs = require('fs');
// write
fs.writeFile('myFile.txt', 'myValue', (err) => {
if (err) throw err;
console.log('The file has been saved!');
});
// read
fs.readFile('myFile.txt', 'utf8', (err, data) => {
if (err) throw err;
console.log(data); // myValue
});
let Table = this.$refs.theTable
// rows
for(let rowIndex = 0; rowIndex < Table.rows.length; rowIndex++) {
let row = Table.rows[rowIndex];
// cells
for(let cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
// is data?
if(this.allDataOfDays[cellIndex] && this.allDataOfDays[cellIndex][rowIndex]) {
row.cells[cellIndex].innerText = this.allDataOfDays[cellIndex][rowIndex];
}
}
}
let user = {
name: "David",
age: 25,
}
function objectClone(object) {
let newObject = {};
for (let key in object) {
newObject[key] = object[key];
}
return newObject;
}
let user2 = objectClone(user);
console.log(user2.name); // выводит "David"
document.addEventListener('DOMContentLoaded', (event) => {
const videoBtn = document.querySelector('#video-btn');
const videoPicture = document.querySelector('.video__picture');
videoBtn.addEventListener('click', function () {
videoPicture.classList.add('none');
});
});
// get DOM elements
const searchInput = document.getElementById('searchInput');
const resultsContainer = document.getElementById('resultsContainer');
// search from array
function searchBooks(query) {
return CLASS5.filter(book => {
return book.query.toLowerCase().includes(query.toLowerCase())
|| book.athor.toLowerCase().includes(query.toLowerCase())
|| book.pages.toLowerCase().includes(query.toLowerCase())
|| book.age.toLowerCase().includes(query.toLowerCase())
|| book.classn.toLowerCase().includes(query.toLowerCase());
});
}
// print
function displayResults(results) {
resultsContainer.innerHTML = '';
if (results.length === 0) {
resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
return;
}
results.forEach(book => {
const bookCard = document.createElement('div');
bookCard.innerHTML = `
<h2>${book.query}</h2>
<p>${book.athor}</p>
<p>${book.pages}</p>
<p>${book.age}</p>
<p>${book.classn}</p>
<img src="${book.images}" alt="Book Image">
`;
resultsContainer.appendChild(bookCard);
});
}
// handler
searchInput.addEventListener('input', (event) => {
const query = event.target.value;
const results = searchBooks(query);
displayResults(results);
});
подскажите библиотеку, в которой можно - такую же легкую, как и эта, то есть, без наворотов.
да рядов может быть гораздо больше и при адаптации в ряду может быть и 2 и 1 элемент
async sendNewData() {
await this.requestToServer(url);
console.log(this.failMessage);
}
class Lists {
constructor(items, failMessage) {
this.items = items;
this.failMessage = failMessage;
}
async requestToServer(url) {
let response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=utf-8',
}
});
if (response.ok) {
this.items = await response.json();
} else if (response.status == 422) {
this.failMessage = await response.json();
}
}
async sendNewData(url) {
await this.requestToServer(url);
console.log(this.failMessage);
}
}
Dragscroll is a micro JavaScript library (910 bytes minified)
<button id="myButton">Перейти в чат</button>
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
history.pushState(null, null, '?act=show&id=123');
});
Как выключить эту перегрузку?