5.3 – D.S. 4 – Implementing the Items

Development Step Four

Implementing the items

Now lets implement the 3 items, the dildo, the gun and the banana. Since we already have the sources loaded, we only need to create a function that can switch trough the items.

To set that up I created another variable called “currentItem” that will keep track of the current Item (Banana = 1, Dildo = 2, Gun = 3). Then I made three buttons because with the items you are supposed to individually click them instead of “scrolling through” them.
For each button I made a new function that looked like this for every object:

function Banana() {
if (currentGenre == 1){vid.src = src1;}
else if (currentGenre == 2){vid.src = src4;}
else if (currentGenre == 3){vid.src = src7;}
else if (currentGenre == 4){vid.src = src10;}
else if (currentGenre == 5){vid.src = src13;}
else if (currentGenre == 6){vid.src = src16;}

This should now, if the genre is 3 (horror) for example, switch to the horror clip with the banana, and same for all other genres and objects. But if we look at the outcome from this clip, we can spot a problem:

As we can see, both functions work on their own but when switching from genres to objects or the other way around they seem to reset or jump forward.. But we can also observe that, while the counter for the currentGenre variable is going from 1-6, the currentItem variable is always staying at 1.

Looking back at the code I actually found out that the problem is, that even while I am switching the video to different items, I am not changing anything with the variable. So all I had to change was adding “currentItem = 1;” (or 2 or 3) at the beginning of the function.

With that change, the genre button will now also keep the item saved, so when I switch the genre from action gun to comedy for example then it will keep the gun item.

But that is only one of the two problems. The other one is that when we click on the genre button after the items it will repeat the genre once, and when we click on the items it will jump one genre ahead.

Before diving straight into the code I actually sat down once more and tried to find the problem by just looking at the video and breaking it down.

  • When I play the videos, the cG (currentGenre) is at 1 and it plays Action (1).
  • Clicking the first time on the Genre button changes the video to the same Action (1) and cG stays at 1, even tho the first click should already jump to Comedy (2).
  • Switching at any point to another Item, keeps the cG variable but shows one Genre further.
  • If I then click on the Genre Button again it repeats the currentGenre.

The information that we can draw out of this is actually helpful and interesting. We already know that the problem lies somewhere in the variable currentGenre and maybe when its getting updated within the swapping Genre function.

Actually, after looking only at the first part of the function,

function sGenre() {
time = vid.currentTime;
statusElementG.innerText = currentGenre;
if (currentGenre == 1) {
if (currentItem == 1){vid.src = src1;}
else if (currentItem == 2){vid.src = src2;}
else if (currentItem == 3){vid.src = src3;}
currentGenre = 2;

I can see that the cG is getting written out before it changes so the value that we see on the website is always the old value, so what I did was removing the “statusElementG.innerText = currentGenre;” and put it at the end of the function so we then have the correct and updated cG.

Now we can see that even tho it is playing the Action, which is genre 1, the cG variable is already at 2 which means that changing an item now would also show the second genre. And to fix that I need to update the cG variable before it changes the genre.

So instead of putting the cG to one value further after every click, I now add + 1 to the variable as soon as the function gets called, but since we only have 6 genres, I added an if statement that sets the variable to 1 if it gets bigger than 6:

if (currentGenre > 6){
currentGenre = 1;

And this is the final result:


Looking back at the To Do for this week and the Development Step I made I am more than satisfied with my progress. I now have a perfectly functioning interaction, just as I wanted and needed it. The steps for the future will now probably be to go deeper into html and css to make my whole layout and make everything look dope.