admin管理员组

文章数量:1180511

I am trying to change the color of an h1 element based on a selection using the color input type, but i cant seem to get it to work. I've tried outputting the color variable to an alert and it only returns undefined.

 $(function(){

        $("#changeColor").click(function(){

          var color =  $("#colorChoice").value

          $("h1").css("color" + '"' + color + "'")


        });



    });


    </script>


</head>
  <html>
  <body>

  <h1>This is the default text</h1>
  <form>
  <fieldset>
      <select id="changeFont">
        <option>Arial</option>
        <option>Georgia</option>
        <option>Helevtica</option>
    </select>
    <input type="color" id="colorChoice">
    <button id="changeColor" class="btn-primary pull-right">Change</button>
</fieldset>
</form>

I am trying to change the color of an h1 element based on a selection using the color input type, but i cant seem to get it to work. I've tried outputting the color variable to an alert and it only returns undefined.

 $(function(){

        $("#changeColor").click(function(){

          var color =  $("#colorChoice").value

          $("h1").css("color" + '"' + color + "'")


        });



    });


    </script>


</head>
  <html>
  <body>

  <h1>This is the default text</h1>
  <form>
  <fieldset>
      <select id="changeFont">
        <option>Arial</option>
        <option>Georgia</option>
        <option>Helevtica</option>
    </select>
    <input type="color" id="colorChoice">
    <button id="changeColor" class="btn-primary pull-right">Change</button>
</fieldset>
</form>
  • javascript
  • jquery
Share Improve this question asked Oct 31, 2012 at 8:28 Alex HillAlex Hill 7111 gold badge5 silver badges13 bronze badges
Add a comment  | 

6 Answers 6

Reset to default 13

Try var color = $("#colorChoice").val(); See jQuery docs

You might as well bind your callback on the onChange event instead of the onClick event: 

$("#colorChoice").change(function(){
  $("h1").css('background', $(this).val());
});

Working sample

Don't use Jquery for this. vanillaJS works just fine

document.getElementById("colorChoice").value;

Your syntax is incorrect.

JavaScript:

var color = document.getElementById("colorChoice").value;

jQuery:

var color =  $("#colorChoice").val();

I recommend using vanilla JS as it is faster than jQuery.

Try this using vanilla JavaScript.

function changeColor(){
    document.getElementById("colorChoice").addEventListener('change', (e) => {
        let color = e.target.value;
        document.getElementById('bgColor').style.backgroundColor = color; 
    });
};

changeColor();

Don't forget to add those ids to your HTML. In my case, I'm using #bgColor for the div and #colorChoice for the color picket input.

try this:

document.getElementById("colorChoice").addEventListener('change', (e) => {

color = e.target.value;

})

If you don't specify the value attribute of the color input type tag it will not grab the color using javascript

First: Keep the value attribute with any color hex value.

<input type="color" value="#858585" id="colorChoice">

Second: Use jQuery property value. for example,

$('#colorChoice').on('change', function() {
    var newbgcolor = this.value;
    $('#playground').css('background', newbgcolor);
});

本文标签： javascriptHow to get a value from HTML5 color pickerStack Overflow

版权声明：本文标题：javascript - How to get a value from HTML5 color picker - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738189505a2067867.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。