J'ai essayé de changer la couleur du texte via l'option de sélection html. Je suppose que ça ne marche pas comme ça je l'ai fait. Je suis nouveau dans ce domaine, donc désolé à l'avance pour certaines erreurs de débutant. Voici le code.

<!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>
-1
Irfan 15 avril 2018 à 19:11

4 réponses

Meilleure réponse

Vous devez obtenir de la valeur en sélectionnant:

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("par").style.color = x;
}
</script>
2
Artem Mirchenko 15 avril 2018 à 16:14

Essayez ce qui suit

<!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>
2
Jay Velasco 15 avril 2018 à 16:16

Utilisez x.options[x.selectedIndex].value

function myFunction() {
  var x = document.getElementById("mySelect")
  var color = x.options[x.selectedIndex].value
  document.getElementById("par").style.color = color;
}
<!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>
1
vapurrmaid 15 avril 2018 à 16:16

changement dynamique

<!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>

Lors de l'envoi

<!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>
1
Joseph Briggs 15 avril 2018 à 16:28