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


Joined
Sep 24, 2022
Messages
5
Reaction score
0
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:

JavaScript:
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
Code:
    backgroundElement.style.cssText = `background-position: ${randomX}% ${randomY}%;`
with:
Code:
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! :)
 
Last edited:
Ad

Advertisements

Joined
Sep 24, 2022
Messages
5
Reaction score
0
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...
 
Joined
Sep 24, 2022
Messages
5
Reaction score
0
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:
Code:
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.
 

Attachments

  • scroll-bg2.zip
    42.6 KB · Views: 0
Joined
Sep 24, 2022
Messages
5
Reaction score
0
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.
 
Ad

Advertisements

Joined
Mar 11, 2022
Messages
225
Reaction score
29
Of course it is.

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

Example:
Code:
<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:

Code:
<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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top