How can I dynamically change a number input's value?-CodePudding

I have a form with a input was type="number", after submit I made it reset and backup in a list to resolve purpose.

If that any submit is failed, I want to resolve entire input. I also try convert innerHTML to Number before assign, but it not working. Number.parseInt(document.querySelector("div#" item_Id ".result #context > #cmeasurement").innerHTML);

I have that possible by change a number input's value?

function resolveForm(item_Id) {
  document.querySelector("#addInventoryform #measurement").value = document.querySelector("div#"   item_Id   ".result #context > #cmeasurement").innerHTML;
}

<div id="addInventory_form">
  <form id="addInventoryform" autocomplete="off">
    <label for="measurment">Measurement</label>
    <input id="measurment" name="measurement" type="number" value="1">
  </form>
</div>

<div id="a123121"  style="background-color: wheat">
  <div>
    <button onclick="resolveForm('a123121')" id="result_id">123121</button>
    <div id="status"></div>
  </div>
  
  <div id="context" style="display:none">
    <div id="cmeasurement">12312</div>
  </div>
</div>

CodePudding user response：

On the input element in your HTML, you set your id="measurement".

In your function, you're calling your id as "measurment". If you fix your spelling, the function should work as expected.

See the snippet below:

function resolveForm(item_Id) {
  document.querySelector("#addInventoryform #measurement").value = document.querySelector("div#"   item_Id   ".result #context > #cmeasurement").innerHTML;
}

<div id="addInventory_form">
  <form id="addInventoryform" autocomplete="off">
    <label for="measurment">Measurement</label>
    <input id="measurement" name="measurement" type="number" value="1">
  </form>
</div>

<div id="a123121"  style="background-color: wheat">
  <div>
    <button onclick="resolveForm('a123121')" id="result_id">123121</button>
    <div id="status"></div>
  </div>
  
  <div id="context" style="display:none">
    <div id="cmeasurement">12312</div>
  </div>
</div>