We Keep Coding

Button onclick not allowing my window to appear

I'm having a tough time following this little tutorial on how to create a modal window when a button is clicked.
Not sure if my html is correct (the modal window is at the very bottom), but when I click on save list button nothing happens, only a refresh. I'm using Visual Studio Code with the live server plugin if that has anything to do with it. It did work when using a simple alert('hello').
For reference here is my codepen: https://codepen.io/OMantid/pen/pobLKWx
HTML
<form id='myModal' class= 'Modal is-hidden is-visuallyHidden'>
<div class='Modal-content'>
<label for='list-name'>Name:</label>
<input type='text' name='list-name' id='list-name'>
<div class='modal-btn-container'>
<button name='save-listName'>Save</button>
<button name='cancel-listSave' class='cancel-btn'>Cancel</button>
</div>
</div>
</form>
JS
//Get the modal
let modal = document.getElementById('myModal');
//Get the main container and the body
let main = document.getElementsByTagName('body');
let header = document.getElementsByTagName('header');
//Get the open button
let saveBtn = document.getElementById('save-btn');
saveBtn.onclick = function() {
modal.className = 'Modal is-visuallyHidden';
setTimeout(function() {
main.className = 'is-blurred';
modal.className = 'Modal';
}, 100);
}
Thank you.

Bootstrap slider - get value and show it in a div

I've implemented bootstrap and jquery and bootstrap jquery (https://github.com/seiyria/bootstrap-slider). I am using example 6 (http://seiyria.com/bootstrap-slider/).
I want to get that value and show it in a div (so later I can create an if with that value), but I cannot get it to show.
This is my HTML code:
<div class="col-lg-6" style="height: 39px; padding: 10px; padding-left: 25px;>
<input id="ex6" type="text" data-slider-min="10000" data-slider-max="100000" data-slider-step="1" data-slider-value="90000"/>
<span id="ex6CurrentSliderValLabel">Maksimalna cena: <span id="ex6SliderVal">90000</span></span> din.
</div>
<div id ="ivancar"> test </div>
And this is my JavaScript (jQuery) code:
var slider = new Slider("#slider1");
slider.on("slide", function(slideEvt) {
console.log(slider.getValue() );
var div = slider.getValue();
});
document.getElementById("ivancar").innerHTML = div;

You have placed the logic of updating your div outside the slide event. Place it within the slide event.
slider.on("slide", function(slideEvt) {
console.log(slider.getValue() );
var div = slideEvt.value; // this is what the plugin says
$("#ivancar").html(div); // <== update logic must be here
});
Note: I changed the document.getElementById("ivancar").innerHTML = div; code to $("#ivancar").html(div); for simplicity

hide and show div click on a

i want to hide id
when i click on a href so its same id shows and other id will close automatically
example :
<div id="fit" class="heading">FIT</div>
first
<div id="er" style="display:none;">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" style="display:none;">erp </div>
<div id="style" class="heading">style</div>
and script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(e) {
$("a").click(function(e) {
var ab = $(this).attr("href");
//alert(ab);
//$("div").hide();
$(ab).show();
});
});
</script>

in html use class for anchor related div
<div id="fit" class="heading">FIT</div>
first
<div id="er" style="display:none;" class="anchorrel">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" style="display:none;" class="anchorrel">erp </div>
<div id="style" class="heading">style</div>
<script>
$(document).ready(function(e) {
$("a").click(function(e) {
e.preventDefault();
var ab = $(this).attr("href");
//alert(ab);
$(".anchorrel").hide();// all div related to .anchorrel hide
$(ab).show();
});
});
</script>
see demo

You can do this:
$(document).ready(function (e) {
// Cache the anchor tag here
var $link = $('a');
// Click event handler for the link
$link.click(function (e) {
// prevent the default action of the anchor
e.preventDefault();
var id = this.href;
// Hide all the visible divs next to all the anchors
$link.next('div:visible').hide();
// Show the current div with id
$(id).show();
});
});

If you wan't to close all other div's and display only the div with the id that matches the href of the tag clicked than use the following:
$("a").click(function(e) {
var ab = $(this).attr("href");
$('div').hide();
$(ab).show();
});
I don't know why you comment it in the first place, maybe i don't understand what you wan't to acheive.
Here is a fiddle: http://jsfiddle.net/25RZR/

Fiddle
JavaScript
$(document).ready(function(e) {
$("a").click(function(e) {
var ab = $(this).attr("href");
$('.content').hide();
$(ab).show();
});
});
HTML
<div id="fit" class="heading">FIT</div>
first
<div id="er" class="content hide">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" class="content hide">erp </div>
<div id="style" class="heading">style</div>

