We Keep Coding

Select an Image to appear in a div as a bg-img

I'm build a digital poster editor and so i need help setting an image as a background look of a div. I have no clue where to start
I created a div with a couple of images to select from and a empty div with just a div id.
Here is my images div:
<div id="imgopt">
<ol>
<li>
<img src="asset/img/template1.jpg">
</li>
<li>
<img src="asset/img/template2.jpg">
</li>
<li>
<img src="asset/img/template3.jpg">
</li>
<li>
<img src="asset/img/template4.jpg">
</li>
</ol>
</div>
here is my Empty Div:
<div id="designPoster">
</div>
Basic i need help writing the js code or a bit of direction on how to implement this functionality of setting a background image of the empty div[id="designPoster"] by just selecting the an image from div[id="imgopt"].

If you want to do that with Javascript without jQuery, here is how you could achieve it.
Note that I changed the image to have a working example.
var imageElts = document.querySelectorAll("#imgopt img");
var posterElt = document.querySelector("#designPoster");
for (var i = 0; i < imageElts.length; i++) {
imageElts[i].addEventListener("click", changeBgImage);
}
function changeBgImage(e) {
posterElt.style.backgroundImage = "url(" + e.target.src + ")";
posterElt.style.backgroundSize = "contain";
posterElt.style.backgroundRepeat = "no-repeat";
}
#imgopt img {
cursor: pointer;
width: 100px;
height: auto;
}
#designPoster {
width: 400px;
height: 157px;
background: #ccc;
}
<div id="imgopt">
<ol>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
</ol>
</div>
<div id="designPoster"></div>
Good luck !

This will do what you are asking...
$(function() {
$('#imgopt img').on('click', function() {
var imageSource = $(this).prop('src');
$('#designPoster').css('background-image', 'url('+imageSource+')');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgopt">
<ol>
<li>
<img src="asset/img/template1.jpg">
</li>
<li>
<img src="asset/img/template2.jpg">
</li>
<li>
<img src="asset/img/template3.jpg">
</li>
<li>
<img src="asset/img/template4.jpg">
</li>
</ol>
</div>
<div id="designPoster">
</div>

Assuming that the img src is the background you would like to set:
$('#imgpot img').onClick(function(){
$('#designPoster').css('background-image', `url(${this.attr('src')})`);
});
What this will do is add an event handler to each image tag within #imgpot, when clicked, it will assign the background-image property of #designPoster to the clicked images src attribute.

JQuery change picture upon selection

I have list of options:
<li class="">
<img src="/1.img" />
<img src="/2.img" />
Option 1
</li>
<li class="">
<img src="/1.img" />
<img src="/2.img" />
Option 2
</li>
By default - 1.img visible.
If user select for example Option 1, i want 1.img to hide(); and 2.img to show(); But just for Option 1.
For example this code:
$("#selection li").click(function(){
$('.not-checked').hide(); // to hide image
$('.checked').show(); // to show image
}
Change picture in every li. How can i change picture only on selected li ?

To only target the children of the <li> element you're clicking on, you can make use of jQuery's .find() method. You want to find the img elements, and in order to target specific <img> elements, you can use the :nth-of-type pseudo-class:
$("#selection li").click(function() {
$(this).find('img:nth-of-type(1)').hide(); // to hide image
$(this).find('img:nth-of-type(2)').show(); // to show image
});
img:nth-of-type(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection">
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img src="http://via.placeholder.com/50/0000ff/0000ff" /> Option 1
</li>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img src="http://via.placeholder.com/50/0000ff/0000ff" /> Option 2
</li>
</div>

Or you could simply use a 'data-' attribute on all the elements and compare them in jquery.
<div id="selection">
<li class="" data-option="1">
<img src="/1.img" data-option="1">
<img src="/2.img" data-option="2">
Option 1
</li>
<li class="" data-option="2">
<img src="/1.img" data-option="1">
<img src="/2.img" data-option="2">
Option 2
</li> </div>
And from your script
$("#selection li").click(function() {
//first hide all images
$(this).find("img").hide();
//then show only the ones with the right data-option
$(this).find("img[data-option="+$(this).data('option')+"]").show()
});
Btw, you do not always have to use data- it's just a jQuery convention of giving attributes to a tag.

You can use jQuery toggle() to achieve it.
$("li").click(function() {
$(this).find("img").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img style="display:none" src="http://via.placeholder.com/50/0000ff/0000ff" />
Option 1
</li>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img style="display:none" src="http://via.placeholder.com/50/0000ff/0000ff" />
Option 2
</li>
Explanation: $(this) will keep you in the clicked <li>; find("img") will target all of the images inside; toggle() will change the display for any targeted img;

Displaying pictures in html

I am learning about the DOM and incorporating Javascript in html files, I have tried this code that display and hide pictures using the event listener click. however, pictures don't seem to appear even no error is detected in the Chrome console.
NOTE: I only posted the concerned code, I omitted some of the HTML tags
<style>
.hide{
display: none;
}
</style>
<main>
<ul>
<li><a data-img="face" id="facebook" href="#"> Facebook </a></li>
<li><a data-img="insta" id="instagram" href="#"> Instagarm </a></li>
<li><a data-img="snap" id="snapchat" href="#"> Snapchat </a></li>
</ul>
<img class="hide" id="face" scr="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" scr="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png" >
<img class="hide" id="snap" scr="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
if(pic.className === "hide"){
pic.className="";
} else {
pic.className= "hide";
}
}
</script>

First off, you issues is that it is src and not scr, so change that attribute and the images will show.
Second, I would recommend using classList with add, remove and contains. You could also use toggle to make your code even smaller like so:
<style>
.hide {
display: none;
}
</style>
<main>
<ul>
<li> <a data-img="face" id="facebook" href="#"> Facebook </a> </li>
<li> <a data-img="insta" id="instagram" href="#"> Instagarm </a> </li>
<li> <a data-img="snap" id="snapchat" href="#"> Snapchat </a> </li>
</ul>
<img class="hide" id="face" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" src="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png">
<img class="hide" id="snap" src="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
pic.classList.toggle('hide', !pic.classList.contains('hide'))
}
</script>

I added the event input to your show function. I modified your show function like below. Check if this works for you:
function show(e) {
let picId = e.target.dataset.img;
let pic = document.getElementById(picId);
if(pic.classList.contains('hide'){
pic.classList.remove('hide');
}
else{
pic.classList.add('hide');
}
}

problems with nav in mobile view

I am trying to have an icon that is going to show up in my mobile veiw where you can click show and hide the menu,
right now my code doesnt work, it does not open at all
my problem is trying to figure out id's and inputs here
not sure what I am doing wrong, could someone point me to the right direction please ? Thanks in advance
//this is what I have
<nav class="navMenu">
<input id="menu-icon" type="checkbox">
<label id="menu-icon" class="iconMenuLbl" for="menu-icon"></label>
<ul>
<li>
<img class="navImg" src="media/Home-tall.png" alt="">
</li>
<li>
<img class="navImg" src="media/My-Details-tall.png" alt="">
</li>
<li>
<img class="navImg" src="media/My-Loans-tall.png" alt="">
</li>
<li id="loggedin-box" class="">
<form method="POST" action="login">
<div>
<strong>some name</strong>
</div>
<button style="padding:0px;" name="logout" type="submit">
<img class="navImg" src="media/Sign-Out.png">
</button>
</form>
</li>
</ul>
</nav>
//js file
$(function() {
var menuVisible = false;
$('#menu-icon').click(function() {
if (menuVisible) {
$('.navMenu').css({'display':'none'});
menuVisible = false;
return;
}
$('.navMenu').css({'display':'block'});
menuVisible = true;
});
$('.navMenu').click(function() {
$(this).css({'display':'none'});
menuVisible = false;
});
});

You have two ids sharing the same name. 'menu-icon' try changing one of the ids to another name. IDs should be unique. -- ALSO move your input field out of the nav tag.

How do I hijack just one specific link within an LI and not ALL links?

I have a menu that in each li, it will have multiple <a> tags. The main one being the name of the item. When that one is clicked, I want a Dropdown event to happen. But on the items within the <li> I want those clicks to function normally.
My HTML looks like this:
<li class="tree-item-name">Aunts & Uncles
<span class = "bootstrap-styles">
<ul>
<li>
<img alt="Default" class="img-circle" height="48" src="/assets/default.jpg" width="48" />
Jackie Lynn <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
</li>
</ul>
</span>
</li>
The JS looks like this:
jQuery(document).ready(function(){
jQuery('LI.tree-item-name').click(function(){
if (jQuery(this).hasClass('opened')) {
jQuery(this).find('UL').slideUp();
jQuery(this).removeClass('opened');
} else {
jQuery(this).find('UL').slideDown();
jQuery(this).addClass('opened');
}
return false;
});
});
But right now, when you click on either the img tag or Jackie Lynn....neither work - because both are being hijacked by the JS.
How do I set this up so only li.tree-item-name is affected?

You need to stop event propagation and target only lis which has a ul inside it
jQuery(function($) {
$('LI.tree-item-name').has('ul').click(function() {
if ($(this).hasClass('opened')) {
$(this).find('UL').slideUp();
$(this).removeClass('opened');
} else {
$(this).find('UL').slideDown();
$(this).addClass('opened');
}
return false;
});
$('LI.tree-item-name li').click(function(e) {
e.stopPropagation();
})
});
.tree-item-name ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="tree-item-name">
Aunts & Uncles
<span class="bootstrap-styles">
<ul>
<li>
<img alt="Default" class="img-circle" height="48" src="/assets/default.jpg" width="48" />
Jackie Lynn <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
</li>
</ul>
</span>
</li>
</ul>

Give your a tag (Aunts & Uncles) a class, and use that class as the jQuery click event trigger.
jsFiddle Demo
<li class="tree-item-name"><a class="rels" href="#">Aunts & Uncles</a>
<span class = "bootstrap-styles">
<ul>
<li>
<img alt="Default" class="img-circle" height="48" src="http://placekitten.com/g/48/48" width="48" />
Jackie Lynn <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
</li>
</ul>
</span>
</li>
jQuery('.rels').click(function(){
if (jQuery(this).parent().hasClass('opened')) {
jQuery(this).parent().find('UL').slideUp();
jQuery(this).parent().removeClass('opened');
} else {
jQuery(this).parent().find('UL').slideDown();
jQuery(this).parent().addClass('opened');
}
return false;
});

That's because you are using (this) which takes care of the link you click on but then select the entire unordered list.
You need to put the url's on separate list item for it to work the way you have it.