Question

我总是得到一个空的颜色对象。我大约一年没有触及过Dojo，所以一切都很生疏。 colorPallette显示，但是当我点击它时，下面的变量objColor始终为null。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojox.widget.ColorPicker");
            dojo.require("dijit.ColorPalette");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.Textarea");
            output = "Color=&Color,SoundFile=&SoundFile"; 
            function updateResults()
            {
               var objColorPalette = dijit.byId("colorPalette"); 
               var objColor = objColorPalette.value; 
               //var objColor = objColorPalette.attr("value"); 
               //alert("objColor=" + objColor);
               if (objColor == null)
               {
                  output = output.replace("&Color","null"); 
               }
               else
               {
                  output = output.replace("&Color",objColor.toHex()); 
               }
               var objResultTextArea = dijit.byId("results");
               objResultTextArea.set("value", output); 
            }
            function setColor(val)
            {
               output = output.replace("&Color",val.toHex()); 
               var objResultTextArea = dijit.byId("results");
               objResultTextArea.set("value", output); 
            }
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/ColorPicker/ColorPicker.css"
        />
    </head>

    <body class=" claro ">
        <h3>Begin Data Entry</h3>
        <label for="mp3FileName">
            Auto-trimming, Proper-casing Textbox:
        </label>        
        <input type="text" name="mp3FileName" value="/yourRelativeFileName.mp3" dojoType="dijit.form.TextBox"
        trim="true" id="firstname" propercase="true">

        <h3>Color</h3>
        <div dojoType="dijit.ColorPalette" onChange="updateResults()" palette="7x10" id="colorPalette">
        </div>
        <!--
        <h3>Color Picker</h3>
        <div dojoType="dojox.widget.ColorPicker" id="colorPicker">
        </div>
        -->

        <h3>Results</h3>
        <textarea id="results" name="results" dojoType="dijit.form.Textarea"
        style="width:900px;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
            nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </textarea>        
        <h3>The End</h3>

    </body>

</html>

Answer 1

首先，快速实现您想要的方法：将窗口小部件的onChange属性更改为updateResults（不带括号）。这意味着它被视为一个函数指针，并且该函数将使用ColorPalette决定提供的任何参数进行调用。

<div dojoType="dijit.ColorPalette" onChange="updateResults" 
     palette="7x10" id="colorPalette"></div>

其次，更改您的updateResults函数，使其接受参数。 ColorPalette将为其onChange事件提供一个字符串参数，其中包含所选颜色的十六进制值。

function updateResults(selectedColor)
{
    // Now you can remove a lot of the stuff that you had here, and simply do:
    var objResultTextArea = dijit.byId("results");
    objResultTextArea.set("value", output.replace("&Color", selectedColor)); 
}

现在已经没有了，为什么原来的方法不起作用？实际上，它确实如此。第二次选择颜色时，它会输入else子句，但它会在toHex上失败，因为objColor是一个字符串而不是Color对象。

但为什么第一次点击不起作用呢？原因似乎是在ColorPalette实际设置其内部“值”之前执行onChange函数。我猜测某个地方有一个setTimeout。因此objColorPalette.value在那时将为空（使用attr，或者更确切地说get是正确的方式btw;））。事件第二次触发时，该值实际上是先前选择的颜色，而不是新颜色（但是toHex当然仍会失败，因此结果字段中的文本将保持原样）。

希望这有帮助。

如何获取Dojo / Dijit ColorPalette的值到字符串

1 个答案: