Javascript-textarea生成文本

這是怎麼回事？Javascript-textarea生成文本

<!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>

控制檯錯誤：選擇（select_color）的值是不確定的！它不讀取選擇選項的值。

爲什麼？

值已設置。

那麼，爲什麼？

請幫忙！

或者不可能得到一個textarea元素的價值與我的jQuery？

來源

2017-05-22 Simply Master

檢查了這一點如何得到的值：https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list -using-javascript – shotor

請問能告訴問題是什麼？ – brk

改變一點點......

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

來源

2017-05-22 15:22:10

Javascript-textarea生成文本

回答

相關問題