How to make a html page pick a random title on load?

Question

I'm new to web development and can't seem to find this specific task anywhere on this site, only things related to dynamic changes while using a page. Basically, I want the contents of the tag in my part of my html document to always be different when loading/refreshing the page; I want to store some kind of array of strings in JS, and have the page, upon loading the html, pick one of these strings to insert into the tag.

This will result in every time I refresh the page, the title on the tab is different, and will not change unless I refresh again.

Can anyone point me to how I might do this? Completely stuck, and out of ideas after my window.onload didn't work.

EDIT: I have tried this code based on what I found on this site, but the title didn't change; and I'm not sure why.

var titles = ['rainy skies == best', 'now with more bugs!', 'c > java'];

window.onload = function() {
    document.title = titles[(Math.random() * 10) % 2];
    $('meta[name="description"]').attr("content", 'My website!');
};

(This is then linked into the html page as per usual)

It's better to add that into your question along with the `PHP` tag. Also, you'd better show us what you have done so far so we can build on it, thanks. — ThS, Jul 15 '19 at 12:20
Ok. I have tried the following in JS to no avail. var titles = ['rainy skies == best', 'now with more bugs!', 'c > java']; window.onload = function() { document.title = titles[(Math.random() * 10) % 2]; $('meta[name="description"]').attr("content", 'My website!'); }; — Jenna, Jul 15 '19 at 12:20
You know this makes bookmarking/history and breadcrumbing confusing? — Progrock, Jul 15 '19 at 13:28

ichigolas · Accepted Answer · 2020-03-26T18:19:05.730

3

You can add a little piece of Javascript. It will be executed each time the page loads and can change the page title dynamically.

<script>
  var titles = ['asdf', 'qwer', 'uiop']
  var title = titles[Math.floor(Math.random() * titles.length)] // pick random item
  document.title = title
</script>

The usage of a backend language like PHP can solve the issue too, but this is much simpler.

edited Mar 26 '20 at 18:19

answered Jul 15 '19 at 12:21

ichigolas

7,595
27
50

1

but what if `JavaScript` is disabled on the client side ? – ThS Jul 15 '19 at 12:22
Hey, thank you. Can I ask why my code in the Q didn't end up working, yet used the same attribute on the document? Its ok if you don't know, I just want to know how to make my code better in future. – Jenna Jul 15 '19 at 12:23
@Jenna try running your code in the browser console and seeing what it returns: `(Math.random() * 10) % 2` outputs `float` numbers which aren't valid array indices. – user7290573 Jul 15 '19 at 12:26
`Math.floor` turns them into integers. – ichigolas Jul 15 '19 at 12:27
@nicooga yes, but `Math.floor` isn't used in OP's code. – user7290573 Jul 15 '19 at 12:28
Return a random number between 0 (inclusive) and 1 (exclusive) eg. so for example 0.7271866315023703 * 10 % 2 is a `float`. Array can't contains float numbers as indices – akio Jul 15 '19 at 12:29

waterloomatt · Answer 2 · 2019-07-15T12:56:45.507

2

Server-side example. Define a list of titles, pick a random one, and output it in the title attribute.

Get random item from array

PHP

<?php 
    $titles = ['title1', 'title2', 'title3']; 
?>

<html lang="">
    <head>
        <title><?php echo $titles[array_rand($titles)]; ?></title>
    </head>
    ...
</html>

edited Jul 15 '19 at 12:56

answered Jul 15 '19 at 12:31

waterloomatt

3,662
1
19
25

score 0 · Answer 3 · answered Jul 15 '19 at 12:23

You should use document.title to change the title in the tab of the website.

const strings = ["bar", "foo", "banana", "apple", "orange", "red", "green", "blue", "brown", "gray"];

window.onload = () => {
  let random = Math.floor(Math.random() * strings.length);
  
  // example with a div
  document.getElementById("my-span").innerHTML = strings[random];
  
  // example with page title
  // document.title = strings[random];
};

<span id="my-span"></span>

Heather Olcot · Answer 4 · 2019-07-15T12:39:45.747

0

HTML:

<head>
    <title id="title"></title>
</head>

Javascript:

window.onload = function() {
    var titles = ['rainy skies == best', 'now with more bugs!', 'c > java'];
    var random = Math.floor(Math.random() * titles.length);
    var titleElement = document.getElementById('title')
    titleElement.innerHTML = titles[random];
}

EDIT: innerHTML instead of html

edited Jul 15 '19 at 12:39

answered Jul 15 '19 at 12:30

Heather Olcot

3
2

How to make a html page pick a random title on load?

4 Answers4