Checkbox JavaScript function

Question

I have some JavaScript code which provides a random link from preselected links. It stores links you visited and doesn't provide you the link you already visited. When all links are visited it deletes its visited sites data.

// Store javascript object to localStorage
Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

// Get javascript object from localStorage
Storage.prototype.getObject = function(key) {
    return JSON.parse(this.getItem(key));
}

// Your URLs with default visited values
var urls = [
    { name: "somesite1", url: "http://somesite1.com", visited: false },
    { name: "somesite2", url: "http://somesite2.com", visited: false },
    { name: "somesite3", url: "http://somesite3.com", visited: false },
    { name: "somesite4", url: "http://somesite4.com", visited: false }
];

// If there's no urls object in localStorage, call setDefault method
if (!localStorage.getObject("urls")) {setDefault();}

// Check all link objects. If all are visited, return true, else return false
function checkVisited() {
    var counter = 0;
    var getUrls = localStorage.getObject("urls");
    for (var i = 0; i < getUrls.length; i++) {
        if (getUrls[i].visited) {counter++;}
    }
    return counter === getUrls.length;
}

// Set defaults values to localStorage
function setDefault() {
    localStorage.setObject("urls", urls);
}

// If all links are visited, set default values
// Then get random links until you find one
// that's not visited. When it's found, set it
// to visited in localStorage and redirect to it 
function goSomewhere() {
    if (checkVisited()) {setDefault();}
    var getUrls = localStorage.getObject("urls");
    var visited = true;
    while(visited) {
        var e = Math.floor(Math.random()*getUrls.length);
        if (!getUrls[e].visited) {
            visited = false;
            getUrls[e].visited = true;
            localStorage.setObject("urls", getUrls);
            window.location = getUrls[e].url;
        }
    }
}

<input class="start" type="button" onClick="goSomewhere(); return ;" alt="Submit" width="800" height="100"value="»» Bring Links ««"

What i want to do is add a checkbox to my html, if it's checked then another preselected links set that i'm going to create will be used. Otherwise it will use the same links.

You can use `onclick` property of check-box, please refer this [stackoverflow answer](https://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events) — Tyler Durden, Nov 08 '18 at 20:38

score 0 · Accepted Answer · answered Nov 09 '18 at 01:43

I spent way too long on this. It won't run here because StackOverflow blocks localStorage access, but you can see an example here: https://lab-etdiboscot.now.sh

Source code can be seen here:

It only stores an integer and uses bitwise flags to figure out which links have been seen and uses one array filter to get rid of the standard or alternate links and another filter to get rid of the viewed links. Then it chooses one link from the filtered list, shows it and updates the stored flags.

function displayLink() {
  const checked = document.querySelector('#alternate-links').checked;
  const linkEl = document.querySelector('#display-link');
  let links = [
    { id: 1, name: 'somesite1', type: 'std', url: 'http://somesite1.com' },
    { id: 2, name: 'somesite2', type: 'std', url: 'http://somesite2.com' },
    { id: 4, name: 'somesite3', type: 'std', url: 'http://somesite3.com' },
    { id: 8, name: 'somesite4', type: 'std', url: 'http://somesite4.com' },
    { id: 16, name: 'altsite1', type: 'alt', url: 'http://altsite1.com' },
    { id: 32, name: 'altsite2', type: 'alt', url: 'http://altsite2.com' },
    { id: 64, name: 'altsite3', type: 'alt', url: 'http://altsite3.com' },
    { id: 128, name: 'altsite4', type: 'alt', url: 'http://altsite4.com' }
  ];
  const storage = localStorage.getItem('visited');
  let flags = storage ? parseInt(storage) : 0;
  if ((flags & 15) === 15) // if the first 4 are all visited...
    flags -= 15;           // ...zero out the first 4 flags
  if ((flags & 240) === 240) // if the last 4 are all visited...
    flags -= 240;            // zero out the lat 4 flags

  // filter out the checked or unchecked and the visited links
  links = links.filter(link => checked ? link.type === 'alt' : link.type === 'std').filter(link => !(flags & link.id));

  // pick one
  const idx = Math.floor(Math.random() * links.length);
  const link = links[idx];

  localStorage.setItem('visited', (flags | link.id).toString()); // write the new flags out

  // update the link on the page
  linkEl.innerHTML = link.name;
  linkEl.href = link.url;
}

<button onclick="displayLink()">Display Link</button>
<input type="checkbox" id="alternate-links"> Show Alternate Links
<a id="display-link" href=""></a>

I made some changes. I deleted "update the link on the page" part to " window.location = link.url;" and the code isn't working properly now.(You can check it from my site "randomemes.com" and my script is "randomemes.com/scripts/rvscript.js" — Furkan Duyan, Nov 10 '18 at 19:54
By the way i have more than hundereds of links. How should i name the id's ? — Furkan Duyan, Nov 10 '18 at 20:18
Oh, yikes. You might need a different method of storing which ones were seen, then. I was using bit flags to save space but the ids would be 2^100 and that would not work. I'd probably stash the index of the viewed item in an array and save/read the array from localStorage. — Will, Nov 11 '18 at 17:37
Could you please show me how to do that because i dont realy know how to code javascript :D — Furkan Duyan, Nov 12 '18 at 16:59

Checkbox JavaScript function

1 Answers1