Display input value

byMR

May 3, 2022

I am trying to display in the input field the success value corresponding to the status.

For example if I select "1. initial Contact" I have to display in the input 0.

This is what I’ve been attempting so far, but I’ve got completely stuck on how to display just the success value.

I HAVE TO DO EVERYTHING IN JS, CAN’T TOUCH ANYTHING IN THE HTML

const oppoStatus = [{
    K_OPPO_STATUS: 1,
    STATUS: "1. Initial Contact",
    SUCCESS: 0,
  },
  {
    K_OPPO_STATUS: 2,
    STATUS: "2. Demonstration",
    SUCCESS: 25,
  },
  {
    K_OPPO_STATUS: 3,
    STATUS: "3. Proposal",
    SUCCESS: 50,
  },
  {
    K_OPPO_STATUS: 4,
    STATUS: "4. Negotiation",
    SUCCESS: 75,
  },
  {
    K_OPPO_STATUS: 5,
    STATUS: "5. Order",
    SUCCESS: 100,
  },
];

let select = document.querySelector("select");
let input = document.querySelector("input").value;
let output = document.getElementsByClassName("output")
let button = document.querySelector("button");

function renderOppoStatusToSelectElement() {
  for (let i = 0; i < oppoStatus.length; i++) {
    let status = oppoStatus[i].STATUS;
    let success = oppoStatus[i].SUCCESS;

    let opt = document.createElement("option");
    select.appendChild(opt);
    opt.value = success;
    opt.innerHTML = status;

    select.addEventListener("change", function() {
      let optValue = opt.value
      console.log(optValue);
    })
  }

  button.addEventListener("click", function() {
    console.log("working");
  });
}

renderOppoStatusToSelectElement();

<select name="status"></select>
<input name="success" type="number" min=0 max=100 step=1 value="0">
<button type="submit">Submit</button>
</form>
<div class="output">Waiting for form submit...</div>

>Solution :

You’re adding multiple event listeners to the select, each one prints that option’s value, even if it’s not the selected option.

You should just add one listener outside the loop, and it should print the select’s value, not an option’s value. The value of the select is the value of the selected option.

const oppoStatus = [{
    K_OPPO_STATUS: 1,
    STATUS: "1. Initial Contact",
    SUCCESS: 0,
  },
  {
    K_OPPO_STATUS: 2,
    STATUS: "2. Demonstration",
    SUCCESS: 25,
  },
  {
    K_OPPO_STATUS: 3,
    STATUS: "3. Proposal",
    SUCCESS: 50,
  },
  {
    K_OPPO_STATUS: 4,
    STATUS: "4. Negotiation",
    SUCCESS: 75,
  },
  {
    K_OPPO_STATUS: 5,
    STATUS: "5. Order",
    SUCCESS: 100,
  },
];

let select = document.querySelector("select");
let input = document.querySelector("input").value;
let output = document.getElementsByClassName("output")
let button = document.querySelector("button");



function renderOppoStatusToSelectElement() {
  for (let i = 0; i < oppoStatus.length; i++) {
    let status = oppoStatus[i].STATUS;
    let success = oppoStatus[i].SUCCESS;

    let opt = document.createElement("option");
    select.appendChild(opt);
    opt.value = success;
    opt.innerHTML = status;
  }

  select.addEventListener("change", function() {
    let optValue = select.value
    console.log(optValue);
  });

  button.addEventListener("click", function() {
    console.log("working");
  });
}

renderOppoStatusToSelectElement();

<select name="status"></select>
<input name="success" type="number" min=0 max=100 step=1 value="0">
<button type="submit">Submit</button>
</form>
<div class="output">Waiting for form submit...</div>