使用<select>和Javascript更改文本區域中文本的顏色

-2

我在簡單網站內有一個文本區域，用戶可以在其中鍵入他們喜歡的內容。我想添加一個選擇器（下拉框/ Combobox）來改變所述文本區域內所有文本的顏色。使用<select>和Javascript更改文本區域中文本的顏色

全碼

function Text() { 
 
     if(document.getElementById("textarea").style.fontWeight != 'bold') 
 
      document.getElementById("textarea").style.fontWeight = 'bold'; 
 
     else 
 
      document.getElementById("textarea").style.fontWeight = 'normal'; 
 
    } 
 
    function Text() { 
 
     if(document.getElementById("textarea").style.fontStyle != 'italic') 
 
      document.getElementById("textarea").style.fontStyle = 'italic'; 
 
     else 
 
      document.getElementById("textarea").style.fontStyle = 'normal'; 
 
    } 
 
    function Text() { 
 
     if(document.getElementById("textarea").style.textDecoration != 'underline') 
 
      document.getElementById("textarea").style.textDecoration = 'underline'; 
 
     else 
 
      document.getElementById("textarea").style.textDecoration = 'none'; 
 
    } 
 
     
 
     
 
    document.getElementById('colorChanger').addEventListener('change', changeColor); 
 
     
 
    function changeColor() { 
 
    var color = document.getElementById('colorChanger').value; 
 
    var list = document.getElementById('textarea'); 
 
    list.style.color=color; 
 
     
 
     
 
    }

body { 
 
     padding: 0px; 
 
     margin: auto; 
 
     display: block; 
 
     width: 10px; 
 
     height: 7px; 
 
     position: center; 
 

 
    } 
 
     
 
    h1 { 
 
     font-family: Arial, Helvetica, sans-serif; 
 
     font-size: 112px; 
 
     color: #C0C0C0; 
 
     text-align: center; 
 
     
 
    } 
 
     
 
    textarea { 
 
     width: 90%; 
 
     height: 450px; 
 
     padding: 12px 20px; 
 
     box-sizing: border-box; 
 
     border: 2px solid; 
 
     background-color:; 
 
     font-size: 16px; 
 
     resize: none; 
 
    } 
 
     
 
    #Button { 
 
     position: relative; 
 
     top: 450px; 
 
     left: 50px; 
 
    } 
 
     
 
    #Button { 
 
     position: relative; 
 
     top: 450px; 
 
     left: 70px; 
 
    } 
 
     
 
    #Button { 
 
     position: relative; 
 
     top: 450px; 
 
     left: 90px; 
 
    } 
 
    select { 
 
     position: relative; 
 
     top: -302px; 
 
     left: 320px; 
 
    }

<!doctype html> 
 
    
 
    <html> 
 
    <head> 
 

 
    \t <title>Simple Word Processor</title> 
 
    \t 
 
    \t 
 
    
 
    
 
    
 
    
 

 
    
 
    
 
    
 
    </head> 
 
    
 
    
 
    
 
    <body> 
 
    
 
     <button id="Button" type="button" onclick="boldText()">Bold</button> 
 
     <button id="Button" type="button" onclick="italicText()">Italic</button> 
 
     <button id="Button" type="button" onclick="underlineText()">Underline</button> 
 
     
 

 

 
     
 
     <form id="form"> 
 
      <textarea id="textarea">Enter text here...</textarea> 
 
     </form> 
 
     
 
    
 
     
 
    <select id="colorChanger"> 
 
     <option value="#000">Black</option> 
 
     <option value="#f00">Red</option> 
 
     <option value="#00f">Blue</option> 
 
     <option value="#0f0">Green</option> 
 
    </select> 
 
     
 
    
 
    \t 
 
    </body> 
 
    
 
    
 
    
 
    
 
    
 
    
 
    </html>

來源

2017-02-20 6A-6F-45

