Question

我正在尝试为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”？

如何解决上述问题？

谢谢。

Answer 1

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

inputElement1和inputElement1是不是字符串的元素，因此将它们附加到html字符串不会产生所需的结果。你也永远不会将它们或html字符串添加到dom中，因此document.getElementById将无法找到它们。

Answer 2

是的，您应该使用inputElement1和inputElement2。

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

Answer 3

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

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>

在Javascript中创建动态CSS

3 个答案: