I decided to replace checkboxes with the ul list and stylize. As a result, I ran into a problem.

How to take a data-attr value from a li list?

And if you select another li, then the corresponding data-attr will be selected.

I tried these options, but for some reason only the first li is taken there and no longer switches:

function costCalculator() { document.getElementById('result').innerHTML = parseInt(document.getElementById('area').value) + 1; }

and

 function costCalculator() { result.innerHTML = parseInt(area.value) + $('.rooms.active').attr('data-attr'); }

\ \ \ \

Sandbox for experiments: https://jsfiddle.net/Mesuti/5kugx8j6/5/

  <ul id="room"> <li class="rooms active" data-attr="5">1 комнатная</li> <li class="rooms" data-attr="10">2 комнатная</li> <li class="rooms" data-attr="15">3 комнатная</li> </ul> <input id="area" type="text" value="1" placeholder="Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ"> <h2>Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚: </h2> <span id="result"></span>

// Math Input + Data-attr. INSTEAD XXXXXXX NEED TO TAKE THE VALUE LI. IF CHOOSE ANOTHER LI, THAT VALUE CHANGES.

 function costCalculator() { result.innerHTML = parseInt(area.value) + XXXXXXX; }
  • The li tag can't have a value - Air
  • And by the way, it would not be bad to get a clear question, what I would like to achieve ... I didn’t read it 10 times ... - Air
  • @Air, today is clearly not your day - Pavel
  • @Pavel,)))) prophet .... - Air
  • 3
    , attribute value is always a string - Grundy

1 answer 1

so that the value from data-attr is added to the value of the area, it is necessary to bring the value to a number using parseInt ():

 parseInt($('.rooms.active').attr('data-attr'))

In addition, when switching to the next tab, it is necessary to recalculate, i.e. call the costCalculator function by clicking on the tab.

 $('#kvart').click(function() { $('#area').fadeOut(100, function () { $('#room').fadeIn('100'); }); }); $('#house').click(function() { $('#room').fadeOut(100, function () { $('#area').fadeIn('100'); }); }); $('#kommerc').click(function() { $('#room').fadeOut(100, function () { $('#area').fadeIn('100'); }); }); $('#home').on('click', 'li', function(){ $(this).addClass('active').siblings().removeClass('active'); }); $('#room').on('click', 'li', function(){ $(this).addClass('active').siblings().removeClass('active'); costCalculator(); }); function onInput() { costCalculator(); } // ΠœΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ° Input + Data-attr function costCalculator() { result.innerHTML = parseInt(area.value) + parseInt($('.rooms.active').attr('data-attr')); } document.getElementById('area').addEventListener('input', onInput); 
 .characteristic { list-style: none; margin-left: 0; opacity: 1; } .characteristic li { display: inline-block; border: #F03226 solid 1px; padding: 14px 24px; color: #606060; transition: all 0.2s linear; } .characteristic li:hover { background-color: #F03226; color: white; cursor: pointer; } .active { background-color: #F03226; color: white !important; } #area { border: #F03226 solid 1px; padding: 14px 24px; color: #606060; margin-left: 40px; } #area:active, #area:focus { outline: none; } .dn { display: none } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="home" class="characteristic dn"> <li id="kvart">ΠšΠ²Π°Ρ€Ρ‚ΠΈΡ€Π°</li> <li id="house">Π”ΠΎΠΌ</li> <li id="kommerc">ΠšΠΎΠΌΠΌΠ΅Ρ€Ρ‡Π΅ΡΠΊΠΈΠ΅ помСщСния</li> </ul> <ul id="room" class="characteristic"> <li class="rooms active" data-attr="5">1 комнатная</li> <li class="rooms" data-attr="10">2 комнатная</li> <li class="rooms" data-attr="15">3 комнатная</li> </ul> <input id="area" class="characteristic" type="text" value="1" placeholder="Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ"> <h2>Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚: </h2> <span id="result"></span>

  • That's right, you have an error in the code that result is undefined. I added a working example based on your jsfiddle above - Pavel
  • and you correctly requested the data-attr - Pavel
  • 2
    @Pavel, and in this case the result was taken from a global object, since in some browsers access to the elements can be directly by id . Therefore, when accessing result call was made to <span id="result"> Because of this, the result was not undefined - Grundy
  • @Pavel, besides, the provided snippet does not work correctly. - Grundy
  • Updated just now - Pavel