CODEWITHSUNDEEP
javascripthtml
DustinL_G
DustinL_G

Reputation: 17

Javascript text field

Problem:

Using an event listener, I'm looking to have the values in the text fields show up in the corresponding divs when the button is clicked. "[object HTMLInputElement]" is showing up in the divs when the button is clicked. I think that the textOne variable is holding the text field itself and not its contents. How can i fix this?

html: 

<form>
<input type="text" id="textOne" value="one"/><br>
<input type="text" id="textTwo" value="two"/><br>
<input type="button" id="btn" value="Enter"/><br>
textOne: <div id="one" style="width: 100px; height: 20px; border: 1px solid black;"></div><br>
textTwo: 
<div id="two" style="width: 100px; height: 20px; border: 1px solid black;"></div>
</form>

javascript: 

var divOne = document.getElementById("one");
var divTwo = document.getElementById("two");
var textOne = document.getElementById("textOne");
var textTwo = document.getElementById("textTwo"); 
var btn = document.getElementById("btn");

function inDiv() {

    divOne.innerHTML = textOne;
    divTwo.innerHTML = textTwo;
}

btn.addEventListener("click", inDiv);

Upvotes: 0

Views: 60

Answers (3)

vicky patel
vicky patel

Reputation: 705

var one = document.getElementById("one");
var two = document.getElementById("two");
var inp1 = document.getElementById("textOne");
var inp2 = document.getElementById("textTwo");
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
one.innerHTML = inp1.value;
two.innerHTML = inp2.value;
})
<form>
<input type="text" id="textOne" value="one"/><br>
<input type="text" id="textTwo" value="two"/><br>
<input type="button" id="btn" value="Enter"/><br>
textOne: <div id="one" style="width: 100px; height: 20px; border: 1px solid black;"></div><br>
textTwo: 
<div id="two" style="width: 100px; height: 20px; border: 1px solid black;"></div>
</form>

Upvotes: 0

davidxxx
davidxxx

Reputation: 131396

I think that the textOne variable is holding the text field itself and not its contents.

No, it doesn't.
document.getElementById("one"); returns the html element input itself.
To get itsvalue, refer the value property of this input :

var value = document.getElementById("one").value;

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68665

You need to access their values. Use .value property to access their values. With getElementById you get the whole HTMLElement as object, in your case HTMLInputElement. You can access many other properties of that object.

var divOne = document.getElementById("one");
var divTwo = document.getElementById("two");
var textOne = document.getElementById("textOne");
var textTwo = document.getElementById("textTwo"); 
var btn = document.getElementById("btn");

function inDiv() {

    divOne.innerHTML = textOne.value;
    divTwo.innerHTML = textTwo.value;
}

btn.addEventListener("click", inDiv);
<form>
<input type="text" id="textOne" value="one"/><br>
<input type="text" id="textTwo" value="two"/><br>
<input type="button" id="btn" value="Enter"/><br>
textOne: <div id="one" style="width: 100px; height: 20px; border: 1px solid black;"></div><br>
textTwo: 
<div id="two" style="width: 100px; height: 20px; border: 1px solid black;"></div>
</form>

Upvotes: 1

Related Questions