Jump to content

Change Value - TextArea

danman97

By danman97
in JavaScript

Recommended Posts

danman97 Newbie

danman97

Posted
Posted

Hi (yes, I'm back AGAIN!)I have been trying to build my own mini link builder page. See here! However I cant get the variables to link up and be written into the value attribute of my <Textarea>.Relevent Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Link Maker!</title><style>div#uberContainer{	max-width:75%;	margin-left:auto;	margin-right:auto;	left:50%;	outline:solid;	outline-color:#003;}.inputRight{	position:	margin-left:auto;	left:100%;}body{	font:Tahoma, Geneva, sans-serif;	font-family:Tahoma, Geneva, sans-serif;	background-color:#000033;	color:#06F;}textarea{	max-width:600px;	min-width:350px;	min-height:100px;}table{	vertical-align:text-top;}</style><script>function editLink(){	var lText= document.getElementById(linkText);	var lURL= document.getElementById(linkURL);	var taValue= document.getElementById(taHTMLoutput);	function changeHTML()	{		return "<a href=\"" + lURL + "\">" + lText + "</a>";	};	changeHTML;	taValue.value= changeHTML;}</script></head><body><div id="uberContainer"><div id="headerContainer"><h1>Welcome!</h1></div><div id="mainContainer"><table align="center"><tr><td><form style="border:1; border:#666"><legend><h3>Link Details</h3></legend><div id="formContainer"><table><tr><td><label for="linkText">Link Text</label></td><td><input class="inputRight" id="linkText" autofocus="autofocus" placeholder="Mel Jones Photography Ltd." required size="40" type="text" autocomplete="on" /></td></tr><br /><tr><td><label for="linkURL">Link URL</label></td><td><input type="url" required class="inputRight" id="linkURL" placeholder="http://meljones.info/" size="40" /></td></tr><tr><td></td><td><button onclick="editLink;">Amend Link!</button></tr></table></div></form></td><td><table><tr><td><h3>Output: </h3><p>Not Done Yet!</p></td><td><p id="outputP"></p></td></tr><tr><td>HTML:</td><td><textarea value="changeHTML;" id="taHTMLoutput" readonly placeholder="The HTML code for the Link will appear here!"></textarea></td></tr></table></td></tr></table></div></div></body></html>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

<button onclick="editLink()"> // add the parentheses to call a functionchangeHTML;taValue.value= changeHTML; // call changeHTML once. Delete the first call. Use parentheses.var lText= document.getElementById(linkText);var lURL= document.getElementById(linkURL);var taValue= document.getElementById(taHTMLoutput); // all these id values should be "quoted". For lText and lURL, you probably want the element's value property.

Link to comment
Share on other sites
JamesB Member

JamesB

Posted
Posted 
<button onclick="editLink;">

In that, the function name needs () after it, as the text between the " is javascript code to run, not a function being passed by reference.The 3 lines like this:

document.getElementById(linkText);

need quotes or apostrophes around the id text. eg. 'linkText'and this:

changeHTML;taValue.value= changeHTML;

can be changed to:

taValue.value= changeHTML();

which means the changeHTML function will be called, and the value returned from it will be assigned to the taValue.value property.edit: ahh, too slow!

Link to comment
Share on other sites
danman97 Newbie

danman97

Posted
  • Author
Posted

Ok. It half works now. Just cant get it to show the actual values of the fields!

<html><title>Link Maker!</title><script>function editLink(){	var lText= document.getElementById('linkText');	var lURL= document.getElementById('linkURL');	var taValue= document.getElementById('taHTMLoutput');	function changeHTML()	{		return "<a href=\"" + lURL + "\">" + lText + "</a>";	};	taValue.value= changeHTML();}</script></head><body><div id="uberContainer"><div id="mainContainer"><table align="center"><tr><td><form style="border:1; border:#666"><legend><h3>Link Details</h3></legend><div id="formContainer"><table><tr><td><label for="linkText">Link Text</label></td><td><input class="inputRight" id="linkText" autofocus="autofocus" placeholder="Mel Jones Photography Ltd." required size="40" type="text" autocomplete="on" /></td></tr><br /><tr><td><label for="linkURL">Link URL</label></td><td><input type="url" required class="inputRight" id="linkURL" placeholder="http://meljones.info/" size="40" /></td></tr><tr><td></td><td><button onclick="editLink();">Amend Link!</button></tr></table></div></form></td><td><table><tr><td><h3>Output: </h3><p>Not Done Yet!</p></td><td><p id="outputP"></p></td></tr><tr><td>HTML:</td><td><textarea value="changeHTML();" id="taHTMLoutput" readonly placeholder="The HTML code for the Link will appear here!"></textarea></td></tr></table></td></tr></table></div></div></body></html>

Do I need to add '.value' to the variables?e.g.:function changeHTML() { return "<a href=\"" + lURL.value + "\">" + lText.value + "</a>"; };

Link to comment
Share on other sites
danman97 Newbie

danman97

Posted
  • Author
Posted

All working now, Thank You!Had to stop the form resetting to make it work. Soloution Here: Stop Form ResetFull Working Code:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Link Maker!</title><style>/* element styling *//*                 */a{	color:#F28705;}a:visited{	color:#BF3604;}body{	font:Tahoma, Geneva, sans-serif;	font-family:Tahoma, Geneva, sans-serif;	background-color:#324452;	color:#cccccc;}textarea{	max-width:600px;	min-width:350px;	min-height:100px;}table{	vertical-align:text-top;}/* element id styling *//*                    */div#uberContainer{	max-width:75%;	margin-left:auto;	margin-right:auto;	left:50%;	outline:solid;	outline-color:#97BDBF;}nav#mainNav{	vertical-align:top;	right: 10%;}/* classes *//*         */.inputRight{	margin-left:auto;	left:100%;}.class1{	color:#97BDBF;}</style><script>function editLink(){	var lText= document.getElementById('linkText');	var lURL= document.getElementById('linkURL');	var taValue= document.getElementById('taHTMLoutput');	function changeHTML()	{		return "<a href=\"" + lURL.value + "\">" + lText.value + "</a>";	};	taValue.value= changeHTML();	document.getElementById('outputP').innerHTML = "<a href=\"" + lURL.value + "\">" + lText.value + "</a>";}function select_content(elementID) {  // first set focus  document.getElementById([elementID]).focus();  // select all contents  document.getElementById([elementID]).select();  }</script></head><body><div id="uberContainer"><header><table width="100%"><tbody><tr><td><h1>Welcome!</h1></td><td align="right"><nav id="mainNav"><a href="">Home</a><a onmouseover="">Show stuff on mouse over!</a></nav></td></tr></tbody></table><hr class="class1" /></header><div id="mainContainer"><table align="center"><tr><td><form id="form1" onsubmit="return false;" style="border:1; border:#666"><legend><h3>Link Details</h3></legend><div id="formContainer"><table><tr><td><label for="linkText">Link Text</label></td><td><input class="inputRight" id="linkText" autofocus="autofocus" placeholder="Mel Jones Photography Ltd." required size="40" type="text" autocomplete="on" /></td></tr><br /><tr><td><label for="linkURL">Link URL</label></td><td><input type="url" required class="inputRight" id="linkURL" placeholder="http://meljones.info/" autocomplete="on" size="40" /></td></tr><tr><td></td><td><button onclick="editLink();">Amend Link!</button></tr></table></div></form></td><td><table><tr><td><h3>Output: </h3></td><td><p id="outputP"></p></td></tr><tr><td>HTML:</td><td><form id="formHTMLoutput"><textarea onClick="select_content('taHTMLoutput');" value="" id="taHTMLoutput"readonly placeholder="The HTML code for the Link will appear here!"></textarea></form></td></tr></table></td></tr></table></div></div></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...