JavaScript Noob tries cookies and video/audio

KittenKatja · Sep 4, 2022

It's been a while since I was last to Code Forum, mostly gone because I got ghosted.

I got a local HTML file, where I want to set a cookie, which sets the last selected video as the background, so I don't always have to navigate to that button every time I reload it.
I already coded that part, but it just doesn't work.
Furthermore, I also want to make a button turn on/off the sound of the background video, and a range-type input to control the volume, but everything I found so far on the web is either calling something I don't understand, and it isn't elaborated further what it does, it just gets titled as the function that adds something to the video/audio controls, but copying the code does nothing for me, or it references the basic building blocks that also don't work and aren't elaborated on how to use them.

There's also another iframe where I open audio files, unrelated to the background, and I can't style them so that only the control's part of the audio shows, and I'd like to have them already set to loop, too.

Antero360 · Sep 4, 2022

KittenKatja said:
It's been a while since I was last to Code Forum, mostly gone because I got ghosted.

I got a local HTML file, where I want to set a cookie, which sets the last selected video as the background, so I don't always have to navigate to that button every time I reload it.
I already coded that part, but it just doesn't work.
Furthermore, I also want to make a button turn on/off the sound of the background video, and a range-type input to control the volume, but everything I found so far on the web is either calling something I don't understand, and it isn't elaborated further what it does, it just gets titled as the function that adds something to the video/audio controls, but copying the code does nothing for me, or it references the basic building blocks that also don't work and aren't elaborated on how to use them.

There's also another iframe where I open audio files, unrelated to the background, and I can't style them so that only the control's part of the audio shows, and I'd like to have them already set to loop, too.

Hi there,

First off, I would like to apologize on behalf of Code Forum for your past experience. The staff tries to get to everyone's questions as soon as we are able to. Sometimes, if we are not able to, someone else from the community might get to it. However, when someone does not respond to your particular question, it doesn't necessarily mean you were ghosted. It could just be that no one had a way to properly help you out with your particular issue, or that your post may have gotten pushed down the queue by others' posts. Best advice I can provide you, is if you see that there is no response to your post for a few days, feel free to repost.

As for your question...is there a way for you to post up the relevant code? It would definitely help your post get faster responses if we saw some code that we could attempt to debug and see where your mistakes are

KittenKatja · Sep 5, 2022


function loadSetup() {setBackground(getCookie("background"))}
function displayMedia() {document.getElementById("media").style.display="block";}
function setMedia(url) {document.getElementById("media").src=url;document.getElementById("media").style.display="block";}
function setBackground(url) {document.getElementById("background").src=url;document.getElementById('background_blur').src=url;setCookie("background", url, 3);setSelected()}
function randInt(min, max) {return Math.floor(Math.random() * (max - min)) + min;}
function setCookie(cname, cvalue, exdays) {const d = new Date();d.setTime(d.getTime() + (exdays*24*60*60*1000));let expire = "expires="+ d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expire + ";path=/";}
function getCookie(cname) {let n = cname + "=";let dc = decodeURIComponent(document.cookie);let ca = dc.split(';');for(let i = 0; i <ca.length; i++) {let c = ca[i];while (c.charAt(0) == ' ') {c = c.substring(i);} if (c.indexOf(n) == 0) {return c.substring(n.length, c.length);}} return "";}
function setSelected() {document.getElementsByClassName("active").classList.remove("active-bg");this.classList.add("active-bg")}

<html>
<body onload="loadSetup()">
<video id="background_blur" style="position: fixed;transform: translate(-50%,-50%);left: 50%;top: 50%;height: auto;width: 100%;filter: blur(20px)"></video>
<video id="background" style="position: fixed;transform: translate(-50%,-50%);left: 50%;top: 50%;height: 100%;width: auto;"></video>
<div id="window" style="width: fit-content;height: fit-content;max-height: 959px;display: flex;flex-direction: row;gap: 10px;justify-content: space-between;position: fixed;overflow-y: scroll;top: 5px;left: 5px;">
<span>Sound: <input type="range"></input><button onclick="toggleSound()">Mute</button></span><!--toggleSound() doesn't exist right now-->
<a onclick="setBackground('file:///[...]')">[...]</a>
<a href="file:///[...]" target="media" onclick="displayMedia()" title="I probably wanted to do an href to onclick jump here, but probably forgot about it">[...]</a>
<span><select><option id="option1">1</option><option id="option2">2</option></select><input type="text" id="thattextfield" style="width: 30px;"></input><button id="randomizer" onclick="document.getElementById('thattextfield').innerHTML(randInt(1,100))">Random</button><button>OK</button></span>
</div>
</body>
</html>

I just noticed the other unfinished building I forgot to mention as well; that one span at the bottom that has select, text input, and ok - I don't know how to address these and get the information into JS

Antero360 · Sep 5, 2022

KittenKatja said:
function loadSetup() {setBackground(getCookie("background"))} function displayMedia() {document.getElementById("media").style.display="block";} function setMedia(url) {document.getElementById("media").src=url;document.getElementById("media").style.display="block";} function setBackground(url) {document.getElementById("background").src=url;document.getElementById('background_blur').src=url;setCookie("background", url, 3);setSelected()} function randInt(min, max) {return Math.floor(Math.random() * (max - min)) + min;} function setCookie(cname, cvalue, exdays) {const d = new Date();d.setTime(d.getTime() + (exdays*24*60*60*1000));let expire = "expires="+ d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expire + ";path=/";} function getCookie(cname) {let n = cname + "=";let dc = decodeURIComponent(document.cookie);let ca = dc.split(';');for(let i = 0; i <ca.length; i++) {let c = ca[i];while (c.charAt(0) == ' ') {c = c.substring(i);} if (c.indexOf(n) == 0) {return c.substring(n.length, c.length);}} return "";} function setSelected() {document.getElementsByClassName("active").classList.remove("active-bg");this.classList.add("active-bg")}

<html> <body onload="loadSetup()"> <video id="background_blur" style="position: fixed;transform: translate(-50%,-50%);left: 50%;top: 50%;height: auto;width: 100%;filter: blur(20px)"></video> <video id="background" style="position: fixed;transform: translate(-50%,-50%);left: 50%;top: 50%;height: 100%;width: auto;"></video> <div id="window" style="width: fit-content;height: fit-content;max-height: 959px;display: flex;flex-direction: row;gap: 10px;justify-content: space-between;position: fixed;overflow-y: scroll;top: 5px;left: 5px;"> <span>Sound: <input type="range"></input><button onclick="toggleSound()">Mute</button></span> <a onclick="setBackground('file:///[...]')">[...]</a> <a href="file:///[...]" target="media" onclick="displayMedia()" title="I probably wanted to do an href to onclick jump here, but probably forgot about it">[...]</a> <span><select><option id="option1">1</option><option id="option2">2</option></select><input type="text" id="thattextfield" style="width: 30px;"></input><button id="randomizer" onclick="document.getElementById('thattextfield').innerHTML(randInt(1,100))">Random</button><button>OK</button></span> </div> </body> </html>

I just noticed the other unfinished building I forgot to mention as well; that one span at the bottom that has select, text input, and ok - I don't know how to address these and get the information into JS

To get the value of the dropdown's selected value:

Code:

document.getElementById('selectId').value

might want to add an id attribute to that select

make your life a hell of a lot easier

Antero360 · Sep 5, 2022

As far as getting the rest of the variables on click... you can just grab them in your js file/script. Rather than to pass them along as parameters in your function call inside the onclick event

KittenKatja · Sep 5, 2022

Is this just how Code Forum works? Decide on one subject the topic has put as an array of questions and lead the whole conversation only on that one aspect for the entire topic? Do I really need to put every question, I have, each into their own thread? For some reason, I can't end sentences without a question mark. :laugh:

Can you elaborate on the value method, for example, what value do I get? Or do I need to use switch()?
What about the video/audio controls or the cookie problems?
I also forgot another problem I have with the blur backdrop of the background going unsynced after a while when the background video is giving the backdrop only 1/5 of the visible area. I thought of a canvas, or to start the blur video every time background did a loop, but I don't know how to do any of that.

Antero360 · Sep 6, 2022

KittenKatja said:
Is this just how Code Forum works? Decide on one subject the topic has put as an array of questions and lead the whole conversation only on that one aspect for the entire topic? Do I really need to put every question, I have, each into their own thread? For some reason, I can't end sentences without a question mark.

Can you elaborate on the value method, for example, what value do I get? Or do I need to use switch()?
What about the video/audio controls or the cookie problems?
I also forgot another problem I have with the blur backdrop of the background going unsynced after a while when the background video is giving the backdrop only 1/5 of the visible area. I thought of a canvas, or to start the blur video every time background did a loop, but I don't know how to do any of that.