Well you can do better this way:
$(document).ready(function(e) {
$("a").click(function (e) {
e.preventDefault; // <------------stop the default behavior
var ab = $(this).attr('href'); // <------better to use in terms of performance
$(ab).show().siblings('div:not(.heading)').hide();
});
});
Demo in action

Show/hide element based on clicked href of link

I am new to JavaScript and actually quite desperate by now
I have an HTML file that:
gets data from an XML file and displays them in various divs (e.g. )
these divs are hidden (by default) by a class name (class='box')
when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.
then I add a new class name ('show') - so that this element shows up!
If you run the code you will see that every time you click on a link a new div is displayed...
So current problems:
replace already shown divs with the new clicked ID so that only one div shows up every time.
How can I avoid inserting the onClick event in every single tag - and make this more automated?
My code is as follows:
function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);
document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";
document.getElementById(newlinkTo).className += " Show";
return true;
}
<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>
<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>

I'm not usually into using jQuery everywhere, but with it you could just do:
<a class='showContent' data='b0'/>
Your js:
var selected;
$('a.showContent').on('click',function(e){
var toShow = $(this).attr('data');
if(selected!==undefined) selected.removeClass('Show');
selected = $(div+'#'+toShow);
selected.addClass('Show');
});
Not sure if this is what you want, but thought I'd suggest it.

This sort of thing is not hard to do without jQuery.
I would recommend using a hash-bang (#!) for Javascript activated links to keep it separate from other possible links with hashes. (script is at the bottom)
<div id="nav-links">
<a href="#!b0">
<div id="text_content"> link2 </div>
</a>
<a href="#!b1">
<div id="text_content"> link 1 </div>
</a>
</div>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
<script type="text/javascript">
var links = document.getElementById('nav-links').getElementsByTagName('a');
for(var i = 0, link; link = links[i]; i++) {
link.onclick = showContent;
// Hide content divs by default
getContentDiv(link).style.display = 'none';
}
// Show the first content div
if(links.length > 0) showContent.apply(links[0]);
var current;
function showContent() {
// hide old content
if(current) current.style.display = 'none';
current = getContentDiv(this);
if(!current) return true;
//current.innerHTML = "This is where the xml variable content should go";
current.style.display = 'block';
return true;
}
function getContentDiv(link) {
var linkTo = link.getAttribute('href');
// Make sure the link is meant to go to a div
if(linkTo.substring(0, 2) != '#!') return;
linkTo = linkTo.substring(2);
return document.getElementById(linkTo);
}
</script>​

There is a WAY cleaner way to do this:
This is just my quick example, it can get EVEN cleaner than this, but this works for your case:
HTML:
link b0
link b1
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>​​​​​​​​​
CSS:
#b0 { display: none; }
#b1 { display: none; }
a, div.text_content { display: inline; padding: 0 10px; }
JQUERY:
​$('.link').click(function(){
var id = $(this).attr("rel");
$('#'+id).slideToggle('slow');
});
​
Each link would have to have a REL attribute that is the same as the ID of the div element that you are trying to show.
Here is a JSFiddle to this example in action:
http://jsfiddle.net/CUJSM/5/

on .bind('click') it is not deleting the first div

When I click on a particular div, that div should fade out, simple, but when I click on one of the divs it deletes the div on top of the stack, i.e. when I click #sel6 it removes sel5
HTML code
<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">
<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>
</div>
jQuery code
sel_id, sel_1 are variables
$('.selc_d').bind('click',function(){
var sel_id = $('.sel').attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});

$('.sel').bind('click',function(){
var sel_id = this.id; // replace this line using this.id or $(this).attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});
Note the use of this... this will contain the element that is clicked.
What you were doing was
var sel_id = $('.sel').attr('id');
Which will always select the first div with class sel in this case the div with id sel5
##WHAT YOU WANT##
<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">
<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>
</div>
$('.sel').bind('click',function(){
var sel_id = $(this).attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});

it looks like, you are trying something like this
$('.sel').bind('click', function(){
$this = $(this);
$this.fadeOut('slow', function(){$this.remove();});
$('.search_box').append(this.id);
});

That's because you are saying $('.sel')
You need to grab the one that is clicked, not any one that has that class. To make that work as you want, do this
$('.sel').click( function() {
var sel_id = $(this).attr('id');
$(this).fadeOut('slow');
// Wait for it to fade out before you remove it
setTimeout( function() {
$('#' + sel_id).remove();
}, 1000 );
$('.search_box:first').append(sel_id);
});