'document'中的'id'應該是唯一的。最多隻能有一個'＃textarea'元素。如果你正在嘗試選擇一個'textarea'元素，你可以使用'var list = document.querySelector（「textarea」）''''list'元素來設置'.color'而不用'for'循環。 – guest271314

getElementById不會返回數組

document.getElementById('colorChanger').addEventListener('change', changeColor); 
 

 
function changeColor() { 
 
var color = document.getElementById('colorChanger').value; 
 
var list = document.getElementById('textarea1'); 
 
list.style.color=color; 
 

 

 
}

<textarea id="textarea1">Enter text here...</textarea> 
 

 

 
<select id="colorChanger"> 
 
    <option value="#000">black</option> 
 
    <option value="#f00">Red</option> 
 
    <option value="#00f">Blue</option> 
 
    <option value="#0f0">Green</option> 
 
</select>

來源

2017-02-20 05:34:46

不幸的是，這對我不起作用，如果你能夠幫助我，我已經更新了我的文章並提供了更多信息。 –

將列表[i]更改爲列表 –

或發佈您的整個代碼，包括表格 –

只需設置style.color像下面。

var list = document.getElementById('textarea'); 
list.style.color = color;

document.getElementById('colorChanger').addEventListener('change', changeColor); 
 

 
function changeColor() { 
 
var color = document.getElementById('colorChanger').value; 
 
var list = document.getElementById('textarea'); 
 
list.style.color = color; 
 
}

<textarea id="textarea">Enter text here...</textarea> 
 

 

 
<select id="colorChanger"> 
 
    <option value="black">black</option> 
 
    <option value="red">Red</option> 
 
    <option value="yellow">Yellow</option> 
 
    <option value="green">Green</option> 
 
</select>

來源

2017-02-20 05:35:39

不幸的是，這對我不起作用，如果你能夠幫助我，我已經更新了我的文章並提供了更多信息。 –

給出一個唯一的id來形成textarea，比如'在這裏輸入文本...'然後try.then chage'var list = document.getElementById（'formtextarea'）;'希望它能夠起作用。 ' –

爲您推薦的here一個fiidle。

傳統的JavaScript：

<script type="text/javascript"> 
function abc(val){ 
document.getElementById("textarea").style.color=val; 
} 
</script> 

<textarea id="textarea">Enter text here...</textarea> 


<select id="colorChanger" onmousedown="this.value='';" onchange="abc(this.value)"> 
    <option value="black">black</option> 
    <option value="red">Red</option> 
    <option value="yellow">Yellow</option> 
    <option value="green">Green</option> 
</select>

Updatee：

在yopu代碼添加：

<script> 
function changeColor() { 
    var color = document.getElementById('colorChanger').value; 
    document.getElementById("textarea").style.color=color; 
}</script>

在頭

風格標籤之後。

你還沒有調用select變量的函數。將其添加到選擇標籤中。

<select id="colorChanger" onchange="changeColor()">

來源

2017-02-20 05:53:26 techhunter

謝謝你，任何可能你可以做到這一點在普通的老對面jQuery的JavaScript？ –

更新了答案。 – techhunter

不幸的是，我開始認爲我的整個代碼有問題 –

你與你的問題，你改變了我的getElementById到getElementByTagName評論結合我以前的代碼，它應該是getElementsByTagName你錯過了s，它會返回一個數組，而getElementById會返回一個對象


 
function boldText() { 
 
    if(document.getElementById("textarea").style.fontWeight != 'bold') 
 
     document.getElementById("textarea").style.fontWeight = 'bold'; 
 
    else 
 
     document.getElementById("textarea").style.fontWeight = 'normal'; 
 
} 
 
function italicText() { 
 
    if(document.getElementById("textarea").style.fontStyle != 'italic') 
 
     document.getElementById("textarea").style.fontStyle = 'italic'; 
 
    else 
 
     document.getElementById("textarea").style.fontStyle = 'normal'; 
 
} 
 
function underlineText() { 
 
    if(document.getElementById("textarea").style.textDecoration != 'underline') 
 
     document.getElementById("textarea").style.textDecoration = 'underline'; 
 
    else 
 
     document.getElementById("textarea").style.textDecoration = 'none'; 
 
} 
 
    
 
    
 
document.getElementById('colorChanger').addEventListener('change', changeColor); 
 
    
 
function changeColor() { 
 
var color = document.getElementById('colorChanger').value; 
 
var list = document.getElementById('textarea'); 
 
list.style.color=color; 
 
    
 
    
 
}


 
body { 
 
    border: 3px solid #C0C0C0 ; 
 
    padding: 0px; 
 
    margin: auto; 
 
    display: block; 
 
    width: 1000px; 
 
    height: 700px; 
 
    position: center; 
 
    outline-style: solid; 
 
    outline-color: #f8f8f8; 
 
    outline-width: 10000px; 
 
} 
 
    
 
h1 { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 112px; 
 
    color: #C0C0C0; 
 
    position: relative; 
 
    top: -220px; 
 
    text-align: center; 
 
    
 
} 
 
    
 
textarea { 
 
    width: 90%; 
 
    height: 450px; 
 
    padding: 12px 20px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #C0C0C0; 
 
    border-radius: 4px; 
 
    background-color: #f8f8f8; 
 
    font-size: 16px; 
 
    resize: none; 
 
    position: relative; 
 
    top: -305px; 
 
    left: 50px; 
 
} 
 
    
 
#boldButton { 
 
    position: relative; 
 
    top: 450px; 
 
    left: 50px; 
 
} 
 
    
 
#italicButton { 
 
    position: relative; 
 
    top: 450px; 
 
    left: 70px; 
 
} 
 
    
 
#underlineButton { 
 
    position: relative; 
 
    top: 450px; 
 
    left: 90px; 
 
} 
 
select { 
 
    position: relative; 
 
    top: -302px; 
 
    left: 320px; 
 
}

<!doctype html> 
 
    
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Simple Word Processor</title> 
 
</head> 
 
<body> 
 
    
 
    <button id="boldButton" type="button" onclick="boldText()">Bold</button> 
 
    <button id="italicButton" type="button" onclick="italicText()">Italic</button> 
 
    <button id="underlineButton" type="button" onclick="underlineText()">Underline</button> 
 
    
 
    <canvas></canvas> 
 
    
 
    <h1> Word Processor </h1> 
 
    
 
    <form id="form"> 
 
     <textarea id="textarea">Enter text here...</textarea> 
 
    </form> 
 
    
 
    
 
    
 
    
 
    
 
    
 
<select id="colorChanger"> 
 
    <option value="#000">Black</option> 
 
    <option value="#f00">Red</option> 
 
    <option value="#00f">Blue</option> 
 
    <option value="#0f0">Green</option> 
 
</select> 
 
    
 
</body> 
 
</html>

來源

2017-02-20 06:21:46

仍然沒有運氣，是否有我的代碼嚴重錯誤？ –

你在這裏運行嗎？ –

點擊運行代碼片段按鈕 –

使用<select>和Javascript更改文本區域中文本的顏色

回答

相關問題