We Keep Coding

Uncaught TypeError cannot set property 'src' of null onclick

I am trying to have a light box pop up for videos. it works fine with one video. When trying with multiple videos the 2nd video link dont work. When clicked I get Uncaught TypeError cannot set property 'src' of null.
Nothing happens when clicked but video1 starts in the background you cant see it only her the sound. Any help is appreciated.
here goes JS
// Function to reveal lightbox and adding YouTube autoplay
function revealVideo(div,video_id) {
var video = document.getElementById(video_id).src;
document.getElementById(video_id).src = video+'&autoplay=1'; // adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div,video_id) {
var video = document.getElementById(video_id).src;
var cleaned = video.replace('&autoplay=1',''); // removing autoplay form url
document.getElementById(video_id).src = cleaned;
document.getElementById(div).style.display = 'none';
}
here goes html
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg" style="max-width:100%;max-height:100%"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0" width="1280"></iframe>
</div>
</div>
</div>
</div>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&showinfo=0%20frameborder=0" width="1280"></iframe>
</div>
</div>
</div>
</div>

I think your problem here is that you're using IDs multiple times.
You got id="playme" on both anchor-tags and id="video" on both lightbox-divs.

So yeah. First, you should really only need a single video player -- simply change the src of that player and it should do what you want. The following is messy and ugly and really not the way i'd necessarily do this, but it works. Rather than having multiple lightbox/player elements, there's one. When you click the link, the onClick passes an id, which is matched against an array of objects. If a match is found, it changes the src of a SINGLE video-player element to the matched src and displays it.
From what I'm reading, this may be closer to what you're looking for.
var arrayOfVideos = [{
id: 'youtube',
src: "https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0"
}, {
id: 'youtube2',
src: "https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0"
}];
// Function to reveal lightbox and adding YouTube autoplay
revealVideo = function revealVideo(div, video_id) {
// This just shows what we're displaying, purely for debugging.
console.log("Showing the video "+video_id);
// We have a single videoplayer div. We'll simply toggle its src.
var video = document.getElementById("video-player");
// All possible links have been saved as an array of ids and src properties.
// Here, we simply get the first element with the matching id
var videoObject = arrayOfVideos.filter(function(obj) {
return obj.id === video_id;
})
video.src = videoObject[0].src+'&autoplay=1'; // Adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
hideVideo = function hideVideo(div, video_id) {
var video = document.getElementById("video-player");
var cleaned = video.src.replace('&autoplay=1', ''); // removing autoplay form url
video.src = cleaned;
document.getElementById(div).style.display = 'none';
}
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube2')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="video-player" src="" width="1280"></iframe>
</div>
</div>
</div>
</div>

How to get a value of href in modal window when we click the href?

I am trying to get a value in my pop up window when we click the a href.
I use magnificPopup JavaScript
Below code is my a href tag and I want the "data-stream" value to be get in the pop up window.
<a class="popup-with-zoom-anim wiplay" id="<?=$entry->id?>" href="#small-dialog" data-detail-id ="<?=$entry->id?>" data-stream="<?=$demo_streamurl;?>">hello</a>
I need to value to be inserted in the src of the below code which comes in the pop up window.
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<div class="popup-container">
<div class="container">
<div class="col-md-8 col-center popup-cont-container">
<video id="vid1" class="video-js vjs-default-skin" controls autoplay
width="640" height="364"
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type":
"video/youtube", "src":"https://www.youtube.com/watch?v=A7XdOyZIkko"}] }'>
</video>
<div class="video-info">
<div id="wiVideoInfo">
<div class="info-left">
<div id="wiPlayerChannel" class="main-tag"></div>
<div id="wiPlayerDate" class="datenTime"></div>
<div id="wiPlayerInfo" class="video-info-main">
<br>
<span class="at"> </span></div><div id="wiPlayerhandler" class="at"></div>
</div>
<div class="info-right">
<span><img src="<?=theme_url()?>images/eyeico.png">
<a id="wiPlayerLives"> </a> Live viewers</span>
<span><img src="<?=theme_url()?>images/heart.png"><a id="wiPlayerLikes">
</a> Likes</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I do it either using JavaScript or using PHP?

You need to use a code like below, as given in the docs § Varying modal content based on trigger button:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var stream = button.data('stream'); // Extract info from data-* attributes
var modal = $(this);
modal.find(".video-js").attr("data-setup", '{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "' + stream + '"}] }');
});
So the stream inside the function will have the data-stream's value. You need to set whatever you wanna set. Let me know if this works. :)

get the data-stream value from id $entry->id?
replace the data-stream value by data-stream
var data_stream = $('#vid1').attr('data-setup');
dt.val(dt.val().replace("**data-stream**",
$('#'<?=$entry->id?).attr('data-stream').val()));

Can I change an index in a loop?

I have a series of <div>s each with an id of a color name e.g <div id="white"></div> that loads an audio file and fills a couple heading tags with the artist and track title gathered from an ajax call when the div is clicked
HTML
<audio id="song" preload="none">
</audio>
<div id="white"></div>
<div id="pink"></div>
<div id="play" onclick="document.getElementById('song').play()"></div>
<div>
<h2 id="title"></h2>
<h3 id="artist"></h3>
</div>`
Javascript
$("#white").click(function(){
$("#song").attr('src',data[0].songSrc);
$("h2").html(data[0].title)
$("h3").html(data[0].artist)
});
$("#pink").click(function(){
$("#song").attr('src',data[1].songSrc);
$("h2").html(data[1].title)
$("h3").html(data[1].artist)
});
Could I use a for loop or $.each rather than repeating the same code and manually changing the div id and item's index for each of the 19 items?
Here is my bin where I am working this out: jsbin
Relevant HTML:
<div id="play" onclick="document.getElementById('song').play()"></div>

Why don't you give all your colors a common class and then store the object index in a data attribute. Then you can just have one click event which populates the correct data. Something like this:
$("div.color").click(function(){
var index = $(this).data('src');
$("#song").attr('src',data[index].songSrc);
$("h2").html(data[index].title);
$("h3").html(data[index].artist);
});
<div id="white" class="color" data-src="0"></div>
<div id="pink" class="color" data-src="1"></div>

I'm not entirely sure what you want but this should get you in the right direction.
Html
<div id="content">
<audio id="song" preload="none"></audio>
</div>
<div class="songs"></div>
and then with Javascript/jQuery
var html = '';
//Create a div for each fetched song
$.each(data, function(index,item){
html += '<div class="song" data-song-id="'+index+'" data-artist="'+item.artist+'" data-src="'+item.songSrc+'"></div>';
});
// and add them to the div element with the class songs
$('.songs').html(html);
//Listen to clicks on all divs with the class song
$('.songs').on('click', '.song' function(e){
var $this = $(this);
var songId = $this.data('song-id');
var artist = $this.data('artist');
var src = $this.data('src');
$("#song").attr('src',src);
})

Yes, you can. You have to refactor both, html and js.
At HTML you have to replace the static div's, the ones that have an id. Instead of that, use a container where all songs will be appended.
At JS, create DOM elements for each song, and append it to the songs container. Before, be sure, that all elements has "click" event handler with songs specific data. Take advantage of 'bind'
HTML
<div class="songs"></div>
<div id="play" onclick="document.getElementById('song').play()"></div>
<div>
<h2 id="title"></h2>
<h3 id="artist"></h3>
</div>
</div>
JS
myUrl='http://meyecare.herokuapp.com/api/v1/songs';
$(window).load(function(){
$.ajax({
url: myUrl,
type: 'GET',
dataType: 'jsonp',
success: function(data) {
$.each(data, function(index,item){
var element = $( "<div id='" + item.color + "'></p>" );
element.on('click', function(){
$("#song").attr('src',this.songSrc);
$("h2").html(this.title);
$("h3").html(this.artist);
}.bind(item));
element.appendTo(".songs");
});
},
error: function(){
console.log('Shnope!');
},
});
});

change innerhtml javascript

I'm new to javascript and can't figure out the best way to solve this problem.
I have a div called info.
I have dozens of videos, and am constantly adding new videos.
When I click a video, I want to update info.
So I was thinking I need a hidden div with the text, and getElementsByClassName for something like this:
<div class="video"><a href="./video1.mp4" target="videoplayer" onclick="showDescription()><div class="description"><p>description for video1</div>
<div class="video"><a href=./video2.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video2</div>
<div class="video"><a href=./video3.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video3</div>
and
function showDescription(){
var description = this.getElementsByClassName("description");
document.getElementById("info").innerHTML = description;
{
That doesn't work. Is using getElementsByClassName a good way to do this, or can anyone suggest another way?
Here's the actual html I'm using:
<div id="videoplayer">
<iframe name="VideoPlayer" width="80%" height="100%" src="http://www.youtube.com/embed/videoseries?list=PL5A2FB27789F71E63> </iframe>
</div>
<div id="info">
<p>Welcome</p>
</div>
<div class="thumb"><p>
<img src="http://discolemonade.com/roku/images/thumbs/MusicVideos/MV-ThumbSmallPlaylist.jpg">
Hours of music videos, refreshed often.
</p>
<div class="longinfodiv">
<p class="longinfo">this is the long version of the music video playlist info</p>
</div>
</div>
And the javascript:
function changeInfo() {
var longinfo = document.getElementsByClassName("longinfo");
document.getElementById("info").innerHTML = longinfo;
}

First structure your HTML file properly:
<div class="video">
Link
<div class="description">description for video1</div>
</div>
Then use the following script:
function showDescription(){
var video = this.parentNode;
var desc = video.children[1];
document.getElementById("info").innerHTML = desc.innerHTML;
}

jQuery .attr returns undefined

I have this HTML with the element .replyLink and an input field with type hidden that has a value (in this case 462). I want to be able to get the value of the value attribute of the input .hddnScrapId when I click on the .replyLink element. This is the HTML:
<div class="scrapItemParent">
<input class="hddnScrapId" type="hidden" value="462"/>
<img class="scrapProfilePic" src=" static/img/user/personalProfilePicture/mod_50_50/150972db1a0c9e863746c12797398b6e40ae05c8.jpg" />
<div class="scrapContent"><br />
<video class="scrapVideo" controls>
<source src="../../../scrapll_m/static/vid/4045e7944d8ea8f10dd4826a1e1595a7cef73b0c.mp4" type="video/mp4">
</video><br />
<span class="scrapTime">2014-05-27 16:51:22<br />Erol Simsir
<a class="replyLink" href="javascript:void(0);">Reply</a>
<a class="replyClose" href="javascript:void(0);">x</a>
</span>
</div>
</div>
This is the JS I have now:
$('.replyLink').click(function(){
var hddnScrapId = $(this).closest(".hddnScrapId").attr("value");
alert(hddnScrapId);
});
This keeps saying 'undefined'. I guess the problem occurs because the closest() function can't find the input field hddnScrapId. Why doesn't it work?

1) closest only looks among the element itself and its ancestors and the .hddnScrapId element isn't a parent of the clicked element.
2) To get the uptodate value, you must use val, not attr("value").
You want this :
var hddnScrapId = $(this).closest(".scrapItemParent").find(".hddnScrapId").val();

You have incorrect selector. You can use:
var hddnScrapId = $(this).closest('.scrapContent').siblings(".hddnScrapId").attr("value");
alert(hddnScrapId);