Outputting JS function output to a text area

Question

Trying to get this function to output to the textarea below. The current code below works, but it takes over the whole page rather than outputting to a text field. I am aware that the two are not properly hooked up. I have hacked around with this for quite some time and it is driving me insane now so this is the last stable version of this script.

Any advice?

  function doStuff()
  {
    var clkUrl = document.getElementById("clkUrl");
    var clkName = clkUrl.value;
    var assetUrl = document.getElementById("banUrl");
    var assetName = assetUrl.value;
    var impUrl = document.getElementById("impPix");
    var impName = impUrl.value;


    document.write('&lt;a href="'+clkName+'" target="_blank"&gt;'+'<br>');
    document.write('&lt;img src="'+assetName+'"&gt;'+'<br>');
    document.write('&lt;/a&gt;'+'<br>');
    document.write('&lt;img src="'+impName+'"&gt;'+'<br>');
  }

<input name="maininput" id="clkUrl" type="text" placeholder="Click Tracker" autofocus>
<br>
<input id="banUrl" type="text" placeholder="Asset URL">
<br>
<input id="impPix" type="text" placeholder="Impressions Pixel">
<br>
<input type="button" value="Get iFrame" onClick="doStuff()">
<br><br>
<textarea id="iframeoutput" rows="8" cols="50"></textarea>

Two pieces of advice: 1. use jQuery. 2. try jsfiddle.com (and add a link here). — the
– the, Commented Aug 14, 2014 at 1:31

GregL · Accepted Answer · 2014-08-14 01:55:27Z

1

You need to set the innerHTML property of the <textarea>. Unlike normal <input>s, <textareas> don't have a value property, they render the contents between the start and end tag.

So the doStuff() function becomes:

  function doStuff() {
      var clkUrl = document.getElementById("clkUrl");
      var clkName = clkUrl.value;
      var assetUrl = document.getElementById("banUrl");
      var assetName = assetUrl.value;
      var impUrl = document.getElementById("impPix");
      var impName = impUrl.value;

      var output = document.getElementById("iframeoutput");
      output.innerHTML = '&lt;a href="' + clkName + '" target="_blank"&gt;' + '<br>';
      output.innerHTML += '&lt;img src="' + assetName + '"&gt;' + '<br>';
      output.innerHTML += '&lt;/a&gt;' + '<br>';
      output.innerHTML += '&lt;img src="' + impName + '"&gt;' + '<br>';
  }

See this working jsFiddle.

answered Aug 14, 2014 at 1:55

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Boyan Hristov Over a year ago

Also, it is better to stack variables when declared at once, not using the var every time. See this fiddle if you don't know what I mean.

GregL Over a year ago

@user3127242, this is purely a stylistic preference. There is no performance benefit to stacking them together, see this jsPerf for proof. What can be helpful is grouping all the variables at the start of the function due to Javascript's hoisting behaviour.

Collectives™ on Stack Overflow

Outputting JS function output to a text area

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related