Jump to content

HTML Dom


jackerybakery
 Share

Recommended Posts

Hello I'm sorry that this is such a simple question, however I've been trying to solve it for ages and have decided I must have missed something and will be kicking myself when I hear the answer.I am trying to get my webpage to load an image from the input of the user from a form in HTML, for use by a JavaScript function. However I cannot obtain the value which the user types into the form.

function watermark(){	var image = document.createElement("img");		x = document.input.img;		image.src="./images/" + x.nodeValue+ ".jpg";		document.write(image.src)  //Check what the output is				...etc...}

<body><form name="input"><input type="text" name="img" /><input type="button" onClick="watermark()" value="Watermark" /></form></body></html>

This is just one example of what I have tried. Other examples are .innerHTML; .getElementById("...").innerHtml (or) "".nodeValueand many more.Cheers,Jack

Link to comment
Share on other sites

try value to get the value of input elements.More importantly, are these paths intended to be from somewhere on the web or from the users computer?

Edited by thescientist
Link to comment
Share on other sites

It's odd that you would combine modern DOM techniques with old-style syntax like document.input.imgusing document.write() on an existing document will cause the entire thing to be destroyed. Only ever use it while the document is still loading, not after. I guess it's okay as a check . . .

Edited by Deirdre's Dad
Link to comment
Share on other sites

try value to get the value of input elements.More importantly, are these paths intended to be from somewhere on the web or from the users computer?
Its ok, its just a script for my own use, so will only access my own files. It will also only read the files.Thanks for your help. Edited by jackerybakery
Link to comment
Share on other sites

It's odd that you would combine modern DOM techniques with old-style syntax like document.input.imgusing document.write() on an existing document will cause the entire thing to be destroyed. Only ever use it while the document is still loading, not after. I guess it's okay as a check . . .
Yeh, just put it in there later as a check and will remove it when I've figured out the syntax I need. The old-style syntax I found on this website so decided to try it.Can you suggest a good and up to date line of code for retrieving the value the user types?Thanks :)
Link to comment
Share on other sites

ok set the input element's id to "imageName"then changed the code to:

image.src="./images/" + document.getElementById("imageName").nodeValue + ".jpg";

which returned

file:///C:/Users/Jackery/Documents/web/rebeccArt/images/null.jpg

Also tried:

image.src="./images/" + document.getElementById("imageName").innerHTML + ".jpg";

Which returned:

file:///C:/Users/Jackery/Documents/web/rebeccArt/images/.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...