Question

我尝试通过html select选项更改文本颜色。我想它不是这样我做的。我是新手，对于一些新手的错误提前抱歉。这是代码。

<!DOCTYPE html>
<html>
<body>

Select color:
<select id="mySelect">
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
</select>

<p>Click the button to change color of the text.</p>

<p id="par">Text color</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").selectedIndex;
    document.getElementById("par").style.color = x;
}
</script>

</body>
</html>

Answer 1

您需要从select中获取价值：

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("par").style.color = x;
}
</script>

Answer 2

尝试以下

<!DOCTYPE html>
<html>
<body>

Select color:
<select id="mySelect">
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
</select>

<p>Click the button to change color of the text.</p>

<p id="par">Text color</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value
    console.log(x)
    document.getElementById("par").style.color = x;
}
</script>

</body>
</html>

Answer 3

使用x.options[x.selectedIndex].value

＆＃13;

function myFunction() {
  var x = document.getElementById("mySelect")
  var color = x.options[x.selectedIndex].value
  document.getElementById("par").style.color = color;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>

  Select color:
  <select id="mySelect">
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
</select>

  <p>Click the button to change color of the text.</p>

  <p id="par">Text color</p>
  <button type="button" onclick="myFunction()">Try it</button>


</body>

</html>

＆＃13;

Answer 4

动态变化

<!DOCTYPE html>
<html>
  <body>
    Select color:

    <select id="mySelect" onChange="changeColor(value);">
      <option value="black">Black</option>
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      <option value="orange">Orange</option>
    </select>

    <p>Click the button to change color of the text.</p>

    <p id="par">Text color</p>
    <button type="button" onclick="myFunction()">Try it</button>

    <script>
    function changeColor(color) {
        var x = document.getElementById("mySelect").selectedIndex;
        document.getElementById("par").style.color = color;
    }
    </script>

  </body>
</html>

提交

<!DOCTYPE html>
<html>
  <body>
    Select color:

    <select id="mySelect">
      <option value="black">Black</option>
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      <option value="orange">Orange</option>
    </select>

    <p>Click the button to change color of the text.</p>

    <p id="par">Text color</p>
    <button type="button" onclick="changeColor()">Try it</button>

    <script>
    function changeColor() {
        var x = document.getElementById("mySelect").value
        document.getElementById("par").style.color = x;
    }
    </script>

  </body>
</html>

JavaScript - 更改文本颜色

4 个答案: