4

I need to assign variable to value attribute in the input element

Here is my input tag.

<input type="text" id="Name" class="form-control form-control-alternative" placeholder="Usernam" value="myValue">

Here is my variable.

var myValue = document.getElementById('userVal');

Anyone, please help me to fix this problem?

1
  • var myValue = document.getElementById("Name").value; Commented Jan 15, 2019 at 18:24

4 Answers 4

3

You can set input default value. You can not bind myValue in the html without some js framework. To get input value use change event. Check my code snippet.

var input = document.getElementById('Name');
var myValue = 'Name example';
input.value = myValue;

var myFunction = function (e) {
  console.log(e.target.value);
}
<input type="text" id="Name" class="form-control form-control-alternative" placeholder="Usernam" onchange="myFunction(event)" value="myValue">

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

Comments

0

ASSIGN INPUT VALUE TO VARIABLE:

You need to assign the variable to the element's value, not the element itself. Also, your current input id is Name, not userVal. Change that to userVal then retrieve the value like this:

var myValue = document.getElementById('userVal').value;

Check the following Code Snippet for a practical example on how to retrieve an input value and assign it to a variable:

/* JavaScript */

document.querySelector("button").addEventListener("click", function() {
var myValue = document.getElementById('userVal').value;
alert(myValue);
})
<!-- HTML -->

<input type="text" id="userVal" class="form-control form-control-alternative" placeholder="Username">
<button>Check Value</button>

ASSIGN VARIABLE TO INPUT VALUE:

To assign your input element's value to a variable, just reverse the above assignment like this:

var newValue = newValue;
document.getElementById('userVal').value = newValue;

Check the following Code Snippet for a practical example on how to assign a variable to your input element's value attribute:

/* JavaScript */

document.querySelector("button").addEventListener("click", function() {
  var newValue = "newValue"; 
  document.getElementById('userVal').value = newValue;
});
<!-- HTML -->

<input type="text" id="userVal" class="form-control form-control-alternative" placeholder="Original" value="myValue">
<br /><br />
<button>Change Value</button>

7 Comments

But my friend i canot use var myValue = document.getElementById('userVal').value; instead of var myValue = document.getElementById('userVal') Because this myValue defied by below firebase query. dbRefName.on('value', snap => myValue.innerText = snap.val());
So you are trying to pull data from your firebase and push it as a value to your input or?
Yes. Exactly. I am trying to pull data from firebase database and try to put this value to input tag's value like some kind of this value="userVal" attribute.
But why can't you use var myValue = document.getElementById('userVal').value after firebase has set it's value first though?
I've already tried it, bro. the chrome console said Uncaught TypeError: Cannot set property 'innerText' of undefined
|
0

if you want to assign value to this input:

<input type="text" id="Name" class="form-control form-control-alternative" placeholder="Usernam" value="myValue">

you should use this code:

var myValue = document.getElementById('userVal').value;
document.getElementById("Name").value = myValue;

You can look to the documentation and example here: https://www.w3schools.com/jsref/prop_text_value.asp

2 Comments

But my friend i canot use var myValue = document.getElementById('userVal').value; instead of var myValue = document.getElementById('userVal') Because this myValue defined by below firebase query. dbRefName.on('value', snap => myValue.innerText = snap.val());
Than, i don't understand your question, you asked: "How to assign variable to value attribute in input element?" You can assign variable "any_variable" to input with id "any_input_id" with code: document.getElementById("any_input_id").value = any_variable;
-1

In JavaScript, add value property to your code as:

    var myValue = document.getElementById("name").value

In HTML, use the same id to refer the input tag as:

    <input type="text" id="Name" class="form-control form-control-alternative" placeholder="Usernam" value="myValue">

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.