Умножение 3 разных входов с помощью jquery - PullRequest
Новая
       0

Умножение 3 разных входов с помощью jquery

0 голосов
/ 07 мая 2020

Это отличное упрощение страницы оформления заказа, которую я пытаюсь создать. Я действительно не в себе, и мне было интересно, может ли кто-нибудь помочь:

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

(# значение ползунка songLength) x (#tracks select value) x (#basicRate value)

и отобразить результат на выходе поле.

Вот мой код: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1>Song Length</h1>


    <div class="slidecontainer">
        <input type="range" min="1" max="5" value="3" step="0.5" class="slider" id="songRange">
        <p>Song Length: <span id="songLength"></span></p>
    </div>

    <div>
        <label for="tracks">How many tracks?</label>
        <select id="tracks">
            <option selected value="0">How Many Tracks?</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
            <option value="9">Nine</option>
        </select> 

    <div>   
        <input type="checkbox" id="basicDisplay" name="tuning" value="10">
        <label for="tuning">Vocal Tuning</label>
    </div>

    Tuning cost: <output name = "tuningCost"></output>

<script>

    //slider

var slider = document.getElementById("songRange");
var output = document.getElementById("songLength");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}



</script>

</body>
</html>

1 Ответ

2 голосов
/ 07 мая 2020

Это может быть отправной точкой: 

(function($) {

  var slider = $('#songRange'),
    tracks = $('#tracks'),
    checkb = $('input[type="checkbox"]'),
    output = $('output');

  var onChange = function() {
    if (!checkb.is(':checked')) {
      output.text('')
    } else {
      var sliderVal = slider.val(),
        tracksVal = tracks.val(),
        checkbVal = checkb.val()

      output.text(sliderVal * tracksVal * checkbVal)
    }
  }

  $(document).on('input change', '#songRange', onChange);
  $(document).on('change', '#tracks', onChange);
  $(document).on('change', 'input[type="checkbox"]', onChange);

})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h1>Song Length</h1>


  <div class="slidecontainer">
    <input type="range" min="1" max="5" value="3" step="0.5" class="slider" id="songRange">
    <p>Song Length: <span id="songLength"></span></p>
  </div>

  <div>
    <label for="tracks">How many tracks?</label>
    <select id="tracks">
      <option selected value="0">How Many Tracks?</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
      <option value="6">Six</option>
      <option value="7">Seven</option>
      <option value="8">Eight</option>
      <option value="9">Nine</option>
    </select>

    <div>
      <input type="checkbox" id="basicRdisplay the result i ate" name="tuning" value="10">
      <label for="tuning">Vocal Tuning</label>
    </div>

    Tuning cost: <output name="tuningCost"></output>

</body>

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

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

...