Need help with a script... (my first!)

[Audiobabble]

I'm new to js and have been making my first attempt to cobble together a script to make a background element change position in random increments whenever a link on a web page (that I'm working on) is clicked:

const backgroundElement = document.querySelector('.container');
const positionXY = [100, 25, 50, 75];
  
function randomX(positionXY) { 
    return positionXY[Math.floor(Math.random() * positionXY.length)]
  }  
function randomY(positionXY) { 
    return positionXY[Math.floor(Math.random() * positionXY.length)]
  }
document.querySelectorAll("a").forEach(a =>
  a.addEventListener("click", () => {
 
    backgroundElement.style.cssText = `background-position: ${randomX}% ${randomY}%;`
  }
  )
)

This doesn't throw any errors in console, but it doesn't work either, all that happens is the background "blinks".

if I replace

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

with:

alert("x position:" + randomX(positionXY));
  alert("y position:" + randomY(positionXY));

it shows that the values are being generated OK... so I can only assume there's something wrong with the way I've defined the function to change the background-position value

Would appreciate some advice, thanks!

 

[Audiobabble]

Just to add... maybe the script is working but the event is wrongly defined - I want the background to change position and stay that way after click. It's possible it's changing position only WHILE a click is happening. I'll look into that...

 

[Audiobabble]

If you'd lie to take a look....

 

[Audiobabble]

I've pretty much solved this now...

two silly mistakes:

1. I didn't add the const to the function values in the background-position function - corrected thus:

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

2. As this is just a mock-up page for testing, I only put in <a href = "">, meaning the links don't lead anywhere - causing the page to be refreshed on click. Having given the links a target, all works well.

However... two further questions spring to mind:

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

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 ?

attached is working version.

 

[MeMate]

Its's style.backgroundPosition.

.style.cssText = `background-position: do not make any sence.

 

[Audiobabble]

Its's style.backgroundPosition.

.style.cssText = `background-position: do not make any sence.

I copy pasted that from somewhere!
Interestingly though, it does exist: https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/cssText
...and it does work: https://jsfiddle.net/k2xnwq80/1/

A few things I noticed -
it overwrites and removes any existing style attribute that's declared directly in the html, but not if it's in a stylesheet (or style tag presumably), so if you put style="background-color: blue;" in the hmtl, when the script executes, there will be no background color unless you re-declare it in the cssText statement
it's replacing the exact style text, so you can put multiple attributes separated by ;
it seems to only work with backticks `` not quotes or single quotes

seems like a pretty useful way to put multiple styles (which can include variables) into one statement.

 

[MeMate]

Of course it is.

something.style is nothing else than style="whatever is written in here"

Example:

<div id="test" style="color:red; background-color:black;">HELLO</div>
<button onclick="change();">Change</button>

<script>
function change(){
document.getElementById('test').style="background-color:#00FF00";
}
</script>

Test it and check what happens to color:red. It's gone because it has been overwritten completely. Only thing left is background-color:#00FF00;

BUT. You also may change just one style key like this:

<div id="test" style="color:red; background-color:black;">HELLO</div>
<button onclick="change();">Change</button>

<script>
function change(){
document.getElementById('test').style.backgroundColor="#00FF00";
}
</script>