Расчет количества волос (форма)

@nabu2505 · Регистрация: 25.02.2017

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

Здравствуйте Дорогие программеры. Я давно хотел реализовать возможность подсчета волос в виде формы. Но я только начинаю, освоил html и чучуть css, и сразу сверстал форму подсчета волос! Но взявшись за JS, я столкнулся с проблемой - проблема в моей мозговой ущербности, и как следствие трудного переваривания первоклассных функций. Но я не отчаиваюсь, если есть подмога

<-- Это я.
Собственно вот форма https://jsfiddle.net/g5fj344c/1/. При нажатии на кнопку рассчитать, происходит подсчет суммы волос - но только в том случае если выбран вид волос(целые и/или подрезанные)! Так как у меня могут появится новые виды волос, я уповаю на гибкость формы

. Имя создателя формы я обязательно укажу на моем сайте.
P.S Я уже наработал код (пользовался библиотекой JQuery), но проблема в том что он не считает... Так что это не из числа - задумал и нагло спросил, я съел не малый пуд киберсоли.

Добавлено через 4 часа 36 минут
Вот какая логика подсчета у формы http://images.vfl.ru/ii/149382... 091819.jpg

@mrtoxas · 04.05.2017, 00:36

HTML5

<table>
  <tr>
    <td colspan="5" align="center">
      <h3>Расчет количества волос</h3></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td colspan="3">Длина волос:</td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>длинные<br/><input name="dl" type="radio" id="longhair" checked></td>
    <td>средние<br/><input name="dl" type="radio" id="midhair"></td>
  </tr>
  <tr>
    <td><input type="checkbox" id="intact" data-long="6" data-middle="5.5"></td>
    <td>Целые</td>
    <td>6</td>
    <td>5.5</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="cut" name="cut" data-long="3.5" data-middle="3"></td>
    <td>Подрезанные</td>
    <td>3.5</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="3" align="center"><input type="button" onclick="calc()" value="Рассчитать"></td>
    <td colspan="2"><input type="text" id="itog" name="itog" value="" readonly></td>
  </tr>
</table>

Javascript

var longhair = document.getElementById("longhair"),
  midhair = document.getElementById("midhair"),
  intact = document.getElementById("intact"),
  cut = document.getElementById("cut"),
  itog = document.getElementById("itog");
 
function calc() {
  if (!cut.checked && !intact.checked) {
    alert("Сделайте выбор");
  } else {
    var longOrMid = "data-" + ((longhair.checked) ? "long" : "middle"),
    sum =
      ((cut.checked) ? +cut.getAttribute(longOrMid) : 0) +
      ((intact.checked) ? +intact.getAttribute(longOrMid) : 0);
    itog.value = sum;
  }
}

https://codepen.io/anon/pen/vmJWOz

@nabu2505 · 04.05.2017, 08:00 **[ТС]**

mrtoxas Огромное спасибо! Но если я хочу допустим добавить новый чекбокс, мне в переменной longOrMid создать конструкцию if else?

@mrtoxas · 04.05.2017, 09:08

nabu2505, наверное, лучше так:

HTML5

<!-- ... -->
<td><input type="checkbox" class="size" data-long="6" data-middle="5.5"></td>
<td>Целые</td>
<!-- ... -->
<td><input type="checkbox" class="size" data-long="3.5" data-middle="3"></td>
<td>Подрезанные</td>
<!-- ... -->

Javascript

var longhair = document.getElementById("longhair"),
  midhair = document.getElementById("midhair"),
  sizes = document.getElementsByClassName('size');
 
function calc() {
  var sum = 0,
  longOrMid = "data-" + ((longhair.checked) ? "long" : "middle");
  [].forEach.call(sizes, function(elem){
    sum += ((elem.checked) ? +elem.getAttribute(longOrMid) : 0)    
  })
  if(sum==0){
    alert('Сделайте выбор');
  }else{
    itog.value = sum;
  }    
}

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

HTML5

1	<input type="checkbox" class="size" data-long="8" data-middle="7.5">

@nabu2505 · 04.05.2017, 14:33 **[ТС]**

Уважаемый mrtoxas. Если я допустим хочу добавить дополнительную радио-кнопку? То я добавляю конструкцию if else в эту переменную?

Javascript

1	longOrMid = "data-" + ((longhair.checked) ? "long" : "middle");

Добавлено через 15 минут
Все все я понял, отбой. Спасибо большое mrtoxas. Тяжело мне интуиту, хотя если так разобраться, может быть терпение и целенаправленность, хотя-бы близко подведут меня к вашим умениям.

Новые блоги и статьи
Это работает. Скорость асинхронной логики велика. Вопрос видимо останется в стабильности. Плата - огонь! Hrethgir 13.01.2025 По прошлому проекту в Logisim Evolution https:/ / www. cyberforum. ru/ blogs/ 223907/ blog8781. html прилагаю файл архива проекта Gowin Eda и снимок. Восьмибитный счётчик из сумматора+ генератор сигнала. . .	UserScript для подсветки кнопок языков программирования в зависимости от текущего раздела volvo 13.01.2025 В результате работы этого скрипта подсвечиваются нужные кнопки не только в форме быстрого ответа, но и при редактировании сообщения: / / ==UserScript== / / @name CF_DefaultLangSelect / / . . .	Введение в модели и алгоритмы машинного обучения InfoMaster 12.01.2025 Машинное обучение представляет собой одну из наиболее динамично развивающихся областей искусственного интеллекта, которая фокусируется на разработке алгоритмов и методов, позволяющих компьютерам. . .	Как на Python создать нейросеть для решения задач InfoMaster 12.01.2025 В контексте стремительного развития современных технологий особое внимание уделяется таким инструментам, как нейросети. Эти структуры, вдохновленные биологическими нейронными сетями, используются для. . .	Как создать нейросеть для генерации картинок на Python InfoMaster 12.01.2025 Генерация изображений с помощью искусственных нейронных сетей стала одним из наиболее захватывающих направлений в области компьютерного зрения и машинного обучения. В этой статье мы рассмотрим. . .	Создание нейросети для генерации текста на Python InfoMaster 12.01.2025 Нейросети, или искусственные нейронные сети, представляют собой модели машинного обучения, вдохновленные работой человеческого мозга. Они состоят из множества взаимосвязанных узлов, или "нейронов",. . .
Как создать нейросеть распознавания изображений на Python InfoMaster 12.01.2025 Введение в распознавание изображений с помощью нейросетей Распознавание изображений с помощью нейронных сетей стало одним из самых впечатляющих достижений в области искусственного интеллекта. Эта. . .	Основы искуственного интеллекта InfoMaster 12.01.2025 Искусственный интеллект (ИИ) представляет собой одну из наиболее динамично развивающихся областей современной науки и технологий. В широком смысле под искусственным интеллектом понимается способность. . .	Python и нейросети InfoMaster 12.01.2025 Искусственные нейронные сети стали неотъемлемой частью современных технологий, революционизировав множество областей - от медицинской диагностики до автономных транспортных средств. Python, благодаря. . .	Python в машинном обучении InfoMaster 12.01.2025 Python стал неотъемлемой частью современного машинного обучения, завоевав позицию ведущего языка программирования в этой области. Его популярность обусловлена несколькими ключевыми факторами, которые. . .	Создание UI на Python с TKinter InfoMaster 12.01.2025 TKinter — это одна из наиболее популярных библиотек для создания графических интерфейсов пользователей (GUI) в языке программирования Python. TKinter входит в стандартную библиотеку Python, что. . .	HTML5 в разработке мобильных приложений InfoMaster 12.01.2025 Введение: Обзор роли HTML5 в мобильной разработке В современном мире мобильных технологий HTML5 стал ключевым инструментом для разработки кроссплатформенных приложений. Эта технология произвела. . .

@nabu2505 0 / 0 / 0 Регистрация: 25.02.2017 Сообщений: 17
		1
	Расчет количества волос (форма) 03.05.2017, 19:25. Показов 1066. Ответов 4 Метки нет (Все метки) Здравствуйте Дорогие программеры. Я давно хотел реализовать возможность подсчета волос в виде формы. Но я только начинаю, освоил html и чучуть css, и сразу сверстал форму подсчета волос! Но взявшись за JS, я столкнулся с проблемой - проблема в моей мозговой ущербности, и как следствие трудного переваривания первоклассных функций. Но я не отчаиваюсь, если есть подмога <-- Это я. Собственно вот форма https://jsfiddle.net/g5fj344c/1/. При нажатии на кнопку рассчитать, происходит подсчет суммы волос - но только в том случае если выбран вид волос(целые и/или подрезанные)! Так как у меня могут появится новые виды волос, я уповаю на гибкость формы . Имя создателя формы я обязательно укажу на моем сайте. P.S Я уже наработал код (пользовался библиотекой JQuery), но проблема в том что он не считает... Так что это не из числа - задумал и нагло спросил, я съел не малый пуд киберсоли. Добавлено через 4 часа 36 минут Вот какая логика подсчета у формы http://images.vfl.ru/ii/149382... 091819.jpg 0

@nabu2505 0 / 0 / 0 Регистрация: 25.02.2017 Сообщений: 17
	04.05.2017, 08:00 [ТС]	3
	mrtoxas Огромное спасибо! Но если я хочу допустим добавить новый чекбокс, мне в переменной longOrMid создать конструкцию if else? 0

	04.05.2017, 14:33

Расчет количества волос (форма)

Решение