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隨機文本刷新和按鈕

回答

相關問題