Оцените сумму значений, не нажимая кнопку

Я действительно не знаю, как программировать в Javascript, но я пытался кое-что сделать. У меня есть значения, которые нужно суммировать, если некоторые из них выбраны. Следующая функция выполняет операцию суммирования и сразу показывает результат, не нажимая кнопку, только для полей checkbox, а не для списка dropdown и текстовых полей.

Однако мне нужно также задействовать выбранные значения из списков dropdown и ввести оба текстовых поля таким же образом, как checkboxes и их немедленные ответы (вывод).

Я думаю, что метод change можно использовать таким же образом.

@Редактировать:

Извините, я забыл сказать, но мне нужно умножить введенное значение m2 на перед суммированием с 3134,204499 и Бина Яси с -566,2202888.

function calcAndShowTotal() {
  var total = 55435.04798; // it is constant value which must be the beginning value.
  $('#housepriceguesslist :checkbox:checked').each(function() {
    total += parseFloat($(this).attr('price')) || 0;
  });
  $('#total').val(total);
}

$('#housepriceguesslist :checkbox').change(calcAndShowTotal).change();
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "housepriceguesslist">


  <select id = "ilce">
    <option value = "0">Choose a state</option>
    <option value = "63999.50712318567">Adalar</option>
    <option value = "6259.918435398593">Ataşehir</option>
    <option value = "46285.35729304834">Beykoz</option>
    <option value = "54258.92953697798">Kadıköy</option>
    <option value = "-3500.620905653726">Kartal</option>
    <option value = "12889.41219909602">Maltepe</option>
    <option value = "-33711.83156847153">Pendik</option>
    <option value = "-34577.42485251657">Sancaktepe</option>
    <option value = "-52183.1608811019">Sultanbeyli</option>
    <option value = "-34760.71735007784">Tuzla</option>
    <option value = "-27379.87966213786">Çekmeköy</option>
    <option value = "-5332.203990418937">Ümraniye</option>
    <option value = "26485.33532820411">Üsküdar</option>
    <option value = "-18732.62070553167">Şile</option>
  </select>

  <select id = "odasalon">
    <option value = "0">Choose room number</option>
    <option value = "5940.027623576261">1+0</option>
    <option value = "-1399.625767475593">1+1</option>
    <option value = "-3033.638999060459">2+1</option>
    <option value = "11519.83954756076">3+1</option>
    <option value = "-7018.52116545078">4+1</option>
    <option value = "-6008.081239150166">5+1</option>
  </select>

  m2: <input type = "text" id = "m2" /> Bina Yasi: <input type = "text" id = "binayasi" />



  <br/>
  <br/> Features:

  <br/>
  <br/>
  <input type = "checkbox" id = "Bati" value = "Bati" price = "-783.4452683566533" /> <label for = "Bati">Bati</label>
  <br/>
  <input type = "checkbox" id = "Dogu" value = "Dogu" price = "-4895.732009084263" /> <label for = "Dogu">Dogu</label>
  <br/>
  <input type = "checkbox" id = "Guney" value = "Guney" price = "-2599.001349652765" /> <label for = "Guney">Guney</label>
  <br/>
  <input type = "checkbox" id = "Kuzey" value = "Kuzey" price = "3832.013070771234" /> <label for = "Kuzey">Kuzey</label>
  <br/>
  <input type = "checkbox" id = "Amerikan Mutfak" value = "Amerikan Mutfak" price = "2346.347889828301" /> <label for = "Amerikan Mutfak">Amerikan Mutfak</label>
  <br/>
  <input type = "checkbox" id = "Dusakabin" value = "Dusakabin" price = "-176.5092353740256" /> <label for = "Dusakabin">Dusakabin</label>
  <br/>
  <input type = "checkbox" id = "Akilli Ev" value = "Akilli Ev" price = "-4756.206384200719" /> <label for = "Akilli Ev">Akilli Ev</label>
  <br/>
  <input type = "checkbox" id = "Ebeveyn Banyosu" value = "Ebeveyn Banyosu" price = "10135.50644456019" /> <label for = "Ebeveyn Banyosu">Ebeveyn Banyosu</label>
  <br/>
  <input type = "checkbox" id = "Kiler" value = "Kiler" price = "-10693.49979821809" /> <label for = "Kiler">Kiler</label>
  <br/>
  <input type = "checkbox" id = "Kuvet" value = "Kuvet" price = "-941.0629741243247" /> <label for = "Kuvet">Kuvet</label>
  <br/>
  <input type = "checkbox" id = "Parke Zemin" value = "Parke Zemin" price = "-8453.847199707092" /> <label for = "Parke Zemin">Parke Zemin</label>
  <br/>
  <input type = "checkbox" id = "Seramik Zemin" value = "Seramik Zemin" price = "1545.025601000643" /> <label for = "Seramik Zemin">Seramik Zemin</label>
  <br/>
  <input type = "checkbox" id = "Sauna" value = "Sauna" price = "8677.708176289747" /> <label for = "Sauna">Sauna</label>
  <br/>
  <input type = "checkbox" id = "Spor Salonu" value = "Spor Salonu" price = "1159.884679563385" /> <label for = "Spor Salonu">Spor Salonu</label>
  <br/>
  <input type = "checkbox" id = "Tenis Kortu" value = "Tenis Kortu" price = "16065.26794172257" /> <label for = "Tenis Kortu">Tenis Kortu</label>
  <br/>
