I have a Jinja tag that returns some database data. I added some javascript that works on some divs inside the for tag. The javascript code applies only on the first div.
I am using fullPage.js in order to make full page scroll.
How can I solve this?
html:
JavaScript
x
33
33
1
<div id="fullpage">
2
<div class="vertical-scrolling">
3
<h1 style="color: #fff;
4
text-align: center;
5
font-size: 10vw;">Would You Rather</h1>
6
<h2 style="text-align:center">Scroll down</h2>
7
</div>
8
9
10
{% for wyr in wyr %}
11
<div class="vertical-scrolling">
12
13
<div>
14
<h1 style="text-align:center; color:white;">{{ wyr.title }}</h1>
15
<br>
16
17
<h3 ><a href="/feed" style="text-decoration:none; color:black"><-Go back home</a></h3>
18
19
<br><br><br><br><br>
20
21
22
<div onclick = "f1()" id="o" style="padding-top:5%; padding-bottom:5%; text-align:center; background:red; color:white;height:10%">
23
<h2 ><a>{{ wyr.option1 }}</a></h2>
24
</div>
25
<h2 style="text-align:center; background-color:white">or</h2>
26
<div onclick = "f2()" id="o2" style=" padding-top:5%; padding-bottom:5%;text-decoration:none;text-align:center; background:blue; color:white;">
27
<label><h2 >{{ wyr.option2 }}</h2></label>
28
</div>
29
</div>
30
</div>
31
32
{% endfor %}
33
js:
JavaScript
1
18
18
1
new fullpage("#fullpage", {
2
sectionsColor: ['#ffb224', '#0798ec'],
3
sectionSelector: '.vertical-scrolling',
4
navigation: true,
5
parallax: true,
6
});
7
var o = document.getElementById("o")
8
var o2 = document.getElementById("o2")
9
function f1() {
10
o.style["background-color"] = "#978480";
11
o2.style["background-color"] = "blue";
12
}
13
function f2() {
14
o2.style["background-color"] = "#978480";
15
o.style["background-color"] = "red";
16
17
}
18
Here is the css for fullPage.js:
JavaScript
1
10
10
1
* {
2
padding: 0;
3
margin: 0px;
4
font-family: 'Josefin Sans', sans-serif;
5
}
6
7
div#fp-nav a span {
8
background: #fff !important;
9
}
10
I am a begginer and I find it easier to use inline css. Thanks for any help!
Advertisement
Answer
That js is hitting the id=’o2′ and being done with it, without unique id’s it won’t reach those next divs, you could fix this by making the id=”o2{{i}} where i is the increment of that wyr loop and add logic to the rest of your code.