I have a html block as follows with an input textfield that updates the entire application when it is manually edited.

How can I dynamically target and change this input text field? In the following this would be value="2"

    <my-attribute param="Count" min="0" max="100" step="1">
        <span id="label">Count</span><span id="input">
<dat-input-number id="input" value="2" step="1" min="0" max="100">
         <div id="blocker" on-dblclick="" style="width: 152px; height: 15px;"></div>
        <input id="number" type="text" on-keydown="">       
      </dat-input-number></span>
      </my-attribute>

I have a html block as follows with an input textfield that updates the entire application when it is manually edited.

How can I dynamically target and change this input text field? In the following this would be value="2"

    <my-attribute param="Count" min="0" max="100" step="1">
        <span id="label">Count</span><span id="input">
<dat-input-number id="input" value="2" step="1" min="0" max="100">
         <div id="blocker" on-dblclick="" style="width: 152px; height: 15px;"></div>
        <input id="number" type="text" on-keydown="">       
      </dat-input-number></span>
      </my-attribute>

• javascript
• html
• input

2 Answers 2

<script>
document.getElementById('number').value = "yourValueHere";
</script>

Oh, and don't forget to close your <input id="number" type="text" on-keydown=""> with an </input>

<script>
    var theInput = document.getElementById('input');
    theInput.value = '5';
</script>

Working demo here

Note: This is super trivial and I have no doubt that you could have found enough knowledge through a Google search to attempt this on your own. :)