<script type="module"> // <-- ========= здесь =============
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//=============
const script = document.createElement('script');
script.id = 'dynamic-script';
script.type = 'module'; //================= Добавляем этот атрибут================
script.src = "/static/js/" + scriptFile;
document.body.appendChild(script);
//=============
</script>const fn = () => {
document.getElementById('burger-menu').classList.toggle("burger-hidden");
document.getElementById('burger-button').classList.toggle("burger-icon-close");
}
document.querySelectorAll('.burger-icon').forEach(el=>el.addEventListener('click', fn))const deleteButton = document.querySelectorAll('.column__card-button');
const addButton = document.querySelector('.add_card')
const cardContent = document.querySelector('.column__card-content_add')
const columns = document.querySelectorAll('.column')
const columnTitle = document.querySelector('.column_title')
const mainContainer = document.querySelector('.main_container')
const toDoContainer = document.querySelector('.todo_container')
let actualCard = null;
const tasks = document.querySelectorAll('.column__card')
const areatxt = document.getElementById('textareaid')
addButton.addEventListener('click', function() {
let columnCardText = areatxt.value;
areatxt.value = ''
const newColumnCard = `<div class="column__card" draggable="true"><div
class="column__card-content">${columnCardText}</div><button class="column__card-button"></button></div>`
columnTitle.insertAdjacentHTML("afterEnd", newColumnCard);
//updateLocalStorage()
});
mainContainer.addEventListener('click', function(event) {
if (event.target.classList.contains('column__card-button')) {
const card = event.target.closest('.column__card');
if (card) {
card.remove();
}
}
//updateLocalStorage()
});
function dragStart(e) {
actualCard = e.target
e.target.classList.add("is-dragging");
};
function dragEnd(e) {
this.classList.remove('hovered');
};
function dragEnter(e) {
e.preventDefault();
this.classList.add('hovered');
};
function dragLeave() {
this.classList.remove('hovered');
};
function dragOver(e) {
e.preventDefault();
const activeElement = mainContainer.querySelector(`.is-dragging`);
const currentElement = e.target;
const isMoveable = activeElement !== currentElement && currentElement.classList.contains(`column__card`);
if (!isMoveable) {
if (e.target.classList.contains("column") && !this.contains(actualCard)) {
this.appendChild(actualCard);
}
return;
}
// e.clientY — вертикальная координата курсора в момент,
// когда сработало событие
const nextElement = getNextElement(e.clientY, currentElement);
// Проверяем, нужно ли менять элементы местами
if (
nextElement &&
activeElement === nextElement.previousElementSibling ||
activeElement === nextElement
) {
return;
}
this.insertBefore(activeElement, nextElement);
};
const getNextElement = (cursorPosition, currentElement) => {
// Получаем объект с размерами и координатами
const currentElementCoord = currentElement.getBoundingClientRect();
// Находим вертикальную координату центра текущего элемента
const currentElementCenter = currentElementCoord.y + currentElementCoord.height / 2;
// Если курсор выше центра элемента, возвращаем текущий элемент
// В ином случае — следующий DOM-элемент
const nextElement = (cursorPosition < currentElementCenter) ?
currentElement :
currentElement.nextElementSibling;
return nextElement;
};
for (const column of columns) {
column.addEventListener('dragenter', dragEnter);
column.addEventListener('dragleave', dragLeave);
column.addEventListener('dragover', dragOver);
column.addEventListener('drop', drop);
column.addEventListener('dragstart', dragStart);
column.addEventListener('dragend', dragEnd);
}
function drop(e) {
e.preventDefault();
actualCard.classList.remove("is-dragging");
actualCard = null;
this.classList.remove('hovered');
//updateLocalStorage();
};npm i -D @babel/preset-env{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: "defaults" }]
]
}
}
},if(name==='entity' && !value.match(/^\d+$/)) return // если имя равно entity и введены не только цифры - делаем возврат из ф-и (без изменения стейта)new Geomap( {} );
const content = `&1===e.nodeType)if(r="data-"+t.replace(K,"-$$&").toLow`;// создаем стрелочную функцию, принимающую два параметра
const countChars = (str, char) => {
// создаем переменные и присваиваим им значение 0
let i = 0;
let count = 0;
// запускаем цикл с предусловием
while (i < str.length) { // пока i меньше чем длина строки str
// исполняем тело цикла
// берем символ из строки str расположенный по индексу i и переводим в нижний регистр
// берем символ из аргумента функции и переводим в нижний регистр
if (str[i].toLowerCase() === char.toLowerCase()) { // сравниваем оба значения
// если совпало увеличиваем счетчик на 1
count = count + 1;
}
// перед новой итерацией цикла увеличиваем индекс на 1
i = i + 1;
}
// возвращаем из функции накопленный результат подсчета или начальное значение если совпадений не было
return count;
};
let result = countChars('abba#abba#abba#', '#') // пример использования
console.log(result); // 3element.val() это метод из jQuery. Вы уверены что у вашего input есть атрибут val? Выведите его в консоль сначала.
prefix -g на prefix --location=global Мне это помогло. Если что - вот ссылка на issues в библиотеке npm https://github.com/npm/cli/issues/4980
let test = () => {
let inp = document.querySelector('input')
let warn = document.createElement('div')
let att = inp.getAttribute('value')
inp.id = 'inpId'
let inpId = document.getElementById('inpId');
inpId.addEventListener("input", ()=>{
if (inpId.value > 3) {
warn.style.display = 'none';
}
})
warn.classList.add('hi');
warn.innerHTML = 'Тестовая штука';
inp.insertAdjacentElement('afterend', warn);
}
test();<select name="nm" id="nam">
<option value="QBC">QBC</option>
<option value="QEF">QEF</option>
<option value="GHI" selected>GHI</option> <!-- этот вариант будет выбран-->
<option value="KLM">KLM</option>
</select>import React, { useState, useEffect } from 'react'
const LocalStorage = () => {
const date = [
{ symbol: 'RU', label: 'рубль' },
{ symbol: 'USD', label: 'доллар' },
{ symbol: 'EUR', label: 'евро' }
]
const [curr, setCurrencies] = useState(date)
const [currentSymbol, setCurrentSymbol] = useState("EUR") // опция выбранная по умолчанию (если нет данных в localstorage)
// срабатывает один раз при загрузке компонента
useEffect(() => {
if(localStorage.getItem('symbol')) {
const item = localStorage.getItem('symbol')
setCurrentSymbol(item)
}
}, [])
// обработчик - срабатывает при выборе опции списка
const selectHandler = (e) => {
localStorage.setItem('symbol', e.target.value)
setCurrentSymbol(e.target.value)
}
return (
<div>
<select onChange={selectHandler} value={currentSymbol}>
{
curr.map(currencies => (
<option key={currencies.symbol} value={currencies.symbol}>
{currencies.symbol} {currencies.label}
</option>
)
)
}
</select>
</div>
)
}
export default LocalStorageimport React, { Component } from 'react'
class ClassLocal extends Component {
constructor(props){
super(props);
this.state = {
curr: [
{ symbol: "RU", label: "рубль" },
{ symbol: "USD", label: "доллар" },
{ symbol: "EUR", label: "евро" }
],
currentSymbol: "EUR"
}
}
componentDidMount() {
if(localStorage.getItem('symbol')) {
const item = localStorage.getItem('symbol');
this.setState({currentSymbol: item})
}
}
selectHandler = (e) => {
localStorage.setItem('symbol', e.target.value)
this.setState({currentSymbol: e.target.value})
}
render() {
return (
<div>
<select onChange={this.selectHandler} value={this.state.currentSymbol}>
{
this.state.curr.map(currencies => (
<option key={currencies.symbol} value={currencies.symbol}>
{currencies.symbol} {currencies.label}
</option>
)
)
}
</select>
</div>
)
}
}
export default ClassLocal