</div>
<input type = "text" id = "total" value = "0" />

Вы не должны создавать пользовательские атрибуты, такие как price. Если вам нужно хранить данные приложения в элементах HTML, используйте атрибуты data-XXX, например data-price = "-176.05"

Barmar 30.05.2019 02:57

Доступ к этому можно получить в JavaScript как this.dataset.price или $(this).data("price").

Barmar 30.05.2019 02:57

@snr Я добавил решение с учетом вашего последнего редактирования.

Teocci 30.05.2019 06:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
300
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете перебрать все поля <select> и ввод текста с помощью:

function calcAndShowTotal() {
  var total = 55435.04798; // it is constant value which must be the beginning value.
  $('#housepriceguesslist :checkbox:checked').each(function() {
    total += parseFloat($(this).attr('price')) || 0;
  });
  $("#housepriceguesslist select, #housepriceguesslist :text").each(function() {
    let multiplier = 1;
    if (this.id == "m2") {
      multiplier = 3134.204499;
    }
    else if (this.id == "binayasi") {
      multiplier = -566.2202888;
    }
    if (this.value) {
      total += parseFloat(this.value) * multiplier;
    }
  });
  $('#total').val(total);
}

И если вы измените флажки, чтобы использовать value вместо price, вы можете сделать их все в одном цикле:

