javascript - 调用 Javascript 函数后出现 HTML 和 CSS 中断

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

像这样的东西会起作用。如果将它添加到 saying 元素的 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/