Javascript随机文本刷新和按钮

我有一个（我希望）简单的请求。我有一个脚本，每次刷新页面时都会在标题下选择随机文本。是否有可能编辑该脚本，使标题是一个按钮（透明背景），你可以按它来改变它下面的文本（但你仍然可以通过刷新页面来改变它）？
仅供参考，以下是代码。
Javascript随机文本刷新和按钮

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>

谢谢！

来源

2015-07-12 Dat Seby

所以你要呼叫脚本按钮并获得新的文本文本框，并希望与新的文本和旧的文本一起随机文本？ – MarsPeople

把代码到经由直接相互作用与元件（未文件撰写）写入一个函数，该函数绑定到一个按钮。

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

来源

2015-07-12 23:04:47

这一个很不错，我用CSS来改变按钮，它一切正常。如果我想更改随机文本颜色，我应该在哪里放置代码？ –

@DatSeby：使用'#target {color：whatever; }' –

不错！谢谢！尽管如此，仍然存在问题。如果我想在随机文本中使用逗号，它会输出一个空行。我怎样才能解决这个问题？ –

而不是做document.write(random[id])你需要添加一个输入元素的类型按钮与一个特定的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]); 
};

来源

2015-07-12 23:04:09 Bsa0

您可以使用此

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

来源

2015-07-12 23:06:36 user3980820

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]; 
 
}

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

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

来源

2015-07-12 23:14:31

这是一个很好的答案，您可以在页面底部添加JavaScript函数'shuffleTitle（）;'来处理刷新部分。 – iSkore

这不是我真正想要的，但它接近！我想要标题文本和按标题，我改变文字。通过此操作，按标题将导致文本中的标题更改。 –

Javascript随机文本刷新和按钮

回答

相关问题