-2

This is my code:

JS 

<Script Language="JavaScript"> 
      function add1(x)
      {
          var oImg=document.createElement("img");
          oImg.src=x;
          document.getElementById("test").appendChild(oImg);
      }
</Script>

HTML 

<body>
     <div>
          <textarea id="test" rows="10" cols="50"></textarea> 

          <input type="radio" name="emotion" id="sad" />
          <label for="sad"><img src="images/tango_face_sad.jpeg" alt="I'm sad" onclick="add1(this.src)" /></label>

          <input type="radio" name="emotion" id="happy" />
          <label for="happy"><img src="images/blush.jpeg" alt="I'm happy" onclick="add1(this.src)"/></label>
    </div>
</body>

It runs on IE fine but does'nt work on firefox. What is the problem in my code??

Termininja
  • 6,620
  • 12
  • 48
  • 49
user3855182
  • 11
  • 1
  • 3
  • You can't place an `img` within a `textarea`. – emerson.marini Dec 19 '14 at 11:12
  • possible duplicate of [HTML : Is there any way to show images in a textarea?](http://stackoverflow.com/questions/3793090/html-is-there-any-way-to-show-images-in-a-textarea) – emerson.marini Dec 19 '14 at 11:13
  • but it works on IE.Problem occurs with Firefox. – user3855182 Dec 19 '14 at 11:19
  • Define both _works_ and _doesn't work_. – emerson.marini Dec 19 '14 at 11:21
  • [Specification](http://www.w3.org/TR/html-markup/syntax.html#replaceable-character-data): _In documents in the HTML syntax, the title and textarea elements can contain replaceable character data. Replaceable character data can contain the following: 1) text, optionally including "<" characters; 2) character references._ – emerson.marini Dec 19 '14 at 11:24
  • What kind of sourcery is this? The code really works in IE! Though Chrome and FF add a tag to the textarea, but they don't show the image (nor tag as text either). Rather I'd say this is a bug in IE, don't expect it to work in other browsers. – Teemu Dec 19 '14 at 16:52

1 Answers1

1

You can't display an image directly inside a textarea control.

The closes you can get is overlay an image on it, but it will not be part of the information in the textarea. That is, text will not flow around it and when posting the form it will not be included in the data for the textarea.

Perhaps a writable div (content editable) would suit your purposes better. html 

div{
    width:300px;
    height:200px;
    border: 1px solid #ccc;
}
<div contentEditable="true"> type here
    <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" />
</div>

Try this : here`http://jsfiddle.net/6bCRJ/