0

我正在尝试从 javascript 编写一个 div 元素。我希望使用 document.write() 将行编写如下：

<div class="Square15px" onmouseover="changeColor('boxid')"></div>

我调用编写 div 元素的函数：

<script type="text/javascript">
      colorPicker("box1");
 </script>

我尝试了 document.write() 方法，以几种不同的方式构建字符串，例如：

function colorPicker(box) {
    var box = document.getElementById(box);
    var boxid = box.id;
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor("';
    var AquaStr2 = '")></div>';

    var AquaString = AquaStr1.concat(boxid, AquaStr2);
    document.writeln(AquaString);
}

我还尝试使用 + 作为 concat 运算符以多种不同的方式拆分字符串。字符串在 boxid 的末尾构建不正确。无论我如何编写代码块，我都会得到相同的结果：

<div class="AquaSquare15px" onmouseover="changeColor(" box1?)=""/>

我似乎在这里看不到我的错误，我已经查看了我能找到的所有帮助。除了引号和 box1 之间的空格外，一切都是正确的，直到出现神秘的问号。我查看了 IE9 开发人员工具 (F12) 的结果。我不是一个经验丰富的程序员，所以我怀疑我在某种程度上是错误的。

4

3 回答 3

0

正如评论部分指出的那样：你不应该使用document.write. 但是，您的字符串连接出错了。试试这个：

function colorPicker(box) {
    var boxid = document.getElementById(box).id;
    var aquaStr = '<div class="AquaSquare15px" onmouseover="changeColor(\''+boxid+'\')"></div>';

    document.writeln(aquaStr);
}
于 2013-04-25T19:22:13.420 回答
0

我想问题可能是引号。应该：

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
var AquaStr2 = '\')"></div>';

此外，您不应该用新的声明覆盖您的函数参数：

function colorPicker(box) {
    var box = document.getElementById(box);

而是使用另一个名称，例如

function colorPicker(boxid) {
    var box = document.getElementById(boxid);

话虽如此，通过 id 获取元素并在读取它之后读取它的 id 并没有多大意义：

var box = document.getElementById(box);
var boxid = box.id;

您已经将 ID 作为函数参数。

建议结果：

function colorPicker(boxid) {
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
    var AquaStr2 = '\')"></div>';

    var AquaString = AquaStr1.concat(boxid, AquaStr2);
    document.writeln(AquaString);
}

正如其他人已经建议的那样，您不应该使用document.write. 例如，使用 jQuery 会看起来像这样：

$('body').append(AquaString);

这是一个演示。

于 2013-04-25T19:17:12.880 回答
0

您在属性值中使用引号而没有对它们进行 HTML 编码。此外，您缺少属性值的结束引号，因此结束标记和其他一些代码将在属性内结束。

您可以转义引号：

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(&quot;';
var AquaStr2 = '&quot;)"></div>';

或者您可以改用撇号，但是您需要在字符串中转义它们：

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
var AquaStr2 = '\')"></div>';
于 2013-04-25T19:21:06.220 回答