Click here to Skip to main content
15,846,343 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: trying to get to grips with parsing from a JSON file Pin
jkirkerx14-Dec-22 13:25
professionaljkirkerx14-Dec-22 13:25 
QuestionSecond chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Earl Lembertas27-Sep-22 11:35
Earl Lembertas27-Sep-22 11:35 
AnswerRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Pete O'Hanlon27-Sep-22 21:46
subeditorPete O'Hanlon27-Sep-22 21:46 
GeneralRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Earl Lembertas28-Sep-22 1:00
Earl Lembertas28-Sep-22 1:00 
GeneralRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Pete O'Hanlon28-Sep-22 5:26
subeditorPete O'Hanlon28-Sep-22 5:26 
QuestionWhy doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)24-Sep-22 4:39
DSB Audio (David Sweeney-Bear)24-Sep-22 4:39 
AnswerRe: Why doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)24-Sep-22 8:43
DSB Audio (David Sweeney-Bear)24-Sep-22 8:43 
AnswerRe: Why doesn't this script work as expected? Pin
Richard Deeming25-Sep-22 22:42
mveRichard Deeming25-Sep-22 22:42 
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
If you want to reduce the randomness by preventing it from returning the same values twice in a row, you will indeed need to keep track of the previous values.
JavaScript
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 ?
You'll need to find some way to identify those links, and exclude them from the event. For example, by using a CSS class:
JavaScript
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);
});




"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

GeneralRe: Why doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 5:16
DSB Audio (David Sweeney-Bear)30-Sep-22 5:16 
GeneralRe: Why doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 5:31
DSB Audio (David Sweeney-Bear)30-Sep-22 5:31 
AnswerRe: Why doesn't this script work as expected? Pin
Jeremy Falcon26-Oct-22 12:36
professionalJeremy Falcon26-Oct-22 12:36 
QuestionCan sending a large number of requests to the server cause any performance issues on the server? Pin
Alex Wright 202221-Sep-22 9:33
Alex Wright 202221-Sep-22 9:33 
AnswerRe: Can sending a large number of requests to the server cause any performance issues on the server? Pin
Richard Deeming21-Sep-22 22:40
mveRichard Deeming21-Sep-22 22:40 
QuestionMultiple popup windows - information is the same in all of them Pin
BartekDD21-Sep-22 3:02
BartekDD21-Sep-22 3:02 
QuestionOne big collection or nested collections Pin
waldette 202214-Sep-22 12:35
waldette 202214-Sep-22 12:35 
AnswerRe: One big collection or nested collections Pin
Pete O'Hanlon14-Sep-22 21:54
subeditorPete O'Hanlon14-Sep-22 21:54 
GeneralRe: One big collection or nested collections Pin
waldette 202215-Sep-22 7:13
waldette 202215-Sep-22 7:13 
QuestionPinch zoom in zoom out in js Pin
madhuri jawadekar11-Sep-22 21:01
madhuri jawadekar11-Sep-22 21:01 
Questionhow to make campaign windows Pin
Member 157551811-Sep-22 21:22
Member 157551811-Sep-22 21:22 
AnswerRe: how to make campaign windows Pin
Richard MacCutchan1-Sep-22 23:02
mveRichard MacCutchan1-Sep-22 23:02 
AnswerRe: how to make campaign windows Pin
Dave Kreskowiak2-Sep-22 13:56
mveDave Kreskowiak2-Sep-22 13:56 
QuestionIs there a way to input a unique number for each array output? Pin
machinewraith31-Aug-22 16:46
machinewraith31-Aug-22 16:46 
AnswerRe: Is there a way to input a unique number for each array output? Pin
Richard Deeming1-Sep-22 23:23
mveRichard Deeming1-Sep-22 23:23 
Questionjavascript looping pattern question Pin
ravindra Yadav 202213-Aug-22 2:22
ravindra Yadav 202213-Aug-22 2:22 
AnswerRe: javascript looping pattern question Pin
Richard MacCutchan13-Aug-22 2:31
mveRichard MacCutchan13-Aug-22 2:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.