Javascript-generate text with textarea

Question

What is wrong??

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScript Basic | Training 2</title>
 <!-- ignore these links -->
 <link rel="stylesheet" href="fonts.css">
 <link rel="stylesheet" href="main.css">
 
 
</head>
<body> 
      <!-- script section -->
  <script> 
            //this function get the text(value from textarea,"place_here"),create a new html element,set a color for this element(from select-option-value ) and displays this element
            //function without declared parametres
   function add_text() {
    var text_source=document.getElementById('place_here').value; //text from textarea(get the text from textarea/value)
    var text_color=document.getElementById("select_color").value; //text color(get the color/value from select-option)
//here is the problem,console error:<<Uncaught TypeError: Cannot set property 'color' of undefined at add_text>>
    var create_text=document.createElement('h3');  //create a new html element(a new header,h3)
    var new_text=document.createTextNode(text_source + "<br />"); //create text in html h3 element(value from textarea element,below)
    new_text.style.color="'" + text_color + "'"; // set text color for new html element(the color value from select-option element,below)
    create_text.appendChild(new_text);  //create new child 
    document.body.appendChild(text_source); //add the child created above in body(HTML)

   }
            //so,where is wrong? i don't find where is bad in this function
            // i tried to use something like this: document.getElementById("select_color").option.value; but the same thing....
            //Why is wrong?I don't know where is the problem!
  </script>
 <h2 style="text-align: center; margin-top: 20px;">Insert text!</h2> <br>  <br> <!-- page header -->
        <!-- a textarea element,properties:cols 30 and rows 10 -->
 <textarea id="place_here" cols="30" rows="10" placeholder="Write here!">
  
 </textarea> <br> <br>
 <select name="" id="select_color">
  <!-- color value,for text color -->
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="orange">Orange</option>
 
 </select>
 <input type="button" value="Add text!" onclick="add_text()"> 
   <!-- button with function -->

 

 
 
</body>

</html>

Console error:value of select(select_color) is undefined! It don't read the value of select-option.

Why?

Value is already set.

So,why?

Please help!

Or isn't possible to get the value of a textarea element withour jquery?

Check this out on how to get the value: https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — shotor, May 22 '17 at 15:06

Frank Wisniewski · Answer 1 · 2017-05-22T17:02:22.140

change a little bit...

    var text_source=document.getElementById('place_here').value; //text from textarea(get the text from textarea/value)
    var text_color=document.getElementById("select_color")[document.getElementById("select_color").selectedIndex].value;
    var create_text=document.createElement('h3');  //create a new html element(a new header,h3)
    var new_text=document.createTextNode(text_source); //create text in html h3 element(value from textarea element,below)
    create_text.style.color=text_color; // set text color for new html element(the color value from select-option element,below)
    create_text.appendChild(new_text);  //create new child 
    document.body.appendChild(create_text);

Javascript-generate text with textarea

1 Answers1