Question

我尝试使用下拉菜单更改输入文本的颜色，但它不起作用。请帮忙

＆＃13;

function selectColor()
{ 
  var color = document.getElementById('colours').value;
  document.getElementById("text1").style.color = color;
}

＆＃13;

<h3>Text Colour: 
  <select id="colours">
    <option value="None" onclick = "selectColor()"> 
    <option value="red" onclick = "selectColor()" >Red
    <option value="green" onclick = "selectColor()">Green
    <option value="blue" onclick = "selectColor()">Blue
    <option value="pink" onclick = "selectColor()">Pink
  </select>
</h3>
<p id="text1">Text color</p>

＆＃13;

Answer 1

三件事：

使用脚本标记
更喜欢onchange代码

select

使用text1 id，span，div，paragraph，您的选择添加标记。

＆＃13;

<script>
function selectColor()
{ 
var color = document.getElementById('colours').value;
document.getElementById("text1").style.color = color;


}
</script>

<h3>Text Colour: 
    <select id="colours" onchange="selectColor();">
      <option value="None"></option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="pink">Pink</option>
    </select>
  </h3>
   <span id="text1">Color selected!</span>

＆＃13;

Answer 2

现在看，我是一个不引人注目的javascript粉丝。如果可能的话，我将从HTML中分离出脚本。下面是H3和一个select，脚本本身定义了事件处理程序。

＆＃13;

document.getElementById("colours").onchange = selectColor;

function selectColor()
{ 
var color = document.getElementById('colours').value;
document.getElementById("text1").style.color = color;


}

＆＃13;

<h3 id="text1">Text Colour: </h3>
    <select id="colours">
      <option value="None"> 
      <option value="red"  >Red
      <option value="green">Green
      <option value="blue" >Blue
      <option value="pink" >Pink
    </select>

＆＃13;

Answer 3

您的代码有多个问题有些人在另一个答案中说。

1.关闭您的选项标签。

2.设置第一个选项禁用（它更好）

使用此

＆＃13;

function selectColor()
{ 
var color = document.getElementById('colours').value;
document.getElementById("text1").style.color = color;


}

＆＃13;

<h3 id="text1">Text Colour:</h3> 
    <select id="colours" onchange="selectColor()">
      <option value="None" disabled="disabled" >Select</option> 
      <option value="red"  >Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="pink">Pink</option>
    </select>

＆＃13;

Answer 4

见下面的例子。

您需要使用＆＃34; setAttribute＆＃34; ：）

＆＃13;

function selectColor()
{ 
var color = document.getElementById('colours').value;
document.getElementById("text1").setAttribute('style', 'color:'+color);

}

＆＃13;

<h3>Text Colour: 
    <select id="colours" onchange="selectColor();">
      <option value="None" > 
      <option value="red"  >Red
      <option value="green" ">Green
      <option value="blue" ">Blue
      <option value="pink" ">Pink
    </select>
  </h3>
   <span id="text1">Color selected!</span>

＆＃13;

javascript，使用下拉菜单选择文本颜色

4 个答案:

见下面的例子。