0

簡単なスクリプトを作成しようとしています。

これがアイデアです：

div 要素があり、div 内に動的に作成された段落要素があります。段落要素にテキストが含まれています。ページにもリンクを貼っています。リンクをクリックしたときに、テキストを別のテキスト (定義済み) に変更したい。2 つの関数があります。1 つは段落要素を作成し、それを div に追加する関数です。2 番目の機能は、テキストを変更するためのものです。この問題は、変数をある関数から別の関数に渡すことに関係していると思います

HTML は次のとおりです。

<a href='' onclick='changeText();return false;'>Change Text</a>

    <div id='box'></div>

そして、ここにJSコードがあります：

var x = document.getElementById('box');

        window.onload = function createEl(){

            var p = document.getElementsByTagName('div')[0];
            var el = document.createElement('p');

                var text = "Hello";
                p.appendChild(el);
                var res = document.createTextNode(text);
                el.appendChild(res);
}


function changeText(){

    text.innerHTML = 'other text';


}
4

1 に答える 1

0

あなたは正しく疑いました。ただし、スクリプトのどこが間違っていたのかを修正するのではなく (初歩的なミスをいくつか犯したため)、スクリプトを少し書き直して、それぞれの動作を説明しました。動作するはずのスクリプトのバージョンは次のとおりです。

// we define these variables outside of any functions
// this means they're global and any function can get
// access to them.
var box_div, el;

window.onload = function createEl() {
    // get references to div element
    box_div = document.getElementById('box');

    // create a new <p> element and store it in 'el'
    el = document.createElement('p');

    // add text to the new <p> element
    el.appendChild(document.createTextNode("Hello"));

    // append the new <p> element to the div
    box_div.appendChild(el);
}

function changeText() {
    // since we have a reference to the <p> element
    // already, we can just do this:
    el.innerHTML = 'other text';
}​
于 2012-05-10T13:35:38.420 に答える