Javascript-форум - Калькулятор на jOuery

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Калькулятор на jOuery (https://javascript.ru/forum/jquery/78778-kalkulyator-na-jouery.html)

Калькулятор на jOuery

Здравствуйте! Я новичок в jQuery, решила потренироваться и сделать калькулятор, есть три значения при выборе ячейки она должна подсвечиваться и должно выводится определенное число, прописала такой срипт для вывода числа, но почему-то не работает в чем причина может быть, помогите, пожалуйста, разобраться:

$(document).ready(function(){

$('.home').click(function(){

$('.home').css('background', 'white').removeClass('active');

$(this).css('background', '#22d7ff').addClass('active', function(){

var num = this.value;

$('.num').text(num)

});

});

});результат должен быт таким, что при выборе определенно числа присваивается значение "value" и вместо нуля у нас нужное число:

код html: <div >

<p>Выберите тип помещения</p>

<table class="table1" border=1>

<tr>

<td class="home" name="product6" value="1000">Квартира</td>

<td class="home" name="product7" value="2000">Частный дом</td>

<td class="home" name="product8" value="3000">Офис</td>

</tr>

</table>

<span class="num">0</span>

</div>

Цитата:

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

~~var num = this.value;~~

this.value есть у input и select

var num = $(this).attr("value");

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

loia,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  var home = $('.home');
  home.click(function(){
  home.css('background-color', 'white').removeClass('active');
  var num = $(this).css('background-color', '#22d7ff').addClass('active').data("value");
  $('.num').text(num);
  });
});
  </script>
</head>

<body>
результат должен быт таким, что при выборе определенно числа присваивается значение "value" и вместо нуля у нас нужное число:

код html:    <div >

      <p>Выберите тип помещения</p>

      <table class="table1" border=1>

  <tr>

   <td  class="home" name="product6" data-value="1000">Квартира</td>

   <td  class="home" name="product7" data-value="2000">Частный дом</td>

   <td  class="home" name="product8" data-value="3000">Офис</td>

  </tr>

</table>

<span class="num">0</span>

</div>

</body>
</html>

Спасибо большое за помощь, буду знать, как форматировать в будущем.