Question

我正在尝试创建一个包含标题的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>

Answer 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 Fiddle Example

Answer 2

这可能是您所需要的：

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/

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

如何生成单词onclick？

2 个答案: