Display input value

Question

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>

Barmar · Accepted Answer · 2022-05-03T00:02:08.673

0

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")[0];
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(e) {
    e.preventDefault();
    output.innerHTML = select.value;
  });
}

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>

edited May 03 '22 at 00:02

answered May 02 '22 at 21:42

Barmar

741,623
53
500
612

Sorry barmar but when I tried to put the selec.addEvent... It says that opt is not defined. I am a bit confused. – May 02 '22 at 21:47
Read my answer more carefully. I use `select.value`, not `opt.value`. – Barmar May 02 '22 at 21:49
I love you Barmar! – May 02 '22 at 21:56
Sorry Barman to bother you again.. But I really want to understand why this is not working.... Why doesn't it display the value in the browser? button.addEventListener("click", function () { output.innerHTML = opt.value; }); – May 02 '22 at 22:59
Because you're not in the scope of the `opt` variable. Use `select.value`. – Barmar May 02 '22 at 23:00
It is not rendering the text to the browser.. And when I console.log something it appears in the console just for a sec. – May 02 '22 at 23:03
I am really confused, as it is something that I've been practicing for a while. I just want to show where it says "Waiting for form submit..." the status value selected and its success value once I submit the form – May 02 '22 at 23:05
I've updated the answer. See https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method – Barmar May 03 '22 at 00:02
Thanks again Barmar. I am understanding now why that flash in the console was happening (Due to the type of the button and It was sorted catching the event) and why as well was not printing. Because of the selector. – May 03 '22 at 09:06

Display input value

1 Answers1