Активация элемента одновременно с введением данных

@L13K · Регистрация: 03.12.2011

Студворк — интернет-сервис помощи студентам

Ситуация:

из следующего хтмл я получаю значения в js посредством клика по элементам списка.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="typeK">
<ul class="list2">
    <div id="1.2" class="target1">
        <li onClick="delta4();" style="button1" class="subinfo0"> </li> 
   
    </div>   
    <div id="1.35" class="target2">
        <li onClick="delta4();" style="button1" class="subinfo0">  </li>  
   
    </div>  
    <div id="1.4625" class="target3">
        <li onClick="delta4();" style="button1" class="subinfo0"> </li>     
 
    </div>  
</ul>
</div>

Далее у меня идет кнопка вывода результата уравнения внутрь див тега.

HTML5
1
2
<button  onClick="raschitat1();delta5();" class="rassbut" >Рассчитать </button>
<div id="N2" class="N2"></div>

Это жс который присваивает значения из элементов списка переменной для уравнения.

JavaScript
1
2
3
4
5
var K;
$('#typeK').on('click', 'li', function (event) {
    K = $(this).parent().attr('id');
    console.log(K);
})

ну и собственно сама функция уравнения с командой вывода.

JavaScript
1
2
3
4
function raschitat1() {
N2 = K * 2;
document.getElementById('N2').innerHTML = " "+ N2 +" это вот столько";
}

проблема: я хочу чтобы по нажатию на элемент списка - одновременно сработала функция raschitat1 и вывела результат в div N2

однако он возвращает NaN, вероятно потому, что 2 процесса не могут происходить одновременно. возможно ли как то решить эту проблему? запустить их по одному клику как то последовательно например..

@j2FunOnly · 20.10.2017, 08:30

Для начала поправьте разметку. Уберите инлайн яваскрипт.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="type-k">
  <ul class="list2">
    <li class="subinfo0">
      <div data-id="1.2" class="target1"></div>
    </li>
    <li class="subinfo0">
      <div data-id="1.35" class="target2"></div>
    </li>
    <li class="subinfo0">
      <div data-id="1.4625" class="target3"></div>
    </li>
  </ul>
</div>
<div id="n2" class="n2"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
function raschitat1 (v) {
  return parseFloat(v) * 2;
}
 
var $n2 = $('#n2');
 
$('#type-k').on('click', 'li', function() {
  var data = $(this).find('[data-id]').data('id');
  $n2.text(' ' + raschitat1(data) + ' это вот столько');
});

@klopp · 20.10.2017, 08:45

Сообщение от L13K

onClick="raschitat1();delta5();"

это ошибка синтаксическая,только одну функцию надо записать,а вот уже внутри нее можете прописать вызовы других функций
и зачем вы точки с запятой туда пишете?
Как вариант-щелчок кнопкой мыши имеет в себе три события: mousedown → mouseup → click. т.е можно привязать выполнение трех разных функций

@j2FunOnly · 20.10.2017, 08:54

Сообщение от klopp

это ошибка синтаксическая,только одну функцию надо записать

туда можно написать что угодно. и это что угодно будет интерпретироваться как JS код.
Например

HTML5
1
2
3
<button onclick="function f() { alert('hi')}; var b = 2 + 3; f(); alert(b);">
  Click me
</button>

Только не надо так делать.

@klopp · 20.10.2017, 09:06

L13K, я был не прав

@L13K · 20.10.2017, 17:12 **[ТС]**

Сообщение от klopp

Как вариант-щелчок кнопкой мыши имеет в себе три события: mousedown → mouseup → click

давайте по порядку.
чтобы мне забрать данные из листа

по логике должно быть так:

JavaScript
1
2
3
4
5
var K;
$('#typeK').mousedown( 'li', function (event) {
    K = $(this).parent().attr('id');
    console.log(K);
})

что к сожалению не срабатывает. возвращает NaN или пустое место, если var K будет внутри.

сам рассчет на mouseup поставил и тут все срабатывает нормально:

JavaScript
1
2
3
4
$('#typeK').mouseup( 'li', function (event) {
N2 = K * 2;
document.getElementById('N2').innerHTML = " "+ N2 +" это вот столько";
})

в чем ошибка может быть?

Сообщение от j2FunOnly

Для начала поправьте разметку. Уберите инлайн яваскрипт.

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

@L13K · 25.10.2017, 05:26 **[ТС]**

ап тему.. все еще актуально

@L13K · 03.11.2017, 06:26 **[ТС]**

все еще актуально

@L13K · 06.11.2017, 03:09 **[ТС]**

все. отбой. оба события на 1 онклик поставил, каким то чудесным образом все заработало. спасибо всем кто уделил время

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	20.10.2017, 09:06
	L13K, я был не прав 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	25.10.2017, 05:26 [ТС]
	ап тему.. все еще актуально 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	03.11.2017, 06:26 [ТС]
	все еще актуально 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	06.11.2017, 03:09 [ТС]
	все. отбой. оба события на 1 онклик поставил, каким то чудесным образом все заработало. спасибо всем кто уделил время 0