function calcAndShowTotal() {
  var total = 55435.04798; // it is constant value which must be the beginning value.
  $('#housepriceguesslist :checkbox:checked').each(function() {
    total += parseFloat($(this).attr('price')) || 0;
  });
  $("#housepriceguesslist select, #housepriceguesslist :text, #housepriceguesslist :checkbox:checked").each(function() {
    let multiplier = 1;
    if (this.id == "m2") {
      multiplier = 3134.204499;
    else if (this.id == "binyasi") {
      multiplier = -566.2202888;
    }
    if (this.value) {
      total += parseFloat(this.value) * multiplier;
    }
  });
  $('#total').val(total);
}

И вызовите функцию при изменении любого из входных данных:

$('#housepriceguesslist input, #housepriceguesslist select').change(calcAndShowTotal).change();

Добавлю ли я фрагмент в конец метода javascript? Если нет, не могли бы вы объединить его с моим методом javascript?

snr 30.05.2019 03:02

Спасибо, сэр, но первый не работает. Я только что попробовал. Вы можете видеть это из liveweave.com/JpXff9 . Я сделал что-то неправильно?

snr 30.05.2019 03:07

Я не вижу вашего кода по этой ссылке. Как вы вызываете функцию? Вы должны вызвать его после того, как пользователь сделает выбор в меню.

Barmar 30.05.2019 03:10

Вы никогда не вызываете функцию там.

Barmar 30.05.2019 03:16

Извините, я только что увидел ваше последнее редактирование. Да, после звонка это работает довольно хорошо. Но не могли бы вы взглянуть на мой отредактированный вопрос? Не могли бы вы изменить его?

snr 30.05.2019 03:21

Я обновил ответ, но это действительно базовые вещи. Вам нужно либо научиться программировать, либо нанять кого-то, вы не сможете запустить веб-сайт, если вам нужно обращаться в Интернет за помощью в таких простых вещах, как эта.

Barmar 30.05.2019 03:26

На самом деле я сделал это поверх ответа @Karl, но я не знаю javascript, то, что я сделал, это jsfiddle.net/sonerstudent/0zo2npdc/2 . Но я не использовал this.id == "м2", так как не знаю this.id

snr 30.05.2019 03:29

Подобно Бармар, я добавил все элементы в цикл .each(), но также добавил обработчик .change() для всех элементов:

var context = $('#housepriceguesslist');
var elems = $('input:checkbox, input:text, select', context);

function calcAndShowTotal() {
  var total = 55435.04798; // it is constant value which must be the beginning value.
  elems.each(function() {
    if ( $(this).is('input:checkbox:checked') ) {
      total += parseFloat($(this).attr('price')) || 0;
    } else if ( $(this).is('#m2') ) {
      total += parseFloat($(this).val()) * 3134.204499 || 0;
    } else if ( $(this).is('#binayasi') ) {
      total += parseFloat($(this).val()) * -566.2202888 || 0;
    } else if ( $(this).is('select') ) {
      total += parseFloat($('option:selected',this).val()) || 0;
    }
  });
  $('#total').val(total);
}

elems.change(calcAndShowTotal); // handlers
calcAndShowTotal(); // first run

См. пример здесь: https://jsfiddle.net/qgvsern4/1/

Я обновил свой ответ (PS извините @Barmar за опечатку в вашем имени!)

Karl Bishop 30.05.2019 03:32
Ответ принят как подходящий

Это решение простое, просто получите список всех входных данных (т. е. checkbox и dropdown), используя метод .find() и селектор 'input:checkbox, input:text, select'. Затем проверьте, имеет ли каждый из этих элементов inputs атрибут checked или select для типов ввода checkbox и select соответственно, или это множитель для входов text. Эта проверка может быть выполнена внутри обратного вызова метода each(). Наконец, просто преобразуйте значение в число, используя метод parseFloat(), и добавьте его в общий аккумулятор.

Наконец, суммируйте значение со входом total. Так:

let container;
let inputs;
let total;

function calcAndShowTotal() {
  let sum = 55435.04798; // it is constant value which must be the beginning value.
  let value;
  inputs.each(function() {
    if ($(this).is('input:checkbox:checked')) {
      // If is a checkbox
      value = parseFloat($(this).attr('price')) || 0;
      sum += value;
    } else if ($(this).is('input:text:not(#total)')) {
      // If is a text wait until you move to another element
      let factor = 1;
      if (this.id == 'm2') {
        factor = 3134.204499;
      } else if (this.id == 'binayasi') {
        factor = -566.2202888;
      }

      value = parseFloat($(this).val()) * factor || 0;
      sum += value;
    } else if ($(this).is('select')) {
      // If is a option from the select element
      value = parseFloat($('option:selected', this).val()) || 0;
      sum += value;
    }
  });
  total.val(sum);
}

function initHandlers() {
  inputs.on('keydown', function(e) {
    let focusable, next;
    if (e.keyCode == 13) {
      focusable = inputs.filter(':visible');
      next = focusable.eq(focusable.index(this) + 1);
      if (next.length) {
        next.focus();
      }
      return false;
    }
  });

  inputs.change(calcAndShowTotal);
  calcAndShowTotal();
}

$(function() {
  console.info('ready!');
  total = $('#total');
  container = $('#housepriceguesslist');
  inputs = container.find('input:checkbox, input:text, select');

  initHandlers();
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "housepriceguesslist">
  Total: <input type = "text" id = "total" value = "0" />
  <br/>
  <br/>
  <select id = "ilce">
    <option value = "0">Choose a state</option>
    <option value = "63999.50712318567">Adalar</option>
    <option value = "6259.918435398593">Ataşehir</option>
    <option value = "46285.35729304834">Beykoz</option>
    <option value = "54258.92953697798">Kadıköy</option>
    <option value = "-3500.620905653726">Kartal</option>
    <option value = "12889.41219909602">Maltepe</option>
    <option value = "-33711.83156847153">Pendik</option>
    <option value = "-34577.42485251657">Sancaktepe</option>
    <option value = "-52183.1608811019">Sultanbeyli</option>
    <option value = "-34760.71735007784">Tuzla</option>
    <option value = "-27379.87966213786">Çekmeköy</option>
    <option value = "-5332.203990418937">Ümraniye</option>
    <option value = "26485.33532820411">Üsküdar</option>
    <option value = "-18732.62070553167">Şile</option>
  </select>
  <select id = "odasalon">
    <option value = "0">Choose room number</option>
    <option value = "5940.027623576261">1+0</option>
    <option value = "-1399.625767475593">1+1</option>
    <option value = "-3033.638999060459">2+1</option>
    <option value = "11519.83954756076">3+1</option>
    <option value = "-7018.52116545078">4+1</option>
    <option value = "-6008.081239150166">5+1</option>
  </select>
  m2: <input type = "text" id = "m2" /> 
  Bina Yasi: <input type = "text" id = "binayasi" />
  <br/>
  <br/> Features:
  <br/>
  <br/>
  <input type = "checkbox" id = "Bati" value = "Bati" price = "-783.4452683566533" /> <label for = "Bati">Bati</label>
  <br/>
  <input type = "checkbox" id = "Dogu" value = "Dogu" price = "-4895.732009084263" /> <label for = "Dogu">Dogu</label>
  <br/>
  <input type = "checkbox" id = "Guney" value = "Guney" price = "-2599.001349652765" /> <label for = "Guney">Guney</label>
  <br/>
  <input type = "checkbox" id = "Kuzey" value = "Kuzey" price = "3832.013070771234" /> <label for = "Kuzey">Kuzey</label>
  <br/>
  <input type = "checkbox" id = "Amerikan Mutfak" value = "Amerikan Mutfak" price = "2346.347889828301" /> <label for = "Amerikan Mutfak">Amerikan Mutfak</label>
  <br/>
  <input type = "checkbox" id = "Dusakabin" value = "Dusakabin" price = "-176.5092353740256" /> <label for = "Dusakabin">Dusakabin</label>
  <br/>
  <input type = "checkbox" id = "Akilli Ev" value = "Akilli Ev" price = "-4756.206384200719" /> <label for = "Akilli Ev">Akilli Ev</label>
  <br/>
  <input type = "checkbox" id = "Ebeveyn Banyosu" value = "Ebeveyn Banyosu" price = "10135.50644456019" /> <label for = "Ebeveyn Banyosu">Ebeveyn Banyosu</label>
  <br/>
  <input type = "checkbox" id = "Kiler" value = "Kiler" price = "-10693.49979821809" /> <label for = "Kiler">Kiler</label>
  <br/>
  <input type = "checkbox" id = "Kuvet" value = "Kuvet" price = "-941.0629741243247" /> <label for = "Kuvet">Kuvet</label>
  <br/>
  <input type = "checkbox" id = "Parke Zemin" value = "Parke Zemin" price = "-8453.847199707092" /> <label for = "Parke Zemin">Parke Zemin</label>
  <br/>
  <input type = "checkbox" id = "Seramik Zemin" value = "Seramik Zemin" price = "1545.025601000643" /> <label for = "Seramik Zemin">Seramik Zemin</label>
  <br/>
  <input type = "checkbox" id = "Sauna" value = "Sauna" price = "8677.708176289747" /> <label for = "Sauna">Sauna</label>
  <br/>
  <input type = "checkbox" id = "Spor Salonu" value = "Spor Salonu" price = "1159.884679563385" /> <label for = "Spor Salonu">Spor Salonu</label>
  <br/>
  <input type = "checkbox" id = "Tenis Kortu" value = "Tenis Kortu" price = "16065.26794172257" /> <label for = "Tenis Kortu">Tenis Kortu</label>
  <br/>
</div>

Примечание:

Не забудьте округлить числа, чтобы получить большую точность. Изменение текста будет применено после нажатия на вкладку или перехода к другому элементу. Поэтому я добавил прослушиватель ввода, поэтому, когда вы нажимаете ввод, он переходит к следующему элементу, например, когда вы нажимаете клавишу Tab. Кроме того, я переместил итог наверх, чтобы вы могли видеть результаты в предварительном просмотре.

Обновлять:

Я рекомендую вам использовать $(function(){});, чтобы получить документ, когда он будет готов. Внутри вы можете назначать значения ваших элементов. Я заметил, что в моем коде была ошибка всякий раз, когда вы снимали флажок с отмеченного элемента, сумма должна быть 55435.04798, но она показывает двойное значение, потому что total также является вводом text.

Другие вопросы по теме