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;**

このエラーは、最後の 2 行の間に表示されます。タグ 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>

(ちなみに、スタイル文字列には class と波括弧が含まれているため、このように使用すると無効になります。これは、実際に を作成することを意味します<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

はい、代わりに and を使用する必要がinputElement1ありinputElement2ます。

document.getElementById() は、ドキュメント内の ID を持つ要素を取得します。ドキュメントは今までありませんでした。レンダリングされた場合のみです。

于 2012-10-05T05:46:32.697 に答える