Почему неправильно считает JQuery, где ошибка?

Question

[konstantinborodov]

Есть код

var valm_w1 = $("#valmovaya #area-w1").val();
var valm_w3 = $("#valmovaya #area-w3").val();
var valm_h1 = $("#valmovaya #area-h1").val();

var valm_area = valm_h1 * (valm_w1+valm_w3);
console.log(valm_area);

считает неправильно. Складывает (valm_w1+valm_w3) в строку, т.е 2+3=23, при этом в другом участке кода

var dvuskat_area = dvuskat_w * dvuskat_h1 + dvuskat_w * dvuskat_h2,

сложение работает как обычно у людей. Где логика?

Answer 1

[Владислав Килин]

1. Оптимизируйте селекторы.
#valmovaya #area-h1 - вот это плохой селектор, потому что он ищет по идентификатору внутри элемента с идентификатором, но вторая часть уже лишена особого смысла, поскольку первый идентификатор по определению и так уникален. Оставьте просто #area-h1. А еще лучше вообще уберите из идентификатора указатель на название тега, это архидурной тон.

2. val возвращает строковое значение. Работать со строками как с числами - очень плохая затея, даже в языках с динамической типизацией. Либо пользуйтесь parseInt(vaml_h1), либо вообще кастом в духе +valm_h1.

3. jQuery не считает, арифметические расчеты это зона контроля JavaScript.

Любой из этих трех вариантов вам подойдет, в принципе.

var valm_w1 = +$("#area-w1").val();
var valm_w3 = parseInt($("#area-w3").val());
var valm_h1 = parseFloat($("#area-h1").val());

Comments

[konstantinborodov]

Про джейкверри спасибо огромное, решил а вот про сss поспорю!

#area-h1 тут h1 не заголовок, а высота. Есть h1 h2 h3 h4 h5 h12 h44 Про дурной тон снимается, надеюсь?

Про #valmovaya #area-h1 - первый селектор тип крыши, второй поле. У нас типов крыши много поэтому приходится стучаться вот так: #valmovaya #area-h1, #shatrovaya #area-h1, #mansardnaya #area-h1. Все #area-h1 в разных вкладках и конечно я знаю что традиционнее было бы писать выборку к примеру не #valmovaya #area-h1 а #valmovaya_area_h1, но мне удобнее первый вариант, да и работает выборка ID внутри ID прекрасно, тем самым мы просто обходим правило при котором при нескольких одинаковых ID мы обращаемся лишь к первому) Так что спорно очень замечание про CSS)

[xzdshr]

"нескольких одинаковых ID" спасибо, поржал. Таким ваятелям действительно спорно рассказывать про оптимизацию.

[konstantinborodov]

xzdshr: обоснуете высказывание? очень интересно почему так нельзя, если это работает? Потому что на ютубе так сказали ваши учителя?)

[xzdshr]

konstantinborodov: нет, я просто поржу и кину Владиславу +1 за великолепный ответ

[konstantinborodov]

xzdshr: тот случай когда сказал что-то и не может обьяснить) Я же в отличии от вас могу обьяснить вам же почему два одинаковых id плохо, и где могут быть проблемы. Если это понимать то нет ничего страшного в двух одинаковых ID, если ваш мозг открыт для понимания как вообще они работают впринципе. Тут не вопрос правильно или неправильно, а вопрос цели. Объясняю: очень часто когда проект передают на доверстку, дописку, правку после других и нет времени переписывать кучу селекторов для того чтобы прикинуть, посмотреть часто в проекте может появится и два и три и пять одинаковых ID как в моем случае, а еще наверное для вас ужасное, но сss код в html и даже, о боги, прямо внутри тегов. И никто как бы не говорит что проект сдавать так, но фразы вроде "ТЫЧТОТАКЖИНИЗЯ" вызывают смех у меня и коллег) Если честно ведь и ЙОЖИК можно вот так написать, вопрос лишь в том какие цели преследуются) Извините, а это не с вами я спорил пару месяцев назад, и не вы ли мне доказывали что табличная верстка 100 лет как нигде не используется?) Благодарю за настроение.

[xzdshr]

konstantinborodov: охоспаде как многабукв, лучше бы почитали про приведение типов в js вместо этого...
И нет я ни с кем не спорил по поводу табличной верстки, тут вы тоже промахнулись.

[konstantinborodov]

xzdshr:
Про приведение типов - я - дизайнер, мне не до этого) Мне достаточно того что я за день узнал о jqvery для 99% задач, ну собственно что не знал - спросил - спасибо, но про верстку это как бы странно очень все слышать от как я думал "суперспецов".

завершу спор фидлом в котором по вашим заверениям "ТАКЖИНИЗЯРАБОТАТЬНИБУДЕТ", потому что как Владислав сказал,цитирую: "вот это плохой селектор, потому что он ищет по идентификатору внутри элемента с идентификатором, но вторая часть уже лишена особого смысла, поскольку первый идентификатор по определению и так уникален."

https://jsfiddle.net/tt80q2ba/

Так почему же все работает то, уважаемые знатоки?))))))

[xzdshr]

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

[Алексей Скляров]

konstantinborodov: есть понятие "плохой код" и "хороший код". Много одинаковых ID это плохой код, ибо сам смысл ID в идентифицировании чего-либо, то бишь это значение уникально. Если с двумя-тремя одинаковыми айдишниками система работает - это не значит что все хорошо. В будущем это может служить причиной кучи проблем. Зачем использовать кучу одинаковых айдишников, когда можно просто использовать один и тот же класс?

[konstantinborodov]

Алексей Скляров: так об этом речи не шло, ясен пень что два одинаковых ID плохо и несет ряд проблем, вопрос лишь в том был работает или нет, и можно ли так написать. Я отстаиваю то что можно все если это оправданно для чего-то. В конкретно моем случае я дорабатываю код коллеги и мне легче чтобы проверить как будет работать приписать 4 ID, чем переписывать все классы и айдишники заново. Слова скорость и тест - ключевые. А в перспективе ясен пень перепишется "плохой но быстрый код" на "хороший но медленный". Весь сыр-бор заключается в том что на меня накинулись, будто я не знаю что такое ID и с чем его едят, так еще и доказывают что работать не будет. Еще раз я не спорю о валидности, о красивостях, о правильности, логичности. Я утверждаю что если делать времянку и так удобнее и быстрее то почему нет то? А еще я бывает дописываю в теги css, тоже временно чтобы не копаться в классах кем то написанных, но это не значит что я не понимаю что так лучше не делать, и что я не исправлю это в будущем.

Ну представьте: сидит у меня человек говорит а как будет если вот это поменять? ну не буду я полчаса блоки переписывать. Я воткну за минуту как в примере с 2 id и покажу. На мой взгляд это оправдано. А потом уже можно и переделывать. О чем спор я не понимаю)

[Stalker_RED]

konstantinborodov: С такой логикой можно ездить на красный свет, забивать гвозди гранатой и жрать незнакомые грибы. А что, до сих пор прокатывало же!

must be unique within the HTML document

https://www.w3schools.com/tags/att_global_id.asp

Толкование слова MUST

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

[Владислав Килин]

konstantinborodov: позволю себе еще добавить по вашим комментариям.
Во-первых, если h1 - это высота, то лучше так и написать же, height, будет гораздо понятнее. Такие сокращения - это экономия на спичках, ни к чему хорошему не приведет.
Во-вторых, идентификаторы предполагаются уникальными не просто так; движок рендера строит индекс, как правило B-tree. Когда вы добавляете два одинаковых идентификатора, вы очень сильно замедляете поиск по DOM, либо делаете его в принципе невалидным. Смотрите, вы по сути находите все свои элементы с идентификаторами, пользуясь менее быстрым индексом по значениям аттрибутов, а затем по каждому найденному элементу пробегаете весь путь до корневого элемента в поисках "родительского" идентификатора. То есть вы реально делаете адское количество проверок и поисков против logN прохода по индексу.
Если вы намерены использовать все это именно таким макаром, то тогда вам лучше воспользоваться аттрибутом class, а не id, выглядеть будет почти так же, но зато работать именно так, как и предполагается.
Я не говорил, что это не будет работать. Но не все то что работает, написано хорошо. Как дизайнер вы должны это понимать.

[konstantinborodov]

Очень живое обсуждение ребята, благодарю за время) Но у меня ощущение что вы не прочитали почему я так сделал) Сегодня уже все переписалось как надо, как только появилась нужда реально сдавать переписанный вариант) Вы все безусловно правы, про наш "красный свет" я ведь не спорю что нельзя. Но в экстренных случаях можно, например когда ты скорая и везешь в больницу пациента с приступом.

У меня была подобная ситуация срочно за 5 минут сделать одну вещь в уже готовом коде) Максимально быстро это было сделать добавив 4id и воткнуть их к уже существующим, потому что человек до этого был новичком и там накуролесил что ничего не работает. Воткнул - показал - его устроило - теперь переделали нормально в хороший и чистый код))))) ну очевидно что вы сами так бы поступили.

[Владислав Килин]

konstantinborodov: я десять лет уже занимаюсь фронтендом, так что я бы так не сделал даже с жуткого бодуна. Но воля ваша, говнокодить не запретишь.

[konstantinborodov]

Владислав Килин: Занимаюсь 12 лет, со школы, и Вы правы - не запретишь. На выходе у меня все чисто правильно и валидно, а "на полях" в черновике что хочу, то и рисую. Главное скорость и результат, ведь. ))) А в чистовике и я есен пень так не напишу))))

[Владислав Килин]

konstantinborodov: я, уж извините, вам не верю. Ваш вопрос и ваши комментарии выдают в вас очень начинающего как фронта, так и программиста. Впрочем, самоустраняюсь из беседы.

Answer 2

[Максим Павлов]

Логика в том, что в javascript "+" служит для конкатенации строк (а значение поля - это как раз таки строка). Оберните ваши переменные в parseFloat().

Comments

[konstantinborodov]

тогда почему во втором случае работает? потому что значение умножения число?

[Александр]

или просто поставьте "+" перед каждой строкой вида "$("#valmovaya #area-w1").val()".

[Максим Павлов]

konstantinborodov: Потому что умножение возможно только с цифрами.

[Максим Павлов]

Александр: тоже вариант