html input values in javascript

Question

I can't seem to figure out this problem that I have:

<script>
    function getValues(){
        var value1 = document.getElementById("value1");
        var value2 = document.getElementById("value2");
        var value3 = document.getElementById("value3");
        alert(value1 +" "+ value2 +" "+ value3);
    }
</script>

<p>value1</p>   
<input type="text" id='value1' />
<p>value2</p>
<input type="text" id='value2' />
<p>value3</p>
<input type="text" id='value3' />
<input type="button" value="submit" onclick="getValues()" />

I try to get the values the user filled in and then alert them back to them but instead of showing the values they filled in, it says:

[object HTMLInputElement] [object HTMLInputElement] [object HTMLInputElement]

Does anyone have an idea what could be the problem?

Answer 1

Try it like this

function getValues(){

        var value1 = document.getElementById("value1").value;
        var value2 = document.getElementById("value2").value;
        var value3 = document.getElementById("value3").value;
        alert(value1 +" "+ value2 +" "+ value3);
    }

Answer 2

var value1 = document.getElementById("value1");

Gets the DOM Element associated with the value1 Id. In order to get the value of the element you need to do:

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

Answer 3

document.getElementById("value1") returns a dom element.

To assign it, get the value by using it like this:

document.getElementById("value1").value