使用<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更改文本区域中文本的颜色

回答

相关问题