LMMFAO XD I mean, you technically COULD break your questions down into their relevant threads, not necessarily something need to do lol.

OR

Hear me out:
you can continue asking your questions on this thread, as follow up questions, given the fact they are pretty much all still relevant to your original question

Antero360 · Sep 6, 2022

KittenKatja said:
Is this just how Code Forum works? Decide on one subject the topic has put as an array of questions and lead the whole conversation only on that one aspect for the entire topic? Do I really need to put every question, I have, each into their own thread? For some reason, I can't end sentences without a question mark.

Can you elaborate on the value method, for example, what value do I get? Or do I need to use switch()?
What about the video/audio controls or the cookie problems?
I also forgot another problem I have with the blur backdrop of the background going unsynced after a while when the background video is giving the backdrop only 1/5 of the visible area. I thought of a canvas, or to start the blur video every time background did a loop, but I don't know how to do any of that.

value method? are you possibly referring to this?

Code:

document.getElementById('selectId').value

,

the .value property should get you the currently selected value of the dropdown

KittenKatja · Sep 9, 2022

I have tried a bunch of things and found out '.value' is used to extract and assign information from any user interaction element.
The thing, however, is that your advice didn't make that clear, it was more like "you can do this doing this" without further elaboration.

I have added a minus and plus button, but only minus works. How can I fix plus?

<button onclick="document.getElementById('thattextfield').value -= 1">-</button><button onclick="document.getElementById('thattextfield').value += 1">+</button>

Antero360 · Sep 9, 2022

KittenKatja said:
I have tried a bunch of things and found out '.value' is used to extract and assign information from any user interaction element.
The thing, however, is that your advice didn't make that clear, it was more like "you can do this doing this" without further elaboration.

I have added a minus and plus button, but only minus works. How can I fix plus?

<button onclick="document.getElementById('thattextfield').value -= 1">-</button><button onclick="document.getElementById('thattextfield').value += 1">+</button>

I mean, in regards to your commentary about "further elaboration", yes, .value does indeed serve 2 purposes, one to set a value when coupled with the =, `myObj.value = someValue`, and the other one to get a value `var thisValue = myObj.value`. As for context, although good to know both, you didn't need commentary about the set functionality, since you were asking `how to get the value of the selected option`.. keyword `GET`

Antero360 · Sep 9, 2022

KittenKatja said:
I have tried a bunch of things and found out '.value' is used to extract and assign information from any user interaction element.
The thing, however, is that your advice didn't make that clear, it was more like "you can do this doing this" without further elaboration.

I have added a minus and plus button, but only minus works. How can I fix plus?

<button onclick="document.getElementById('thattextfield').value -= 1">-</button><button onclick="document.getElementById('thattextfield').value += 1">+</button>

So to answer your question, and add your commentary about `further elaboration` back...as far as the + is concerned... one thing to remember: it is also overloaded, but much different than a simple get/set as in the case with .value.

functions of + sign in programming languages:
1) regular maths
2) concatenation of strings.

So, in HTML, all the elements will have their values as strings. That means, that when you call

Code:

var currentValue = document.getElementById('thattextfield').value;

the value of currentValue, although me and you interpret it as a number, compoopers are dumb and see it as a string..
so if you entered a 5 and you hit the + button...
you are not adding a 1 to the 5 to make it 6... what you are actually doing is adding a 1 to the string value of "5", making your result
"51". To correct this, you need to parse the number from the string, then make your addition and then set that value as the element value.
so something along the lines of

Code:

var currentValue = document.getElementById('myTextField').value;
var newValue = parseInt(currentValue,10) + 1;
document.getElementById('myTextField').value = newValue;

- button works... to a degree, because it doesn't have an overloaded functionality in programming languages, like the + sign.

Code:

However...always get in the habit of parsing strings if you want to work with numbers.

Welcome!

JavaScript Noob tries cookies and video/audio

KittenKatja

Well-Known Coder

Antero360

Software Developer

KittenKatja

Well-Known Coder

Antero360

Software Developer

Antero360

Software Developer

KittenKatja

Well-Known Coder

Antero360

Software Developer

Antero360

Software Developer

KittenKatja

Well-Known Coder

Antero360

Software Developer

Antero360

Software Developer

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

We value your privacy

Welcome!

JavaScript Noob tries cookies and video/audio

Well-Known Coder

Software Developer

Well-Known Coder

Software Developer

Software Developer

Well-Known Coder

Software Developer

Software Developer

Well-Known Coder

Software Developer

Software Developer

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy