We Keep Coding

Pass a Parameter to Another Function and Into innerHTML

I've built my own lightbox, and it's working rather well. I built my own because I needed it to be without a framework, and also work well within a game I'm building. However, I've run into a problem I'm fairly certain is simple, but proving rather vexing to me. The issue I'm having is taking the parameter "slideName" and passing it through to the "fillRightButton()" function.
var createSlidebox = function(cancelButton, bannerImg, slideName) {
fillRightButton("nextSlide",slideName);
};
Here's a portion of that function:
var fillRightButton = function(rightButtonType, rightDestination) {
if (rightButtonType === "nextSlide") {
document.getElementById("lightbox_fright").innerHTML = '<a onclick="changeSlide(' + rightDestination + ')">Next</a>';
}
}
The "fillRightButton()" function performs fine when it is called directly, and this code works if you put the parameter in directly:
var createSlidebox = function(cancelButton, bannerImg, slideName) {
fillRightButton("nextSlide", "mySlideName");
};
However, without the quotes it renders as:
<a onclick="changeSlide([object Object])">Next</a>
with a "Uncaught SyntaxError: Unexpected identifier" JS error. How would I fix this? Thanks!

use data attribute to store the object using jQuery, in function call
var fillRightButton = function(rightButtonType, rightDestination) {
if (rightButtonType === "nextSlide") {
document.getElementById("lightbox_fright").innerHTML = '';
// document.getElementById("lightbox_fright").innerHTML = '<a onclick="changeSlide( $(this).data('dest') )">Next</a>';
var a = document.createElement('a');
a['data-dest'] = rightDestination;
a.onclick=function(){changeSlide( this['data-dest']); }
a.innerHTML = 'Next';
document.getElementById("lightbox_fright").appendChild(a);
//document.getElementById('lightbox_fright > a').data({'dest':rightDestination});
}
}
use jQuery if not already included
PS updated w/o jQuery please give it a try let me know if it works, recommend using jQuery though

js onclick function params

How can I pass an attribute of div into it's own onclick function?
For example, I have this div:
var join_button = document.createElement("div");
join_button.setAttribute("class", "join_button");
join_button.innerHTML = "join";
join_button.setAttribute("room_name", name);
join_button.setAttribute("onclick", "join_room()");
Now, in function join_room() I need to know the room name attribute of this join_button. Ofcourse, I have not only one join_button on my page, I dont know it's names and I need to handle all of them.
If I try to use this It tells me undefined is not a function
function join_room() {
this.getAttribute("room_name");
}
undefined is not a function

You can use this to read the objects attribute.
var join_room = function() {
var room_name = this.getAttribute('room_name);
}
then set the onclick like this.
join_button.onclick = join_room;
JSFIDDLE

Uncaught TypeError: undefined is not a function (on video pause function)

I am trying to pause a videos whith jQuery Object and have been getting an error that says:
Uncaught TypeError: undefined is not a function
Heres de code:
function daVideos(myVideo, arrPause, _src)
{
$player = myVideo.get(0);
$player.attr('src', _src);
$player.addEventListener("timeupdate", function(event)
{
var isPause = false;
for(var i=0; i<arrPause.lenght; i++)
{
if($player.currentTime >= arrPause[i] && !isPause)
{
isPause = true;
$player.pause();
}
}
});
}
var arr1 = [2,4];
daVideos($("#video"), arr1, "video/sintel_trailer-1080p.mp4");
Any body can help me saying what im doing wrong???

$player = myVideo.get(0);
$player.attr('src', _src);
$player.addEventListener("timeupdate", function(event)
Let's think about these lines. To start with, we have a jQuery object (myVideo). We then get the native DOM object with get(0) ($player). We then attempt to call a jQuery function (attr) on the native DOM object (this is where the error occurs, because a native DOM object doesn't have an attr function). We then try to add an event using the native addEventListener system.
This all seems a bit complicated and a bit confused. The simple solution is simply to use jQuery throughout:
var $player = myVideo.get(0); // keep for later, note we're using var
myVideo.attr('src', _src);
myVideo.on('timeupdate', function(event)
The other alternative is simply to use the DOM:
var $player = myVideo.get(0); // note that we're using var again
$player.src = _src;
$player.addEventListener("timeupdate", function(event)

This code
$player = myVideo.get(0);
gives the real element, not the jQuery wrapper. And attr is a method of jQuery wrapper objects.
If you want to get the first element of the jQuery object, but still have it wrapped in jQuery, you can use eq instead of get:
$player = myVideo.eq(0);
$player.attr('src', _src);
Note then you must get the real element, or use on instead of addEventListener.
Alternatively, you can do it the vanilla-js way:
$player = myVideo.get(0);
$player.setAttribute('src', _src);

Javascript: getValueProperty of null?

I am trying to write a single function to move an element, but I am encountering this error:
Uncaught TypeError: Cannot call method 'getPropertyValue' of null
function Mover() {
this.move = move;
// Name of the moving element, property to change, endPoint - where to end the movement
function move(element, property, endPoint) {
var element = document.getElementById(element);
// Get value of the desired property and turn it into number so that it can be incremented
var propertyValue = window.getComputedStyle(element).getPropertyValue(property);
var propertyValueInt = parseInt( propertyValue.substr(0,propertyValue.length-2) );
// This is where error starts: for some reason it says the aforementioned error
var moveit = function() {
propertyValueInt = propertyValueInt + 1;
element.style.property = propertyValueInt + "px";
};
window.setInterval(moveit, 500);
}
}
Where could the error be? I realize that it somehow rewrites the element property so that it is null, but why?
Thank you

The error comes from getComputedStyle(element).getPropertyValue(property);, since element can't be recognized as a HTML element. You've to fix the value of element to refer an existing HTMLElement. There's a typo/wrong text in the function call, or an element with the said id doesn't exist at the time this function is executed.
There's also an error in moveit(). When property is a variable name, this doesn't do what you expect:
element.style.property = ...
You need to use bracket notation:
element.style[property] = ...

Dynamic access to the object name

I am trying to select certain property of dynamic object
var minus = {
doAction: function(){
console.log("this is minus");
}
}
var plus = {
doAction: function(){
console.log("this is plus");
}
}
var panelEvents = {
button: function(){
$(document).on("click", ".plus, .minus", function(){
var buttonClass = $(this).attr('class');
window[buttonClass][doAction](); //get an error
});
}
}
panelEvents.button();
Questions
1. How can I dynamically call various objects with the same methods?
2. Is it bad practice in point of OOP view to access methods in such way?
UPDATE
I understood, that it is not flexible approach. So now I have only theoretical interest of accessing dynamic object. Neither
window[buttonClass]['doAction']();
nor
window[buttonClass].doAction();
working.
Firebug:
TypeError: window[buttonClass] is undefined
window[buttonClass]'doAction';
Should I obviously attach minus and plus objects to window?
SOLUTION
The problem was that my code was inside jQuery object
$(document).ready(function(){
//my code
)};

With the line that fails, you are trying to call a function that is named the same as the content of the variable doAction. The problem here is that doAction is not defined.
You would have to write:
window[buttonClass]['doAction']();
or
window[buttonClass].doAction();