Javascript/Html: How to Display User Input into Html Body?
Here's My Html Form: Name: Street: City: State: Zip: //My myAlertFunc (From External File) Function myAlert(){ Var Person = New Person(Document...
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!
2 Answers
The attribute you're looking for is innerHTML:
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!
you can set the innerHTML of the element or its value if it's an input
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
