Issue with event listener and value not updating

Question

I am having an issue with an event listener on a select and a value not updating but cannot figure out what the issue.

Code is below. Basically need the price field to update based on the function above it. Unfortunately i cannot have them all in the same function and need to have them separate. The first console.log does show the value for y but the second does not show the value for price.

var factors = function factor(j) {
  var mySelect = document.getElementById("mySelect").value;
  if (mySelect == "car") {
    lease = "166";
  } else if (mySelect == "truck") {
    lease = "200";
  }
  console.log("this is my lease value - " + lease);
  return lease * j;
};

var monthlyprice = function monthlyprice() {
  var price = factors(1);
  console.log("this is my price -" + price);
};
var type = document.getElementById("mySelect");
type.addEventListener("click", factors);

<form action="">
  <label for="mySelect">Shipment Type</label>
  <select id="mySelect">
    <option value="car">Car</option>
    <option value="truck">Truck</option>
  </select>
</form>

javascript

DCR · Answer

since monthlyprice calls factor() you want to place the listener on monthlyprice

var type = document.getElementById("mySelect");
type.addEventListener("change", monthlyprice);

function monthlyprice() {

  
    var price = factor(1)
 
  
  console.log("this is my price =" + price);
 
};

function factor(j) {
  var y;
  var z = document.getElementById("mySelect").value;
  if (z == "car") {
    y = "166";
  } else if (z == "truck") {
    y = "200";
  }
  console.log("this is my y value - " + y);
 
  return y * j;
  
};

<form action="">
  <label id="label">Shipment Type</label>
  <select id="mySelect">
    <option value="car">Car</option>
    <option value="truck">Truck</option>
  </select>
</form>

Issue with event listener and value not updating

One Answer

Add your own answers!

Ask a Question