Значение от переключателя до INT и рассчитать - PullRequest
Новая
       3

Значение от переключателя до INT и рассчитать

0 голосов
/ 21 ноября 2018

Я только начал заниматься программированием, поэтому ответ может быть очевидным.Мой код имеет переключатель (цена услуги) и выпадающее меню (количество заказов), я хочу рассчитать с этими значениями.Пока все хорошо, мне понадобился почти день, чтобы получить этот короткий код.

Моя проблема сейчас, мне нужно, чтобы результат отображался в реальном времени, возможно, во входном теге, например 

   <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" /></p>

Может быть, есть и лучший способ?Таким образом, одна из двух радиокнопок должна всегда проверяться и показывать свою цену.Когда пользователь выбирает количество из выпадающего меню, результат должен автоматически обновляться.Может кто-нибудь мне помочь?

<html lang="en">
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
 </head>

 <body>    
   <label>ABC
    <input class="test" type="radio" checked="checked" name="test" value="500">
   </label>
   <label>DEF
    <input class="test" type="radio" name="test" value="800">
   </label>
   <select size="1" name="dropdown" onchange='calculate(this.value);'>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
   </select>
   <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" /></p>
 </body>

Спасибо за помощь!

edit: Хорошо, даже расчет неверен.Я хочу получить значение отмеченного переключателя и превратить его в int.После этого мне нужно умножить int на значение из флажка.Я не знаю, что мне не хватает, но оно всегда вычисляется по первому значению переключателя, даже если я проверяю второе.

<script>
 var x = $('input[name="test"]:checked').val();
 var xInt = parseInt(x, 10);

 function calculate (val) {
  var result = val * xInt ;
  var amountPrint = document.getElementById('amount');
  amountPrint.value = result;
 }

$(".test").click(function(event) {
    var total = 0;
    $(".test:checked").each(function() {
        total += parseInt($(this).val());
    });

    if (total == 0) {
        $('#amount').val('');
    } else {                
        $('#amount').val(total);
    }
});
</script>

У меня все еще есть проблема, мне нужно, чтобы результаты отображались в реальном времени, в зависимости от того, какая кнопка-переключатель и значение раскрывающегося списка проверены.Поэтому я добавил класс «test» к переключателям и добавил вышеупомянутую функцию.Теперь я получил результат в режиме реального времени, в зависимости от установленного переключателя, но расчет все еще неверен, и мне нужно как-то его объединить.

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Исходя из комментариев выше

Чтобы преобразовать строки в int, используйте parseInt() для обнаружения изменений, которые необходимо обнаружить с помощью переключателей.Теперь вы можете пройти и добавить onChange = или onClick = ко всем из них вручную.С двумя почему бы и нет, но если вы намерены иметь больше, и все они изменят результат.Вы можете просто пройти через них.

Добавьте это в конец кода 

  //Loop through the radio buttons, first find all the elements with that Name then you can
  //loop through to to detect the onClick. 
  var radios = document.getElementsByName('test')
  for (var i = 0, max = radios.length; i < max; i++) {
    radios[i].onclick = function () {
      console.log(parseInt(this.value));
    }
  }

Возможно, вам придется переписать код немного по-другому, поскольку вы имеете дело с двумя переменными в коде, но ваша функция только принимаетone.

Поэтому, чтобы избежать повторения цикла, проще просто дать ему Id и идти вперед.Так что теперь каждый раз, когда вы меняете флажки, он будет запускать код с любым текущим значением из выпадающего списка.

Ниже приведено то, что я думаю, что вы хотите.

<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

    <label>ABC
      <input type="radio" checked="checked" name="test" value="500">
    </label>
    <label>DEF
      <input  type="radio" name="test" value="800">
    </label>
    <select size="1" id='dropdown' name="dropdown" onchange='calculate(this.value);'>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>


</body>

<script>
  var x = $('input[name="test"]:checked').val();

  var xInt = parseInt(x, 10);

  //Get the input Box you want to print to 
  var amountPrint = document.getElementById('amount');
  //All the radio boxes which you named test
  var radios = document.getElementsByName('test')
  function calculate(val) {
    var result = val * xInt;
    //var amountPrint = document.getElementById('amount');
    amountPrint.value = result;
  }
  var radios = document.getElementsByName('test')
  for (var i = 0, max = radios.length; i < max; i++) {
    radios[i].onclick = function () {
      xInt = parseInt(this.value, 10)
      calculate(document.getElementById('dropdown').value)
    }
  }

</script>
0 голосов
/ 21 ноября 2018 
<html lang="en">
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
 </head>

 <body>    
   <label>ABC
    <input type="radio" checked="checked" name="test" value="500">
   </label>
   <label>DEF
    <input type="radio" name="test" value="800">
   </label>
   <select size="1" name="dropdown" onchange='calculate(this.value);'>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
   </select>
   <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>
 </body>

<script>
 var x = $('input[name="test"]:checked').val();
 var xInt = parseInt(x, 10);


 function calculate (val) {
  var result = val * xInt ;
  var amountPrint = document.getElementById('amount');
  amountPrint.value = result;
 }
</script>

Вам просто нужно вставить новое значение в область суммы.

Все, что я сделал, это добавил value="" к входу Amount, который можно пропустить, но это хорошая практика IMO.

Тогда в JS внизу.Получить элемент по идентификатору, который вы указали ранее.

Затем используйте свой расчет, и с этим сообщите ему изменить значение id 'amount'

Вы также можете добавить <p id='printResultsHere'></p> например и вызывать во многом таким же образом.

Надеюсь, это поможет.Пожалуйста, отметьте ответ как принятый, если это так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...