Javascript 无法在html中使用jQuery中定义的变量

我希望使用document.write打印变量“value”。每次从下拉列表中选择颜色时写入

<script type="text/javascript">
    var value = 'xyz';

             $(document).ready(function(){ 
                  $('#button1').click(function(){ 
                    value = $('#combo').val();
                  alert (value);

                    });
        }); 

    </script>
<select id  = "combo">
    <option>White</option>
    <option>Yellow</option>
    <option>Fuchisa</option>
    <option>Red</option>
    <option>Silver</option>
    <option>Gray</option>
    <option>Olive</option>
</select>
<input id="button1" type="button" value="Click!" />
<p><script type="text/javascript"> document.write(value) </script></p>

---

Eek-不要使用document.write

---

当从下拉列表中选择颜色时，为什么您认为当前代码会执行任何操作？提示：没有。返回并阅读API文档：。另外，您应该重新考虑使用document.write，因为它在关闭文档后调用时会替换DOM的内容。实际上，我正在尝试构建一个图表，它的颜色会根据用户选择而改变。我需要将选择项作为参数传递，以设置颜色函数。实际上，我正在尝试创建一个图表，该图表的颜色会根据用户的选择进行更改。我需要将选择项作为参数传递以设置颜色，但它不接受新值。您不能使用document.write来完成所需的操作。尝试一下赫尔曼先生建议的这个想法——它会让你到达你需要的地方。

$('#button1').click(function() {
    value = $('#combo').val();
    $('p').html(value);
});