6

色の入力タイプを使用した選択に基づいて h1 要素の色を変更しようとしていますが、うまくいかないようです。色変数をアラートに出力しようとしましたが、未定義のみが返されます。

 $(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>
4

6 に答える 6

13

jQueryのドキュメントvar color = $("#colorChoice").val();を見る

onClick イベントの代わりに onChange イベントにコールバックをバインドすることもできます。

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

作業サンプル

于 2012-10-31T08:33:38.850 に答える
6

これには Jquery を使用しないでください。バニラJSは問題なく動作します

document.getElementById("colorChoice").value;
于 2015-02-14T04:13:46.153 に答える