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）的直接交互进行写入，并将该函数绑定到一个按钮。

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

Answer 2

＆＃13;

var randomText = [];
randomText[0] = 'Text1';
randomText[1] = 'Text2';
randomText[2] = 'Text3';

var shuffleTitle = function() {
  var id = Math.round(Math.random() * (randomText.length - 1));
  document.getElementById('randTitle').innerHTML = randomText[id];
}

＆＃13;

#randTitle {
  background: none;
  border: none;
}

＆＃13;

<body onload="shuffleTitle()">
  <button id="randTitle" onclick="shuffleTitle()">Title</button>
</body>

＆＃13;

Answer 3

您需要添加具有特定ID的按钮类型的输入元素，而不是document.write(random[id])。然后，为该按钮创建一个单击处理程序，用于更改按钮的文本。

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)); 

var button = document.createElement("INPUT");
button.setAttribute("type", "button");
button.setAttribute("value", random[id]);
button.setAttribute("id", "MyButton");
document.body.appendChild(button);

button.onclick = function() { // Note this is a function
    id=Math.round(Math.random()*(random.length-1)); 
    button.setAttribute("value", random[id]);
};

Answer 4

你可以用这个

<button id = "button" onclick="changeText(this)">Click on this text!</button>

<script>
function changeText(ele) {
   var random=new Array(); 

   random[0]='Text1'; 
   random[1]='Text2'; 
   random[2]='Text3'; 
   var id=Math.round(Math.random()*(random.length-1));
   ele.innerHTML = random[id];
}(document.getElementById("button"));
</script>

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

4 个答案: