Почему? Событие щелчка работает программно, но не с помощью мыши.

Трудно показать вам весь код, но, возможно, вы что-то о нем знаете. Я создаю событие клика, как показано ниже: Если после addEventListener я добавляю divSel.click(), щелчок работает. НО если я нажму кнопку мышкой, то это не сработает. Кто-нибудь, пожалуйста, скажите мне, почему????

 


divDataSel = document.createElement("div");


divBlock.appendChild(divDataSel); 


divSel = document.createElement("div");


divSel.className = "Button1aSm";


if(oBlockRec.Data.nChtData == 1) divSel.classList.add("Button1aSmOn"); 


divSel.innerHTML = "Count";


divDataSel.appendChild(divSel);


divSel.addEventListener("click", (evt) => { setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, 1) });


if(is_numeric(arData0.Avg) || arData0.Avg == "n/a") {


divSel = document.createElement("div");


divSel.className = "Button1aSm";


if(oBlockRec.Data.nChtData == 2) divSel.classList.add("Button1aSmOn"); 


divSel.innerHTML = "Average";


divDataSel.appendChild(divSel);


divSel.addEventListener("click", (evt) => { setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, 2) });


}


if(is_numeric(arData0.Pcnt)) {


divSel = document.createElement("div");


divSel.className = "Button1aSm";


if(oBlockRec.Data.nChtData == 3) divSel.classList.add("Button1aSmOn"); 


divSel.innerHTML = "Percent";


divDataSel.appendChild(divSel);


divSel.addEventListener("click", (evt) => { setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, 3) });


}


if(is_numeric(arData0.Snt)) { 


divSel = document.createElement("div");


divSel.className = "Button1aSm";


if(oBlockRec.Data.nChtData == 4) divSel.classList.add("Button1aSmOn"); 


divSel.innerHTML = "Sentiment Avg.";


divDataSel.appendChild(divSel);


divSel.addEventListener("click", (evt) => { setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, 4) });


}

Код (разметка):

Спасибо за ответ.

Я программирую Javascript и HTML около 25 лет, так что, возможно, опыта недостаточно; образование. Код находится в функции, и все переменные ограничены этой функцией.

Я просто исключил это из поста. Я не уверен, что вы подразумеваете под этим: «Кажется, вы пытаетесь получить доступ к какому-то глобальному элементу внутри обработчика событий». Вы имеете в виду oBlockRec? Это переменная в функции, в которой находится этот код.

Я полагаю, я мог бы сохранить BlockIdx в атрибуте набора данных или что-то в этом роде. Блоки кода внутри вызовов addEventListener имели доступ к переменной oBlockRec, поэтому я не вижу в этом проблемы. Этот код не работает.

У него нет доступа к oBlockRec, а event.currentTarget.value не является параметром.

Это целое число, указывающее отображаемое числовое значение (cnt, avg, pcnt или sntavg). Полагаю, я мог бы поместить это и в атрибут набора данных, но — почему?

onclick = (событие) => {

setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, event.currentTarget.value);

}, // по щелчку

Я бы сказал ДА, дикая догадка.

У меня есть еще одна функция для другого отчета, которая использует точный тот же код (чего я обычно не делаю), и она работает нормально. Это определенно была проблема с Javascript.

Я переписал все это, используя строковую переменную и внутренний HTML.

Я добавил клики addEventListener после установки html. Теперь все работает нормально.

Весь полученный HTML-код находится в одном и том же месте.

События кликов теперь работают. Ваше использование Object.assign интересно.

Я не уверен, почему вы его используете, но я немного исследую это. Мне всегда интересно учиться, поэтому я ценю ваш ответ. Еще раз спасибо.

Спасибо за ответ.

Нет, ничего сверх этого нет.

Я не могу показать страницу, потому что она является собственностью пользователя и т. д. . . Извини.

Таблица отчета следует за кнопками (не «над» и «под» ними).

Если я не включаю таблицу, кнопки работают нормально.

Я попробовал добавить кнопки после добавления таблицы.

На этот раз кнопки вообще не появились.

