Refresh html input element value

Question

I'm trying to change the value of a html input element and I want to see the value change on screen. This seems to be a very simple task but it is not working using javascript (but it work with jQuery).

$("#btn1").click(function () {
    $("#test1").val("10");
});

function bt() {
  document.getElementById("test1").value = "3333";
    document.getElementById("test1").setAttribute("value","4444");
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Formula 1:
    <input type="text" id="test1" value="1111">
    </p>

    <p>What the answers to these formulas?</p>
    <br>
    <button id="btn1">Hint</button>
    <button id="btn2" onclick="bt()">Hint2</button>

Any suggestion with the javascript function bt() ?

Setting the .value does work for me with this example. Can you show a minimal reproducible example of your code? — Luca Kiebel
– Luca Kiebel, Commented Jul 18, 2019 at 16:06
Here's an odd thing: I just converted your code example in to an executable snippet - and it works just fine. — Someone
– Someone, Commented Jul 18, 2019 at 16:07
A value is not an attribute, it is a property. Work to understand that when a property changes, the attribute may not change. — Mark Schultheiss
– Mark Schultheiss, Commented Jul 18, 2019 at 16:15

ThS · Accepted Answer · 2019-07-18 16:22:14Z

1

You can just use the value property of the input element after being selected/referenced in JavaScript.

In the next example, every time you click on the button with change value text the input value will change to New value: followed by a random number.

/** selecting the button and the input **/
const btn = document.getElementById('btn2'),
  inp = document.getElementById('test1');

/** adding click listener  **/
btn.addEventListener('click', () => inp.value = 'New value: ' + Math.ceil(Math.random() * 100)); /** for demo purposes a random number is generated every time the button is clicked. Change the affected value per your requirements **/

<input type="text" id="test1" value="1111">

<p>What the answers to these formulas?</p>
<br>
<button id="btn1">Hint</button>
<button id="btn2">change value</button>

Learn more on input element in JavaScript.

Hope I pushed you further.

edited Jul 18, 2019 at 16:22

answered Jul 18, 2019 at 16:19

ThS

4,7932 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Someone Over a year ago

How does this improve upon the OPs example?

Someone Over a year ago

I'd argue that it's considerably more complicated - seeing as they just want to change the value to a fixed one on click. It's also unrelated to the OPs problem as their code works. Don't get me wrong, I haven't downvoted you - I just don't think this is relevant to the question that was asked.

ThS Over a year ago

just for the demo purposes I did use a generated number. The OP can build on my attempt with any "values" he would like to use. Also, I just meant to illuminate his way, so using value attribute of the HTMLInputElement is more robust than using setAttribute function By the way, having such conversations would, without any doubt, make SO better.

Collectives™ on Stack Overflow

Refresh html input element value

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related