Question

我正在尝试编写一个简单的脚本。

这是一个想法：

我有一个div元素并在div中动态创建段落元素。段落元素包含一些文本。我在页面上也有一个链接。我希望在单击链接时将文本更改为其他文本（预定义）。我有2个函数：一个用于创建段落元素并将其附加到div的函数。第二个功能是更改文本。我认为这个问题与将变量从一个函数传递给另一个函数

有关

这是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';


}

Answer 1

你怀疑是对的。然而，不是修复你的脚本中的错误（因为你犯了几个初学者的错误），我稍微重写了它并解释了每件事情的作用。这是一个应该有效的脚本版本：

// 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';
}

用javascript更改文本

1 个答案: