Change Image from Form Input with Javascript and HTML -

Change Image from Form Input with Javascript and HTML -

i want create skin viewing website game minecraft , need have simple form displays image minotar.net , displays entered username thier image / skin under form

the form should add together username end of url, example:

form text submitted: notch

changes: img src="https://minotar.net/skin/username" img src="https://minotar.net/skin/notch" , displays image below form.

--

the code tried

<div class="page-header"> <h2>enter minecraft username download skin:</h2> </div> <div class="input-group"> <input type="text" id="page" class="form-control"> <span class="input-group-btn"> <input type="submit" value="download skin!" onclick="gotopage();" class="btn btn-success"> <img id="page" src="http://minecraft-skin-viewer.com/skin.php?user="> </span>

javascript:

function gotopage() { var page = document.getelementbyid('page').value; img.src = "http://minecraft-skin-viewer.com/skin.php?user=" + page }

jsfiddle http://jsfiddle.net/4dqbp/14/ thanks!

wow, you're doing starting javascript. found few errors in code , corrected them in jsfiddle @ end of answer. here mistakes, future reference:

unlike classes, ids must unique. had 2 ids both named "page." not valid html, , cause errors.

you used img.src. allowed, if img variable. in fiddle, made img variable, using getelementbyid method.

you should close img tags , input tags. people "what mean, close tags?" well, consistency, , making xhtml easier larn later, it's habit create sure input tag looks this:

<input type="text" id="textbox1"/>

not this:

<input type="text" id="textbox2"> (notice missing "/" @ end.)

other that, cleaned formatting. you're go!

jsfiddle here

javascript html forms