Tutorial :How to change the background image of a textarea



Question:

How can I change my textarea background image when I select a value from the select menu?

<html>  <head>  <title>  Your Title  </title>    <script>  function kool()  {  `enter code here`abc.style.background="img1.bmp"  }  </script>  </head>  <body>    <textarea name="abc">  1) Make paper airplanes out of the exam. Aim them at the instructor's left nostril.   2) Bring cheerleaders during an exam.  </textarea>    <select id="xyz" onchange="kool()">  <option value="A">Image 1</option>  <option value="B">Image 2</option>  </select>    </body>  </html>  


Solution:1

This should work:

<textarea id="text">  Lorem ipsum dolor sit amet, ...  </textarea>    <select onchange="document.getElementById('text').style.backgroundImage = 'url(' + this.value + ')';">  <option value="image1.png">Image 1</option>  <option value="image2.png">Image 2</option>  </select>  


Solution:2

It should be:

<script>  function kool(input)  {     var el = document.getElementById('abc');     el.style.backgroundImage = 'url(' + input + ')';  }  </script>  </head>  <body>    <textarea name="abc" id="abc">  1) Make paper airplanes out of the exam. Aim them at the instructor's left nostril.   2) Bring cheerleaders during an exam.  </textarea>    <select id="xyz" onchange="kool(this.value)">  <option value="A.jpg">Image 1</option>  <option value="B.jpg">Image 2</option>  </select>  

Make sure that paths are correct.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »