We Keep Coding

Update iFrame src a click of a href

I have the following code below, and I am trying to make it so that when a user clicks the text of a video streaming website they wish to watch the video from, it will update inside of the iframe.
<iframe src="<!-- Desired URL from a href should be here -->" height="240" width="100%">
<ul class="video-links">
<li>YouTube</li>
<li>Vimeo</li>
<li>DailyMotion</li>
<li>Veoh</li>
<li>Crackle</li>
</ul>
How can I go about doing this in a way that can scale just from adding more <li> tags into our video-links ul class?

The fully working code:
<iframe id="myiframe" src="" height="240" width="100%"></iframe>
<ul class="video-links">
<li>YouTube</li>
<li>Vimeo</li>
<li>DailyMotion</li>
<li>Veoh</li>
<li>Crackle</li>
</ul>
<script>
function changeSrc(obj)
{
document.getElementById("myiframe").src = obj.href;
return false;
}
</script>
Now comes the explanation of the few edits I made to your code:
iframe tags must be closed, otherwise page will not appear correctly.
You must use JavaScript to modify the page dynamically.
You can write JavaScript functions in the script tag.
onclick is a callback, which is called when the user clicks on something in the page. We call the changeSrc function, passing this as parameter, because we want to pass the object which we are clicking.
We must return false, otherwise page will follow the link in the href attribute. There are alternatives to this, but I'm trying to be simple with my solution.
We assign an id to your iframe and get it to manage its properties, like src, so it can be set.

Here is some syntactical sugar added on to FonzTech's answer.
<iframe id="myiframe" src="" height="240" width="100%"></iframe>
<ul class="video-links">
<li data-link="https://our-unique-url-for-this-title.com">YouTube</li>
<li data-link="https://our-unique-url-for-this-title.com">Vimeo</li>
<li data-link="https://our-unique-url-for-this-title.com">DailyMotion</li>
<li data-link="https://our-unique-url-for-this-title.com">Veoh</li>
<li data-link="https://our-unique-url-for-this-title.com">Crackle</li>
</ul>
<script>
// Get a NodeList of all li elements inside .video-links
let elements = document.querySelectorAll('.video-links li')
// Loop through each item in the NodeList
elements.forEach((el) => {
// Add a click event to each item
el.addEventListener('click', () => {
// Scrape the data-link attribute from the current li element
let link = el.attributes['data-link'].value;
// Set the iframe's src attribute
document.getElementById("myiframe").src = link;
});
});
</script>
Instead of using an anchor tag's href attribute for storing data, I suggest using custom data attributes as that is what they are made for. In addition to that you don't have to keep the browser from following the link.
This solution also doesn't use inline JS which some consider to be a "bad" or "messy" practice.

get a href attribute and set this attribute to other div

I have 3 classes with such a structure (this is slider in my web app):
<div class="emotion--digital-publishing">
<div class="dig-pub">
<div class="bg--image">/div>
<div class="dig-pub--layer center center">
<div class="layer--wrapper">
<div class="layer--content">
<div class="dig-pub--button">
</div>
</div>
</div>
</div>
</div>
</div>
I want to get href attribute of a and set a href atribute with this url to dig-pub. It is very important to me that this is the link (which class I clicked), because 3 classes have different links.
I would like to use jQuery.

You bind a click event to your anchor tag. you'll need to assign a class to the anchor tag too if you have many on the page so replace 'className' with your class name. I'm not sure how you want to assign it to the div so I've done it as a data-attribute as this is the conventional way to go.
$('a.className').on('click', function (){
$(this).closest('.dig-pub').attr('data-href', $(this).attr('href'));
});

