CODEWITHSUNDEEP
javascripthtml
Jack123456789
Jack123456789

Reputation: 85

JavaScript/HTML: How to display user input into html body?

heres my html form:

<label>Name:</label><input type ="text" input id="myName" /><br>
<label>Street:</label><input type="text" input id="myStreet" /><br>
<label>City:</label><input type="text" input id="myCity" /><br>
<label>State:</label> <input type="text" input id="myState" /><br>
<label>Zip:</label> <input type="text" input id="myZip" /><br>

<input type="submit" value="Submit" onclick="myAlert()">
</form>
//my myAlertFunc (from external file) 

function myAlert(){
    var person = new Person(document.getElementById('myName').value, document.getElementById("myStreet").value, document.getElementById("myCity").value, document.getElementById("myState").value, document.getElementById("myZip").value);
    alert(person.getFullAddress());
}

//and my getFullAddress proto from my Person class

Person.prototype.getFullAddress = function () {
    return ("Hi, my name is" + " " + this.name + "," + " " + "and my address is:" + " " + this.street + "," + this.city + "," + this.state + "," + this.zip);
};

Now, onclick, the myAlertFunc alerts the users input values. How do I display these values in my html body? I know I am supposed to use a element with just an input id and use document.getElementById(); to call that id but i have no idea what to do after that.

Thanks in advance!

Upvotes: 2

Views: 15100

Answers (2)

optimarcusprime
optimarcusprime

Reputation: 96

The attribute you're looking for is innerHTML: http://www.w3schools.com/jsref/prop_html_innerhtml.asp

So, your code would be something along the lines of:

// alert(person.getFullAddress());
document.getElementById("resultDiv").innerHTML = person.getFullAddress();

Where "resultDiv" is the ID of the element where you want the result to display.

Good luck!

Upvotes: 3

BerinHardt
BerinHardt

Reputation: 155

you can set the innerHTML of the element or its value if it's an input

Upvotes: 2

Related Questions