How do I program a "Random button" on my Blogger site?

小能豆

How do I program a "Random button" on my Blogger site?

javascript

I want to add a button/link that redirects the user to a randomly chosen post on my Blogger site. I plan for the button to be one of the links in the page list at the top of my Blogger site and have it redirect the user to a random page with each click.

I’ve added an “HTML/JavaScript” gadget in the footer on my site and tried figuring things out from there. Unfortunately, nothing I’ve done has brought me success with this idea yet. I’ve tried having it so that when the site is loaded, the link gets a randomly chosen URL that redirects to a post on my website, however, it only picks the recent posts and not the older ones. I plan for this random link to randomly pick out of all of my posts, not just the newer ones.

Here is the code for the page list (the URLs I censored):

{
"link0":{"href":"http://###/","position":0,"title":"Home"},
"1442808221004497204":{"href":"https://###","position":1,"title":"About"},
"2724719100104741041":{"href":"https://###","position":2,"title":"Contact"},
"link1":{"href":"javascript:randomPost()","position":3,"title":"Random"}
}

And here is the code for the HTML/JavaScript gadget:

<script>
function randomPost() {
  // Get all post URLs on the page
  var postLinks = document.querySelectorAll('.post-title a');

  // Generate a random index
  var randomIndex = Math.floor(Math.random() * postLinks.length);

  // Get the URL of the randomly chosen post
  var randomPostUrl = postLinks[randomIndex].getAttribute('href');

  // Redirect to the random post
  window.location.href = randomPostUrl;
}
</script>

阅读 75

2023-12-21

共1个答案

小能豆

Your approach is on the right track, but it seems like the selector you’re using to get post links might not be matching all the posts, especially the older ones. Additionally, the structure of your page list might not be suitable for randomly selecting a post.

Here’s an alternative approach:

Modify Your Page List: Update your page list to include a class or attribute that marks the elements representing posts. For example, add a class like post-link to the relevant links:

{ "link0": {"href": "http://###/", "position": 0, "title": "Home"}, "1442808221004497204": {"href": "https://###", "position": 1, "title": "About"}, "2724719100104741041": {"href": "https://###", "position": 2, "title": "Contact"}, "link1": {"href": "javascript:randomPost()", "position": 3, "title": "Random"}, "post1": {"href": "https://###/post1", "position": 4, "title": "Post 1", "class": "post-link"}, "post2": {"href": "https://###/post2", "position": 5, "title": "Post 2", "class": "post-link"}, // Add more post entries as needed }

Update JavaScript Code: Modify your JavaScript code to use the class or attribute you added to identify post links:

```

```

Make sure to replace "https://###/post1", "https://###/post2", etc., with the actual URLs of your posts.

This modification assumes that your page list contains entries with the class post-link for each post. Adjust the class or attribute based on your actual HTML structure. The key is to identify the elements representing your posts explicitly.

2023-12-21