答案 0 :(得分：2)
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>
答案 1 :(得分：2)
只需设置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>
答案 2 :(得分：1)
为你here创建了一个文件。
使用传统的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 on tag的函数。在select标签中添加。
<select id="colorChanger" onchange="changeColor()">
答案 3 :(得分：0)
您将我之前的代码与您的问题中的评论相结合，我将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>