CODEWITHSUNDEEP
javascripthtml
pyFiddler
pyFiddler

Reputation: 321

Outputting JS function output to a text area

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>

Upvotes: 0

Views: 175

Answers (1)

GregL
GregL

Reputation: 38103

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.

Upvotes: 1

Related Questions