1

我正在尝试为 Google 地图创建一个信息窗口，并且需要生成一个动态表单来显示信息。

以下脚本会生成一个名为"No_found_err: DOM exception 8"的错误：

//create objects for HTML elements              
var inputElement1 = document.createElement("input");
var inputElement2 = document.createElement("input");

//assign different attributes to the element
inputElement1.setAttribute("type", "text");
inputElement1.setAttribute("id", "poiName");
inputElement2.setAttribute("type", "textarea");
inputElement2.setAttribute("id", "poiDesc");

//create style tag, atrributes and values
//add css style to head tag and define classname for HTML "desctag" element
var cssNode = document.createElement("style");
cssNode.setAttribute("type", "text/css");
cssNode.style.cssText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

document.getElementsByTagName("head")[0].appendChild("cssNode");
document.getElementById("poiDesc").className = "cssClass";

var formString = "<b>Enter location details:</b>
<p>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
"&nbsp;&nbsp;&nbsp;" + inputElement1 + "<br>Description:&nbsp;&nbsp;" + inputElement2 +
"<p><center>" + "<input type='button' id='saveBtn' value='Save' onclick='savePOI()'>  
</center>";

//insert values into the form elements      
document.getElementById("poiName").value = locList[i].name;
**document.getElementById("poiDesc").value = locList[i].desc;**

此错误出现在最后两行之间。这是否意味着尚未创建标签 ID“poiName”和/或“poiDesc”？

我该如何解决上述问题？

谢谢你。

4

3 回答 3

1

document.getElementsByTagName("head")[0].appendChild("cssNode");应该document.getElementsByTagName("head")[0].appendChild(cssNode);注意cssNode没有引用，您传递了一个字符串来附加 Child 而不是节点。

inputElement1并且inputElement1是元素不是字符串，因此将它们附加到 html 字符串不会给出所需的结果。此外，您永远不会将它们或 html 字符串添加到 dom，因此 document.getElementById无法找到它们。

于 2012-10-05T05:46:57.080 回答
0

除了其他答案之外，此代码需要更改为：

cssNode.style.cssText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

至：

cssNode.innerText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

您的代码正在执行与此等效的操作：

<style type='text/css' style='.cssClass {vertical-align: text-top; width: 250px; height: 150px }'></style>

（顺便说一句，由于样式字符串包含类和大括号，这样使用是无效的。这意味着你实际创建了<style type='text/css'></style>）

虽然我认为这是您的意图（为清楚起见添加了格式）

<style>
  .cssClass 
  { 
    vertical-align: text-top;
    width: 250px;
    height: 150px;
  }
</style>

这是（a）动态创建样式元素（b）动态修改css（c）从列表中的项目中提取信息的完整示例。

享受。:)

<!DOCTYPE html>
<html>
<head>
<style>
label
{
    width: 75px;
    display: inline-block;
}
</style>
<script>
var locList = [ {name:'Australia', desc:'pop. 22,620,600', col:'green', bg:'yellow'}, {name:'New Zealand', desc:'pop. 4,405,200', col:'white', bg:'black'} ];
function byId(e){return document.getElementById(e);}

var dynamicCSS;

function selChange(element)
{
    var arrayIndex = element.value;
    if (arrayIndex != -1)
    {
        byId('poiName').value = locList[arrayIndex].name;
        byId('poiDesc').value = locList[arrayIndex].desc;

        var styleStr = "#poiName,#poiDesc{color: " + locList[arrayIndex].col + "; background-color: " + locList[arrayIndex].bg + "; }";
        dynamicCSS.innerHTML = styleStr;
    }
    else
    {
        byId('poiName').value = byId('poiDesc').value = 'No option selected';
        dynamicCSS.innerHTML = '';
    }
}

function myInit()
{
    var st = document.createElement('style');
    st.innerHTML = '#poiName, #poiDesc{border:solid 2px green;}';
    document.body.appendChild(st);

    dynamicCSS = document.createElement('style');
    document.body.appendChild(dynamicCSS);
}
</script>
</head>
<body onload='myInit();'>
    <form id='myform'>
        <label for='optSel'>Option:</label>
        <select id='optSel' onchange='selChange(this);'>
            <option value='-1'>None selected</option>
            <option value='0'>Aus</option>
            <option value='1'>NZ</option>
        </select>
        <br>
        <label for='poiName'>Name</label><input id='poiName'/>
        <br>
        <label for='poiDesc'>Desc</label><input id='poiDesc'/>
    </form>
</body>
</html>
于 2012-10-05T06:35:01.107 回答
0

是的，您应该使用inputElement1and inputElement2。

document.getElementById() 获取文档中具有 id 的元素。该文件直到现在还没有它。它只会在渲染时。

于 2012-10-05T05:46:32.697 回答