Question

我有一些javascript随机从数组中选择一个项目并将其打印到屏幕上。当用户点击按钮并且项目被打印到屏幕时，应该触发javascript。我已经能够通过在页面加载时触发它以及按下按钮时触发功能，整个页面重新加载并且新项目被打印到屏幕上。

但目标是当用户点击按钮并将项目打印到屏幕时触发javascript。然后，每次在屏幕上打印新项目时，用户都可以重复点击按钮

现在正在发生的事情是当按下按钮时javascript被触发但页面的html和css似乎中断。该项目打印到空白页面，触发javascript的按钮消失（页面的任何样式也是如此），因此用户无法再次单击它并打印新项目。

我不确定发生了什么，或者如何修复它。这是我正在使用的javascript无效。

<div id="saying">
<script>
    function someFunc() {
        var choices = ["item1", "item2", "item3", "item4", "item5"];
        var pick_choice = choices[Math.floor(Math.random() * choices.length)];
        var post_choice = pick_choice
        document.write(post_choice)
    }
</script>
</div>

<input type="button" name="button" value="button" id="button" onclick="someFunc()";>

Answer 1

是的，关闭文档上的document.write会重新打开文档进行编写，清除整个文档。不要使用document.write。相反，你可以操纵DOM;这是一个向身体添加<div>元素的示例：

function someFunc() {
    var choices = ["item1", "item2", "item3", "item4", "item5"];
    var pickChoice = choices[Math.floor(Math.random() * choices.length)];

    // Create a new DOM element
    var itemContainer = document.createElement("div");

    // Create a new DOM text node
    var itemText = document.createTextNode(pickChoice);

    // Add the text node to the created element
    itemContainer.appendChild(itemText);

    // Add the created element to the body
    document.body.appendChild(itemContainer);
}

在现代浏览器中，您还可以通过分配元素的appendChild(createTextNode())属性来保存textContent步骤。

Answer 2

这样的事情会起作用。如果你把它添加到说元素的innerHTML上。

<强> HTML

<input type="button" name="button" value="button" id="button" onclick="someFunc()";>
<div id="saying"></div>

<强> JS

var saying = document.getElementById( 'saying' );

function someFunc() {
  var choices = ["item1", "item2", "item3", "item4", "item5"];
  var pick_choice = choices[Math.floor(Math.random() * choices.length)];
  var post_choice = pick_choice;
  saying.innerHTML += post_choice + '<br>';
}

在此演示：http://jsfiddle.net/kdDY5/

在调用Javascript函数后，它会出现HTML和CSS中断

2 个答案: