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.

Javascript change effect for <ul><li> is not working correctly

I am new to Javascript. I want to click on the Navi bar to change some effect(underline to the words)
Coding for HTML
<div class="nav" id="nav">
<ul>
<li>Home</li>
<li>text1</li>
<li>text2</li>
</ul>
</div>
<div id="text1"> <!--> jump to here<-->
.....
</div>
<div id="text2"> <!--> jump to here<-->
.....
</div>
<script>
function SetTabState(dom){
$("#nav ul li").find('.underline_text').removeClass('underline_text');
$(dom).addClass('underline_text');
}
</script>
Just like the screenshot, when clicking "text1" tab, the home underline is removed and "text1" underline is added...
However, for my coding, when clicking on "text1", the underline is not changing and remain at "home". Anyone knows the problem here? Thx!

This is because from your html
<a href="index.html#text2" onclick="SetTabState(this)">
this refer to <a>, so dom is actually an <a>
From your SetTabState(dom), dom suppose to be a <li>?
You can add a event delegation to the <ul> with delegate to the <li>, like
function SetTabState(dom) {
$("#nav ul li").find('.underline_text').removeClass('underline_text');
$(dom).addClass('underline_text');
}
$(document).ready(function() {
$("#nav ul").on('click', 'li', function() {
SetTabState(this)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="nav">
<ul>
<li>Home</li>
<li>text1</li>
<li>text2</li>
</ul>
</div>
<div id="text1">
<!-->jump to here
<-->
.....
</div>
<div id="text2">
<!-->jump to here
<-->
.....
</div>

As others have said, the dom variable refers to the <a> element, but you're trying to remove the class from the <li>. Instead of using .find, you can directly select the element with the underline_text class:
<script>
function SetTabState(dom){
$("#nav ul li .underline_text").removeClass('underline_text');
$(dom).addClass('underline_text');
}
</script>

You can do like this :-
function SetTabState(dom){
$("#nav ul li a").removeClass('underline_text');
$(dom).addClass('underline_text');
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li a {
text-decoration: none;
}
ul li a.underline_text {
border-bottom: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="nav">
<ul>
<li>Home</li>
<li>text1</li>
<li>text2</li>
</ul>
</div>

Because you need to change the state of the other elements rather than the only element you clicked, I suggest you use a function for the whole group of elements instead of handle click event on each element. This is my code:
function initClickableNav(nav) {
var navItems = nav.querySelectorAll('a');
var activeClass = 'underline_text';
nav.addEventListener('click', function (event) {
[].forEach.call(navItems, function (navItem) {
if (navItem === event.target || navItem.contains(event.target)) {
navItem.classList.add(activeClass);
} else {
navItem.classList.remove(activeClass);
}
});
});
}
initClickableNav(document.querySelector('#nav'));
HTML
<div class="nav" id="nav">
<ul>
<li><span>Home</span></li>
<li>text1</li>
<li>text2</li>
</ul>
</div>

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;

Navbar div onclick function does not work for inner elements

I have a div class .dropbtn inside my navbar that I wish would run a list drop down function when clicked, but only the text "TOTAL" works onclick.
The <span> and the <i> inside it do not do anything when I click on it, and I need all three elements to be clickable and display the dropdown function. I am using jQuery, but not Bootstrap. Thanks in advance! EDITED.
jQuery('body').on('click', '.dropbtn', function() {
jQuery("#myDropdown").toggleClass("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reservas_right">
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
<div class="dropbtn">
TOTAL
<br /><span id="totalprice">0,00€</span>
<i class="material-icons">arrow_drop_down</i>
</div>
<div class="dropdown-content_reservas" id="myDropdown">
<ul id="dropul" class="dropul">
<li id="drop1"></li>
<li id="drop2"></li>
<li id="drop3"></li>
<li id="drop4"></li>
<li id="drop5"></li>
<li id="drop6"></li>
</ul>
</div>
</div>
</div>
CSS:
.show{
list-style-type:none;
}

jQuery('body').on('click', '.dropbtn', function(e) {
if(e.target !== this && jQuery(e.target).parent().is(".dropbtn"))
{
jQuery("#myDropdown").toggleClass("show");
} else {
jQuery("#myDropdown").toggleClass("show");
}
});

Toggle list items after button click using jQuery

So i managed to get my buttons to show the list items in the unordered list. But now every time i click a button all the list items nested in unordered list appears and disappears when the button is clicked again.
This is my updated HTML:
<div class="container-fluid text-center bg-black" id="services">
<div class="services">
<h2>SERVICES</h2>
<br>
<div class="row">
<div class="col-sm-3 iconpad-even">
<img src="img/icons/icon_data_edit.png" alt="data"/>
<button class="icon-btn" data-button="btnData">DATA</button>
<ul class="showData">
<li>Design</li>
<li>Cable Installation</li>
<li>Testing</li>
<li>CAT5e, CAT6, CAT6A</li>
</ul>
</div>
<div class="col-sm-3 iconpad-odd">
<img src="img/icons/fiber-icon-edit.png" alt="fiber-icon" />
<button class="icon-btn" data-button="btnFiber">FIBER</button>
<ul class="showData">
<li>Consultancy</li>
<li>Building to Building</li>
<li>Network Backbone</li>
<li>Testing</li>
</ul>
</div>
Basically i have 6 div's that are structured the exact same way, only difference is the content on the list items.
I've removed the display:none on the services ul li and added it to the css .showData class as suggested by #Mohammed-Yusef
Here's the current jQuery:
$(function() {
$('.icon-btn').on('click', function() {
$('.showData').toggle();
});
});

The jquery syntax of the click function should be as given below and also in your css you are hiding all the li elements. So you have to toggle them back with the selector $('.showData li') instead of $('.showData'). Also use .icon-btn instead of .icon-button as you don't have such a class mentioned in your html.
$('.icon-btn').on('click', function() {
$('.showData li').toggle();
});
Working snippet,
$(function() {
$('.icon-btn').on('click', function() {
//$('.showData li').toggle();
$(this).next('.showData').find('li').toggle();
});
});
.services ul li {
display: none;
margin-left: -1.8em;
/*color: #fff;*/
list-style: none;
margin-bottom: 1em;
font-size: 20px;
font-weight: bold;
font-family: 'Oswald', 'open-sans';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid text-center bg-black" id="services">
<div class="services">
<h2>SERVICES</h2>
<br>
<div class="row">
<div class="col-sm-3 iconpad-even">
<img src="img/icons/icon_data_edit.png" alt="data"/>
<button class="icon-btn" data-button="btnData">DATA</button>
<ul class="showData">
<li>Design</li>
<li>Cable Installation</li>
<li>Testing</li>
<li>CAT5e, CAT6, CAT6A</li>
</ul>
</div>
<div class="col-sm-3 iconpad-odd">
<img src="img/icons/fiber-icon-edit.png" alt="fiber-icon" />
<button class="icon-btn" data-button="btnFiber">FIBER</button>
<ul class="showData">
<li>Consultancy</li>
<li>Building to Building</li>
<li>Network Backbone</li>
<li>Testing</li>
</ul>
</div>

Please try it
$( "body" ).on( "click", ".icon-button", function(){
$('.showData').toggle();
});

The problem is that you don't have an element with a class icon-button your button has a class icon-btn so use $('.icon-btn') instead of $('.icon-button')
and you can use
$(function() {
$('.icon-btn').on('click', function() {
$('.showData').toggle();
});
});
and in css use
.showData{
display: none;
}
and remove display:none from .services ul li
Note: be sure to include jquery