(Don't forget to close the div on line 3 in your snippet)
jQuery('.dig-pub').on('click', function() {
url = jQuery(this).parent().find('a').attr('href');
jQuery(location).attr(url);
});
https://codepen.io/Kidkie/pen/gdaJjZ

First, add an id to the link and the div (easier to fetch the elements)
<div id="dig-pub" class="dig-pub">
<a id="id" href="/wilson-camo"></a>
Then, get the href
var href = $('#id').attr('href');
Set the value to the div
$('#dig-pub').html(href);
However, you could have find this easily on JQuery documentation.

Can I show one div, hide all others, based on clicking its assigned button?

This seems to be a common question, however when I check the answers, they're all different.
I have a row of five links. Each has a corresponding div below. When I click a links, I want its div to display and all others to hide.
Here's some code I came across that seems to be on the right track:
$('a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});
But if I use "a" without a destination, clicking the link takes me to the top of the page. I just want the divs below to show or hide...
Can I use "button" or "div" instead of "a"? If so, what would I use instead of "rel"?
Sorry for the noob question. I just can't seem to make any of the solutions I've found here work for my site. What's the simplest way to do this?
Here's some HTML that definitely works with the jquery script above:
$('a').on('click', function() {
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>
However if my href="", clicking that link bounces me up to the top of my page for some reason. So I'd rather use a clickable div or a button rather than a hotlink. In which case, what can I use in the script instead of "rel"?

It seems you only need to prevent the default behaviour by adding e.preventDefault();
$('a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>

You can use below values on your href.
Anchor
Here is the complete explanation for javascript:void(0)
The JavaScript void operator evaluates the given expression and then
returns a value of undefined. https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm

Try using href="javascript:" or href="#" instead of leaving the attribute empty. href="" tells the browser to reload the current page that you are in, which is why it bounces you to the top of the page.
You can also use <button> or <div>, the effect will not be very different from using <a>. You can also use rel if you are using <button> or <div>. In fact, it is arguably better to use rel on <button> and <div> because the attribute does not have any functional purpose in those tags. On the contrary, <a> uses the rel attribute to specify a few things to browsers.

Target attribute does not suitable for divs it is only for windows or iframes. Also, hyperlink should has href attribute otherwise it will be an anchor or placeholder link in HTML5 specifications.
You may use any conjugation attributes between the link and its div such as link title will be div id.
Example:
Show DIV 1
Show DIV 2
Show DIV 3
<div id="div1" class="linked-div" style="display: none"> One</div>
<div id="div2" class="linked-div" style="display: none"> Two</div>
<div id="div3" class="linked-div" style="display: none"> Three</div>
<script>
$("a").click(function(){
divId = $(this).attr("title");
$(".linked-div").each(function(){
if ($(this) == $("#"+divId)){
$(this).show()
}
else{
$(this).hide()
}
})
$("#"+divId).show();
})
</script>
DEMO

Changing image with onclick for 100's of different image links

I am fairly new to javascript and just trying to figure out how to get 100's of image links to change to a specific image once they've been clicked.
I know you can add ID's, but having to make 100's or 1000's of ID's will be a pain. Maybe someone will be able to help me with this issue, or direct me in the correct direction. Thank you!
<a id="click"><img id="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://yahoo.com','_blank');"></a>
<a id="click"><img id="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://google.com','_blank');"></a>
<a id="click"><img id="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://monster.com','_blank');"></a>
document.getElementById('click').onclick = function(){
document.getElementById('change').src = "http://i.imgur.com/0eaWvgw.jpg";
}

Using jQuery,
$('a').on('click', function() {
$('img').each(function() {
$(this).attr('src', 'http://i.imgur.com/0eaWvgw.jpg')
});
});

First of all, There must not be multiple elements in a document that have the same id value.
Use common-class over all the elements on which click event is to be bound
Use jQuery .on method to register events over all the elements having specified common-class
Also note that you have attached inline-click event over img elements, which action is suppose to take place once click is dispatched ?
$('.click').on('click', function(e) {
e.preventDefault(); //To prevent behavior of `a` elements
$(this).find('img.change').prop('src', 'http://i.imgur.com/0eaWvgw.jpg');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a class="click">
<img class="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://yahoo.com','_blank');">
</a>
<a class="click">
<img class="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://google.com','_blank');">
</a>
<a class="click">
<img class="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://monster.com','_blank');">
</a>

As others stated, an id is something that must be unique. A class is what you want to use. The class attribute is a space-separated list of words. In this case, we only need one class on all links. Now you put some JS on all these links, but you should instead write it like this:
<a class="change" href="http://www.example.com" target="_blank">
<img src="image.png" />
</a>
The links will open the sites in a new window or tab even on browsers with JavaScript disabled in that way.
Then we need to retrieve a list of all elements with the "change" class, and add an event listener for the click event on all of them.
var changeLinks = document.querySelectorAll('.change');
var clickListener = function(e) {
var imgElement = e.currentTarget.querySelector('img');
imgElement.src = 'newimage.png';
// technically, the image is only changed once so we can remove the
// event listener once it has run on a link
e.target.removeEventListener('click', clickListener);
};
for(var i=0, element; element = changeLinks[i]; ++i) {
element.addEventListener('click', clickListener);
}

onClick does not function inside a dynamically generated div

I have a jquery code which generate a div dynamically
the problem is that the onclick function for the a tag does not calls the required function
Here is the code
$("#new").append('
<ul class="#...#">
<li>
<a href="./d.html?n1='+item[0]+'&n2='+item[2]+'&n3='+item[3]+'">
<input type="hidden" value='+item[0]+'>
<img style="height: 64px; width: 64px;" class="#...#"
src="image.png" width="40" height="40" />
<span class="#...#">
<b>'+item[0]+'</b>
'+item[1]+'......
</span>
</a>
<br />
<div>
<a onClick="insert();" href="#">
<i class="icon1"></i>
</a>
<a href="2.php?q='+q+'&n='+item[0]+'" id="icon2" name="icon2">
<i class="icon2"></i>
</a>
</div>
</li>
</ul>
');
I am using the above code as an ajax success function
the a tag is not calling the insert() function
I searched for the error but could not find the
What am doing it wrong?
Thsnks in advance

Add a custom class, such as "catchClick" to the element that you need to catch the click event of.
var linkToAdd = '<a class="catchClick" href="#">My link</a>';
var $linkToAdd = $(linkToAdd);
$('#new').append($linkToAdd);
Then the following code will setup handlers for clicks on that element.
It works because the click event is bubbled up the dom hierarchy to the document element. So you can attach a listener to the document element instead.
$(document).on('click', '.catchClick', function(e) {
// do your stuff here
// you probably need to get a jquery reference to the element that was clicked:
var $this = $(this);
// you probably want to stop the event's default actions so we'll add this:
e.stopPropagation();
e.preventDefault();
});

When you work with dynamic content I suggest you use DOM event delegation. The ideea is to add the listener on a parent of your dynamically added content
This explains how to do it and how it works
http://davidwalsh.name/event-delegate

Use JavaScript event delegation to separate concerns:
$(function() {
$(document.body).on('click', 'ul.someClass div a', function() {
// insert() method logic goes here
});
});
Second argument specifies the event target. This event is bind to the document's body so it's always present. Target DOM objects can be generated per AJAX at some point later or removed from the document. The actual target check happens when a user actually clicks something.
Also adding a class attribute to <div> or <a> in your code might help with readability. E.g.:
<div class="buttons">
<a class="btn-insert" onClick="insert();" href="#">
<i class="icon1"></i>
</a>
<a href="2.php?q='+q+'&n='+item[0]+'" id="icon2" name="icon2">
<i class="icon2"></i>
</a>
</div>
Target attribute for jQuery on() method could then be simplified to just '.btn-insert'

Set the click event handler AFTER having appended new clickable items to the document, and subsequently after each time you append new clickable items to the document.