JavaScript

backgroundElement.style.cssText = `background-position: ${randomX(positionXY)}% ${randomY(positionXY)}%;`

DSB Audio (David Sweeney-Bear) wrote:

1. what if the two random values are the same as the last two? the, the element would not appear to shift at all. I guess I'd need some kind of conditional setup for that

const backgroundElement = document.querySelector('.container');
const positionXY = [100, 25, 50, 75];
const currentPosition = { x: 0, y: 0 }; // TODO: Set your initial position

const randomPosition = (positions) => {
    const result = { };
    do {
        result.x = positions[Math.floor(Math.random() * positions.length)];
        resuly.y = positions[Math.floor(Math.random() * positions.length)];
    } while (result.x === currentPosition.x && result.y === currentPosition.y);
    
    return result;
};

const changePosition = (el, positions) => {
    const newPosition = randomPosition(positions);
    el.style.backgroundPosition = `${newPosition.x}% ${newPosition.y}%`;
    console.debug("New position", newPosition, el);
};

// Event delegation: https://javascript.info/event-delegation
document.addEventListener("click", e => {
    let a = e.target;
    if (a.tagName !== 'A') {
        a = e.target.closest("a");
        if (!a) { return; } // The click was not on an <a> element.
    }
    
    console.debug("Link clicked", a);
    changePosition(backgroundElement, positionXY);
});

DSB Audio (David Sweeney-Bear) wrote:

2. what if there are certain links on my page I do not want to trigger a background shift, what can I do to those links to make sure they are not included in the querySelectorAll Node List ?

document.addEventListener("click", e => {
    let a = e.target;
    if (a.tagName !== 'A') {
        a = e.target.closest("a");
        if (!a) { return; } // The click was not on an <a> element.
    }
    if (a.matches(".class-to-exclude")) {
        return; // The <a> element should be excluded.
    }
    
    console.debug("Link clicked", a);
    changePosition(backgroundElement, positionXY);
});

let backgroundElement = document.querySelector('.site-container');
    const positionXY = [16, 32, 48, 64, 80, 99, 66.6, 33.3, 1, 15, 30, 50, 75];
    let storedXY = sessionStorage.getItem('writeXY'); let lastXY = JSON.parse(storedXY);
if (storedXY == null) {
    let randomX = positionXY[Math.floor(Math.random() * positionXY.length)];
    let randomY = positionXY[Math.floor(Math.random() * positionXY.length)];
document.querySelector('.site-container').style.cssText = `background-position: ${randomX}% ${randomY}%; background-size: auto;`
    let randomXY = [randomX, randomY]
    sessionStorage.setItem('writeXY', JSON.stringify(randomXY));
}
else if (storedXY !== null) {
    let randomX = positionXY[Math.floor(Math.random() * positionXY.length)];
    let randomY = positionXY[Math.floor(Math.random() * positionXY.length)];
    let testX = Math.abs(randomX-lastXY[0]);
    let testY = Math.abs(randomY-lastXY[1]);
    let randomXY = [randomX, randomY]
    sessionStorage.setItem('writeXY', JSON.stringify(randomXY));
      while (testX < 16 || testY < 16) {
        randomX = positionXY[Math.floor(Math.random() * positionXY.length)];
        randomY = positionXY[Math.floor(Math.random() * positionXY.length)];
        testX = Math.abs(randomX-lastXY[0]);
        testY = Math.abs(randomY-lastXY[1]);
      }
document.querySelector('.site-container').style.cssText = `background-position: ${randomX}% ${randomY}%; background-size: auto;`
        randomXY = [randomX, randomY]
        sessionStorage.setItem('writeXY', JSON.stringify(randomXY));

DSB Audio (David Sweeney-Bear) wrote:

const positionXY = [100, 25, 50, 75];

const position = { left: 100, top: 25, right: 50, bottom: 75 };
// used as such
console.log(position.left);

const positions = [{ x: 100, y: 25}, { x: 50, y: 75 }];
// used as such
console.log(positions[0].x);

Member 15755181 wrote:

how do I do that?

const favoriteCities = function() {
    const output = document.getElementById("output");
    output.innerHTML = "";
    
    const input = document.getElementsByName("favoriteCities[]");
    for (let i = 0; i < input.length; i++) {
        const div = document.createElement("div");
        div.innerText = `City #${i + 1} is ${input[i].value}`;
        output.appendChild(div);
    }
};