刷新和按钮上的 JavaScript 随机文本

Question

我有一个(我希望)简单的请求。我有一个脚本，每次刷新页面时都会在标题下选择随机文本。是否可以编辑该脚本，使标题成为一个按钮(具有透明背景)，并且您可以按它来更改其下方的文本(但您仍然可以通过刷新页面来更改它)？
作为引用，这是代码。

    Title<br> 
    <script type="text/javascript"><!-- 
    var random=new Array(); 

    random[0]='Text1'; 
    random[1]='Text2'; 
    random[2]='Text3'; 
var id=Math.round(Math.random()*(random.length-1)); document.write(random[id]); </script>

谢谢!

Answer 1

将代码放入通过与元素直接交互(而不是 document.write)进行写入的函数中，并将该函数绑定(bind)到按钮。

HTML:

<button onclick="newTitle()">Make new title</button>
<br />
<span id="target"></span>

JS:

var target = document.getElementById('target');
var titles = [
    'Title 1',
    'Title 2',
    'Title 3',
    'Title 4',
    'Title 5'
];

function newTitle () {
    var i = (Math.random() * titles.length) | 0;
    target.innerText = titles[i];
}

newTitle();

参见JSFiddle