0

我正在尝试创建一个包含标题的 html 页面，当我们单击标题时，它会在其下方生成单词。但我拥有的代码仅适用于第一次点击，它也删除了标题。所以我的问题是，我怎样才能让它在标题下生成单词而不删除它？

<!DOCTYPE html>
<html>
<head>
    <title>function JavaScript</title>
    <script>
    var k = 0;
    function bla(){
        var ph = ["red ","blue","black","green","yellow"];
        if(k <= ph.length ){
            document.write(ph[k]);
            k++;
        }
    }
    </script>
</head>
<body>
  <h1 onclick="bla();">Click here</h1>
</body>
</html>
4

2 回答 2

1

在页面加载完成后运行的任何document.write语句都将创建一个新页面并覆盖当前页面的所有内容。这几乎肯定不是您打算发生的事情。因此，您应该避免document.write在这种情况下使用

所以尝试添加一个元素，然后像这样写入它们

<h1 onclick="bla();">Click here</h1>
<span id="test"></span>

JS：

 if(k <= ph.length ){
        //document.write(ph[k]);
         document.getElementById("test").innerText+=" "+ ph[k];;
        k++;
      }

JS 小提琴示例

于 2013-04-07T20:47:58.040 回答
1

这可能是您需要的：

var k = 0;

function bla() {
    var ph = ["red", "blue", "black", "green", "yellow"];

    if (k < ph.length) {
        var p = document.createElement('p');
        p.innerHTML = ph[k];
        document.body.appendChild(p);
        k++;
    }
}

http://jsfiddle.net/p5rLX/

它将每个单词写入自己的段落。

于 2013-04-07T20:49:57.283 回答