Javascript-Text mit Textarea generieren

Was ist los ??Javascript-Text mit Textarea generieren

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>JavaScript Basic | Training 2</title> 
 
\t <!-- ignore these links --> 
 
\t <link rel="stylesheet" href="fonts.css"> 
 
\t <link rel="stylesheet" href="main.css"> 
 
\t 
 
\t 
 
</head> 
 
<body> 
 
     <!-- script section --> 
 
\t \t <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 
 
\t \t \t function add_text() { 
 
\t \t \t \t var text_source=document.getElementById('place_here').value; //text from textarea(get the text from textarea/value) 
 
\t \t \t \t 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>> 
 
\t \t \t \t var create_text=document.createElement('h3'); //create a new html element(a new header,h3) 
 
\t \t \t \t var new_text=document.createTextNode(text_source + "<br />"); //create text in html h3 element(value from textarea element,below) 
 
\t \t \t \t new_text.style.color="'" + text_color + "'"; // set text color for new html element(the color value from select-option element,below) 
 
\t \t \t \t create_text.appendChild(new_text); //create new child 
 
\t \t \t \t document.body.appendChild(text_source); //add the child created above in body(HTML) 
 

 
\t \t \t } 
 
      //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! 
 
\t \t </script> 
 
\t <h2 style="text-align: center; margin-top: 20px;">Insert text!</h2> <br> <br> <!-- page header --> 
 
     <!-- a textarea element,properties:cols 30 and rows 10 --> 
 
\t <textarea id="place_here" cols="30" rows="10" placeholder="Write here!"> 
 
\t \t 
 
\t </textarea> <br> <br> 
 
\t <select name="" id="select_color"> 
 
\t <!-- color value,for text color --> 
 
\t \t <option value="red">Red</option> 
 
\t \t <option value="blue">Blue</option> 
 
\t \t <option value="green">Green</option> 
 
\t \t <option value="orange">Orange</option> 
 
\t 
 
\t </select> 
 
\t <input type="button" value="Add text!" onclick="add_text()"> 
 
    <!-- button with function --> 
 

 
\t 
 

 
\t 
 
\t 
 
</body> 
 

 
</html>

Console-Fehler: Wert von select (select_color) ist nicht definiert! Es liest nicht den Wert der Select-Option.

Warum?

Wert bereits eingestellt.

Also, warum?

Bitte helfen!

Oder ist nicht möglich, den Wert eines Elements TextArea- withour jquery zu bekommen?

Quelle

2017-05-22 Simply Master

dieses Schauen Sie sich auf, wie der Wert zu erhalten: https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list -using-javascript – shotor

können Sie bitte sagen, was ist das Problem? – brk

Änderung ein wenig ...

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);

Quelle

2017-05-22 15:22:10

Javascript-Text mit Textarea generieren

Antwort

Verwandte Themen