Я сделал console.log(divDataSel.innerHTML). Кнопки были в html.

К вашему сведению: класс CSS для кнопок является стандартным для этого приложения.

В этом классе существуют сотни кнопок.

Они все появляются.

Я добавил красную рамку к divDataSel, и браузер отобразил плоскую красную линию прямо над таблицей.

В конце концов я переписал код, используя строковую переменную html вместо создания элементов.

Я использовал .innerHTML, чтобы добавить код на страницу.

После того, как все было нарисовано, я добавил код .addEventListener('click'...).

Теперь все выглядит так, как и должно быть, и события щелчка работают нормально.

Я ненавижу Javascript, потому что он совершенно любительский.

Мне надоело бесконечно искать обходные пути для плохого языка программирования. Еще раз спасибо за ответ.

Итак... ты не фанат Slayer? Или группа Уке? Мне нравится кавер группы Сары и Роба «Уке». Удивлен, что ты не прокомментировал, кто мой аватар... Скажем так, у него есть яйца. МАЛЬЧИК! Так что хватайте своего уке и приводите с собой друга, потому что пришло время воскресной группы уке.

1) Если вы не намерены перевернуть птицу пользователям, не использующим мышь и не использующим сенсорный ввод, не устанавливайте onclick на DIV.

Навигация по нему невозможна с помощью клавиатуры, и он может даже сообщать об ошибках.

2) Невозможность объявить «var» или определить область действия, например «let/const», вероятно, является значительной частью ваших проблем.

3) Не используйте внутренний HTML, если вы действительно не используете разметку.

4) Object.assign — ваш друг.

Как и функции.

Гораздо меньше функциональных выражений теперь обеспечивают нам изоляцию области действия благодаря let/const.

В общем, я бы сказал, что ваше недовольство тем, что JavaScript является «игрушкой», заключается в том, что вы недостаточно узнали о JavaScript или не поняли, что делает JavaScript мощным.

Догадываюсь с большим трудом, но:

 


{ // scope isolation


const


divDataSel = divBlock.appendChild(document.createElement("div")),


onclick = (event) => {


setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, event.currentTarget.value);


}, // onclick


makeButton = (textContent, value) => {


let className = "Button1aSm" + (


oBlockRec.Data.nChtData === value ?


"Button1aSmOn" :


""


);


divDataSel.appendChild(


Object.assign(


document.createElement("button"),


{


className,


onclick,


textContent,


type : "button", // so we don't have to event.preventDefault()


value


}


)


);


}; // makebutton


makeButton("Count", 1);


if (


is_numeric(arData0.Avg) ||


arData0.Avg == "n/a"


) makeButton("Average", 2);


if (is_numeric(arData0.Pcnt)) makeButton("Percent", 3);


if (is_numeric(arData0.Snt)) makeButton("Sentiment Avg.", 4);


} // scope isolation

Код (разметка): скорее всего, это то, как его следует обрабатывать, хотя меня беспокоит то, что вы, похоже, пытаетесь получить доступ к какому-то глобальному элементу внутри обработчика событий вместо того, чтобы хранить связанную информацию в полезном месте, например, в элементе.

. Это говорит не только о неспособности понять простоту JavaScript, но и о том, как правильно использовать HTML. Тем более, эти имена переменных и классов вызывают у меня рвоту.

Ах, объектные литералы — понятно, это имя переменной.

Спасибо.

Я не уверен, что вы подразумеваете под этим: «освободить выполнение или выполнить операцию, которая выполняет перекомпоновку».

В этом коде я не использовал InnerHTML, я использовал document.createElement и AppendChild.

Если бы это была ошибка в моем коде, мне бы очень хотелось узнать, что не так.

Как я уже сказал, это происходит не в первый раз. Для меня это не академический подход, я стараюсь разработать приложение как можно быстрее. Программно это означает просто divSel.click(). Ах, Истребительница.

По иронии судьбы, я шред-гитарист.

Я играю с 5 лет, лидирую с 13 – трачу слишком много часов на тренировки – до сих пор. Мне нравятся Сатч, Вай, Мальмстин (ненавижу Мальмстина, но какой гитарист!), Джон Петруччи и т. д. Некоторое время я преподавал гитару.

Это было совсем не весело, как присматривать за детьми. Раньше мои волосы были до половины спины. Нет, мне никогда не нравился металл, кровь и тому подобное.

Мне нравятся Хендрикс, Зеп и другие вещи постарше. Однако у меня есть друг, который играет на мандолине (двуструнной уке).

Внешний {} предназначен для того, чтобы переменная «let button» не попадала в родительскую область.

Я считаю, что прежний синтаксис более понятен и с ним проще работать, и поскольку мы передаем результат в качестве аргументов, мы не тратим лишнюю «переменную впустую».

Также обратите внимание, что, поскольку мы буквально только что создали «кнопку», мы можем напрямую назначить onclick вместо addEventListener и получить такое же поведение.

Что-то обычно не одобряется, поскольку другие вещи могут добавить своих собственных слушателей.

но они сделают это позже.

Мы буквально только что создали элемент, так что еще ни у кого не было возможности осуществить этот трюк! Я также использую addChild вместо add, поскольку последний не возвращает добавленный элемент.

Если вы добавляете только что-то одно, «appendChild» в этом смысле предпочтительнее.

Если вы хотите добавить кучу элементов и/или текста, добавьте выигрыши.

Спасибо за ваш ответ, еще раз. Насколько константа/пусть иди, я использую константа если он не изменится после того, как я его объявлю/создам экземпляр. В противном случае я использую вар если я не нахожусь во внутреннем блоке кода и не хочу сохранить его в этой области - тогда я использую позволять. Я до сих пор не понимаю в чем дело позволять. Меня больше всего беспокоит потребление памяти. Область действия убивает переменную, когда она мне больше не нужна. Я полагаю, что есть что сказать и о безопасности. Я снова использую позволять если его нужно использовать в небольшом блоке кода, чаще всего в цикле while или for. Я не понимаю этого:

 
{
let button = document.createElement("button");
button.className = className;
button.onclick = onclick;
button.textContent = textContent;
button.type = "button";
button.value = value;
divDataSet.appendChild(button);
}

Код (разметка): VS

  { Object.assign( document.createElement("button"), { className, onclick, textContent, type : "button", value } ) } 

Код (разметка): В первом блоке эти переменные должны быть созданы, прежде чем вы сможете их в любом случае назначить, поэтому я не понимаю сути. Во втором случае атрибутам присваиваются имена, поэтому Javascript знает, какую переменную в какой атрибут поместить. В первом блоке откуда Javascript знает, что в какой атрибут поместить? Это имя переменной, позиция в списке или . . . ? oBlockRec используется во всем интерфейсе и фактически представляет собой один объект в массиве (таким образом, BlockIdx). Это целая куча данных, взятых с сервера. Я думаю, что пытаться хранить в элементе html — это слишком много, и я не вижу в этом никакого смысла.

Мне пришлось бы хранить его во множестве элементов, каждый из которых использует эти данные.

Используемый мной внутреннийHTML не является производным от пользовательского ввода, и это был единственный способ превратить Javascript в а.) фактическое отображение HTML и б.) запуск события щелчка.

Примечание: в одном варианте с использованием document.createElement, когда я выполнял console.log(divDataSet.innerHTML), HTML был там, но браузер его не отображал. Опять же, событие щелчка работало, если я запускал его программно, а не с помощью мыши.

Над кнопками на оси Z нет элементов. Это не первый раз, когда это происходит со мной. Вы правы, что не используете click. Мне нужно изменить это на pointerup.

Обычно я так делаю, но здесь это ускользнуло от меня.

Я исправлю это. В этом конкретном случае я не вижу использования ключевых событий.

Это отчет, и клавиатура здесь практически не используется. Спасибо за совет! Я уверен, что Object.assign когда-нибудь пригодится. В очередной раз благодарим за помощь. Я просто должен сказать, что я ненавижу это: «Я убью тебя и твои мечты сегодня вечером, начну новую жизнь. Пролей свою смерть на мне, позволь своей родословной питать мою молодость».