CODEWITHSUNDEEP
javascriptjqueryhtml
Brent-K
Brent-K

Reputation: 25

Javascript: passing values using drop down lists

I am making a resource website for a video game, and while I have programming experience, I do not know anything about javascript, but I'd like to put a 'calculator' on the site which requires drop-down boxes and pre-set values. I have two drop down lists with vales attached to the selections, which once selected, should output a total value off to the side. The total will be achieved by taking v1 * 499 + v2 * 499 or (v1 + v2) * 499 (both are the same).

I first tried making the box respond to each individual box, but of course this only updates for each box individually.

  $(document).ready(function() {
    $('select').material_select();
  });

$("[name=ilvl]").change(function(){
        var calc = ($(this).val()*499);
    $("[name=dps]").val(calc);
});

$("[name=trait]").change(function(){
        var calc = ($(this).val()*499);
    $("[name=dps]").val(calc);
});

(What I tried here: jsfiddle1)

Since I couldn't figure out how to make them add together using that format I tried using different functions and calling them like this:

  $(document).ready(function() {
    $('select').material_select();
  });

function getilvldps()
{
    var ilvldps=0;
  var ilvl = $("#ilvl option:selected").val();
  ilvldps = ilvl * 499;
  return ilvldps;
}

function gettraitdps()
{
    var traitdps=0;
  var trait = $("#trait option:selected").val();
  traitdps = trait * 499;
  return traitdps;
}

function getTotal()
{
    var calc = getilvldps() + gettraitdps();
    $("#dps").val(calc);
}

(What I tried here: jsfiddle2

I obviously don't know how to use js functions and need some help with them please.

Upvotes: 0

Views: 57

Answers (3)

Pslice
Pslice

Reputation: 54

Using the on change event on the selects, you can add this under document.ready(). I think it will give you the results you want:

 $('select[name=ilvl],select[name=trait]').on('change', function(){
        getTotal();
  });

Upvotes: 1

Ben Rondeau
Ben Rondeau

Reputation: 3053

I fixed your jsFiddle and also dropped the code below.

You had multiple errors in your code which prevented the calculator from working. Compare the two code bases and comment below the answer if you have questions:

$(document).ready(function() {
  $('select').material_select();
});

var getilvldps = function(){
	var ilvldps=0;
  var ilvl = $("#ilvl option:selected").val();
  ilvldps = ilvl * 499;
  return ilvldps;
}

var gettraitdps = function(){
	var traitdps=0;
  var trait = $("#trait option:selected").val();
  traitdps = trait * 499;
  return traitdps;
}

var getTotal = function(){
	var calc = getilvldps() + gettraitdps();
	$("#dps").val(calc);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<div class="row">
  <form class="col s3">

    <select name="ilvl" id="ilvl" onchange="getTotal()">
      <option disabled selected value = 0>Item Level</option>
      <option id="1" value="1">845</option>
      <option id="2" value="2">850</option>
      <option id="3" value="3">855</option>
      <option id="4" value="4">860</option>
      <option id="5" value="5">865</option>
      <option id="6" value="6">870</option>
      <option id="7" value="7">875</option>
      <option id="8" value="8">880</option>
      <option id="9" value="9">885</option>
      <option id="10" value="10">890</option>
      <option id="11" value="11">895</option>
      <option id="12" value="12">900</option>
      <option id="13" value="13">905</option>
      <option id="14" value="14">910</option>
      <option id="15" value="15">915</option>
      <option id="16" value="16">920</option>
      <option id="17" value="17">925</option>
      <option id="18" value="18">930</option>
      <option id="19" value="19">935</option>
      <option id="20" value="20">940</option>
      <option id="21" value="21">945</option>
      <option id="22" value="22">950</option>
      <option id="23" value="23">955</option>
      <option id="24" value="24">960</option>
      <option id="25" value="25">965</option>
      <option id="26" value="26">970</option>
      <option id="27" value="27">975</option>
      <option id="28" value="28">980</option>
    </select>
  </form>

  <form class="col s3">
    <select name="trait" id="trait" onchange="getTotal()">
      <option disabled selected value = 0>Trait</option>
      <option id="1" value="31">CS Crit</option>
      <option id="2" value="10">DB Damage</option>
      <option id="3" value="8">Eye Beam Damage</option>
      <option id="4" value="6">Eye Beam Cost</option>
      <option id="5" value="5">Max Fury</option>
      <option id="6" value="5">Meta CD</option>
      <option id="7" value="1">Throw Glaive</option>
      <option id="8" value="0">Non-Damage</option>
    </select>
  </form>

  <form class="col s3">
    <input type=text name="dps" id="dps">
  </form>

</div>

Upvotes: 2

Eladian
Eladian

Reputation: 958

I don't know exactly what you're looking for but is it functionality similar to this?

Running the snippet below will add the values of both select lists together when either one of them change.

$('#dropDownOne').on('change', function(e) {
  console.log(parseInt($(this).val()) + parseInt($('#dropDownTwo').val()));
});

$('#dropDownTwo').on('change', function(e) {
  console.log(parseInt($(this).val()) + parseInt($('#dropDownOne').val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDownOne">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="dropDownTwo">
<option value="1">1</option>
<option value="2">2</option>
</select>

Upvotes: 0

Related Questions