Develop Reference

jQuery document on change for checkboxes and select options doesn't work

I'm having trouble with a (document.ready) on change function. It should get triggered when checkboxes are checked or when option elements from a select field are selected.
Everything works just fine with only checkboxes but once I added the part for select it stopped working like it should. I guess it's just a minor change somewhere but I haven't found the source. If you check the snippet it should become more obvious. I would really appreciate some help. :/
jQuery(document).ready(function() {
/* Location Filter */
var $filterCheckboxes = $('input[type="checkbox"]');
$(document).on('change', 'input[type="checkbox"]', 'select', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
/* THIS PART IS PROBLEMATIC */
$('select option').filter(':selected').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
/* WITHOUT IT EVERYTHING IS FINE BUT ONLY CHECKBOXES WORK */
var $filteredResults = $('.location-wrap');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).attr('class').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.location-wrap').removeClass('location-show').hide();
$('.location-wrap').removeClass('location-show').filter($filteredResults).addClass('location-show').show();
});
}); // jQuery(document).ready(function()
.content-box .location-show::after {
content: '';
background-color: #000;
height: 1px;
margin: 30px 0;
clear: both;
display: block;
}
.content-box .location-show:last-child::after {
height: 0;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FORM -->
<div class="content-box">
<form id="location-options">
<label>
<input type="checkbox" name="location-option" value="ltype-snack-bar" id="ltype-snack-bar"> Snack Bar
</label>
<label>
<input type="checkbox" name="location-option" value="ltype-restaurant" id="ltype-restaurant"> Restaurant
</label>
<label>
<input type="checkbox" name="location-option" value="filter-cat-ice-cream-parlor" id="ltype-ice-cream-parlor"> Ice cream parlor
</label>
<select name="location-category" id="location-category">
<option value="">Category</option>
<option value="filter-cat-a">Category A</option>
<option value="filter-cat-a">Category B</option>
<option value="filter-cat-a">Category C</option>
</select>
</form>
<!-- ELEMENTS READY FOR FILTERING -->
<div class="location-wrap location-show ltype-snack-bar filter-cat-a">
<h3>Snack Bar</h3>
<p>Some address2</p>
<p>Some description</p>
</div>
<div class="location-wrap location-show ltype-restaurant filter-cat-b">
<h3>Restaurant #1</h3>
<p>Some address</p>
<p>Some description</p>
</div>
<div class="location-wrap location-show ltype-ice-cream-parlor filter-cat-b">
<h3>Ice cream parlor</h3>
<p>Some address</p>
<p>Some description</p>
</div>
<div class="location-wrap location-show ltype-restaurant filter-cat-c">
<h3>Restaurant #2</h3>
<p>Some address</p>
<p>Some description</p>
</div>
</div>

Input value not updating on page when changed

I have to do a web page for school that converts temperature between celsius and fahrenheit.
I tried to make it with 2 input boxes that change value based on the value of the other input box, when I write something on one of the input boxes for the first time it works, but then even though on the code the value changes, on the page it doesn't appear.
I am new to javascript and html in general and I don't know what I'm doing wrong.
This is the code:
function cambiagradi(x,y) {
if (document.getElementById(x).value == "Centigradi") {
document.getElementById(y).value = "Fahrenheit";
}
else {
document.getElementById(y).value = "Centigradi";
}
}
function Conversione(from,to,gradi) {
var x = document.getElementById(from).value;
if (document.getElementById(gradi).value == "Centigradi") {
document.getElementById(to).setAttribute("value", (x-32)*5/9);
}
else {
document.getElementById(to).setAttribute("value", (x*9/5)+32);
}
}
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: #008080;">
<h1 style="text-align:center">Convertitore Temperatura</h1>
<div class="container" style="display:flex; justify-content: center">
<div style=" padding: 1%; ">
<p>
<input type="text" id="box1" oninput="Conversione('box1','box2','Gradi2')">
</p>
<p style="margin-left:10%">
<label for="Gradi1">Gradi</label>
<select id="Gradi1" onchange="cambiagradi('Gradi1','Gradi2')">
<option value="Centigradi">Centigradi</option>
<option value="Fahrenheit">Fahrenheit</option>
</select>
</p>
</div>
<div style=" padding: 1%; ">=</div>
<div style=" padding: 1%; ">
<p>
<input type="text" id="box2" oninput="Conversione('box2','box1','Gradi1')">
</p>
<p style="margin-left:10%">
<label for="Gradi2">Gradi</label>
<select id="Gradi2" onchange="cambiagradi('Gradi2','Gradi1')">
<option value="Fahrenheit">Fahrenheit</option>
<option value="Centigradi">Centigradi</option>
</select>
</p>
</div>
</div>
</body>
</html>
Thanks in advance!

You should just set the value of the element and all would work as expected.
The explanation you can find here.
function Conversione(from, to, gradi) {
const x = document.getElementById(from).value;
if (document.getElementById(gradi).value == "Centigradi") {
document.getElementById(to).value = ((x - 32) * 5) / 9;
} else {
document.getElementById(to).value = (x * 9) / 5 + 32;
}
}

Some explanations within the code. Tell me if you need more. It looks more complicated but it avoids inline JavaScript which is good :)
// Define your elements as variables first as you're going to use them multiple times :
const gradi1 = document.getElementById("Gradi1");
const gradi2 = document.getElementById("Gradi2");
const box1 = document.getElementById("box1");
const box2 = document.getElementById("box2");
// Now, always use gradi1, gradi2, box1 and box2 instead of document.getElementById ....
// Then, avoid INLINE JavaScript ! (onchange="")
// We're gonna add 'event listener' to your elements
gradi1.addEventListener("change", function(){
cambiagradi(this); // 'this' means you'll know which element triggered the event when calling the function
}, false);
gradi2.addEventListener("change", function(){
cambiagradi(this);
}, false);
box1.addEventListener("input", function(){
Conversione(this)
}, false);
box2.addEventListener("input", function(){
Conversione(this)
}, false);
// You passed 'this' previously, so its back here with the name you want (ex: ancora_this)
function cambiagradi(ancora_this) {
if (ancora_this.id == "Gradi1") {
if (ancora_this.selectedIndex == 0) { // 'selectedIndex' means selected option position in the dropdown menu (begins at 0)
gradi2.selectedIndex = 1;
} else {
gradi2.selectedIndex = 0;
}
} else {
if (ancora_this.selectedIndex == 1) {
gradi1.selectedIndex = 0;
} else {
gradi1.selectedIndex = 1;
}
}
}
function Conversione(ancora_this) {
var target, conv, unit;
if (ancora_this.id == "box1") {
target = box2;
unit = gradi1;
} else {
target = box1;
unit = gradi2;
}
if (unit.selectedIndex == 0) {
conv = (Number(ancora_this.value) * 9/5) + 32;
} else {
conv = (Number(ancora_this.value) - 32)*5/9;
}
target.value = conv;
}
body {
background-color: #008080
}
h1 {
text-align: center
}
.container {
display: flex;
justify-content: center
}
.container div {
padding: 1%;
}
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Convertitore Temperatura</h1>
<div class="container">
<div>
<p>
<!-- type="number" is better because it only allows numbers -->
<input type="number" id="box1">
</p>
<p style="margin-left:10%">
<label for="Gradi1">Gradi</label>
<select id="Gradi1">
<option value="Centigradi" selected>Centigradi</option>
<option value="Fahrenheit">Fahrenheit</option>
</select>
</p>
</div>
<div>=</div>
<div>
<p>
<input type="number" id="box2">
</p>
<p style="margin-left:10%">
<label for="Gradi2">Gradi</label>
<select id="Gradi2">
<!-- I switched the order to have the same 'index' on both SELECT menus
Also, I added 'selected' to have a default selected unit at start -->
<option value="Centigradi">Centigradi</option>
<option value="Fahrenheit" selected>Fahrenheit</option>
</select>
</p>
</div>
</div>
</body>
</html>

Target two fields when searching

I have this layout:
<input id="search">
<div class="entry">
<div class="title">hello</div>
<div class="description">lorem</div>
</div>
<div class="entry">
<div class="title">ipsum</div>
<div class="description">test</div>
</div>
And I allow users to search the entry divs by the content of the title div:
jQuery(document).ready(function() {
jQuery("#search").on("keyup click input", function () {
var val = jQuery(this).val();
if (val.length) {
jQuery(".entry").hide().filter(function () {
return jQuery('.title',this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
}).show();
}
else {
jQuery(".entry").show();
}
});
});
Works great. Try jsFiddle.
My question is, how do I make it so the search targets both the content of the title div and the description field?

If you want it to search for both title and description use this.
return jQuery('.title, .description',this)
Then it will look like
jQuery(".entry").hide().filter(function () {
return jQuery('.title, .description',this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
}).show();
Here is a link so you can test it.

In the filter function, you can add an OR condition that can check the description and filter results on title or description.
jQuery(document).ready(function() {
jQuery("#search").on("keyup click input", function() {
var val = jQuery(this).val();
if (val.length) {
jQuery(".entry").hide().filter(function() {
return jQuery('.title, .description', this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
}).show();
} else {
jQuery(".entry").show();
}
});
});
.entry {
background: #fff;
margin-bottom: 10px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">
<div class="entry">
<div class="title">hello</div>
<div class="description">lorem</div>
</div>
<div class="entry">
<div class="title">ipsum</div>
<div class="description">test</div>
</div>

setInterval() not working with src linked images in HTML

New coder - 1st question here. I'm doing first free code camp project, but question is about a unrequired flourish I just want to add and learn about, it's not needed for project. I want the album covers I've linked in HTML to change every x seconds. But nothing happens yet. Images just stay static. Thanks
<h2> Discography </h2>
<div class="row">
<div id="album" class="col-lg-8">
<div class="albums" id="album 0"> <span><img src="https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg" alt="1994" class="img-responsive"></span></div>
<div class="albums" id="album 1"> <span><img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg" alt="1995" class="img-responsive"></span></div>
<div class="albums" id="album 2"> <span><img src="https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg" alt="1997" class="img-responsive"></span></div>
<div class="albums" id="album 3"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg" alt="1998" class="img-responsive"></span></div>
<div class="albums" id="album 4"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg" alt="2000" class="img-responsive"></span></div>
<div class="albums" id="album 5"> <span><img src="https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" alt="2004" class="img-responsive"></span></div>
<div class="albums" id="album 6"> <span><img src="https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg" alt="2007" class="img-responsive"></span></div>
</div>
and the javascript code
//Change album cover after 5 seconds - continous loop//
var Discography = document.getElementById("album");
var disc = ["album 0", "album 1", "album 2", "album 3", "album 4", "album 5", "album 6"];
var counter = 0;
function changeDisc() {
if (counter >= disc.length) {
counter = 0;
}
Discography.setAttribute =disc[counter];
counter++;
}
var myCounter = setInterval(changeDisc, 6000);
Discography.onClick = function() {
clearInterval(Disography);
Discography.innerHTML = "Counter stopped";
};

You aren't actually setting the attribute. You are actually removing the setAttribute method and replacing it with the url. I think you want this:
function changeDisc() {
if (counter >= disc.length) {
counter = 0;
}
Discography.setAttribute('src', disc[counter]);
counter++;
}

I managed to get your code working. I don't know if this is what you wanted, but I hope it helped you.
Assign Attributes
Discography.setAttribute = disc[counter];
Should be
Discography.setAttribute("src", discs[counter]);
Bind EventHandlers
Discography.onClick = function() {
Should be
Discography.addEventListener("click", function () {
Wrong Element
You tried to assign the src attribute to the <div id="album" class="col-lg-8"> which is a div and it does not have that attribute.
To fix this I added all possible album images to a Array and this will be assigned to a single <img /> to get this working.
Note that I modified some naming conventions, which I do prefer.
My Solution
var discs = [
"https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg",
"https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg",
"https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg",
"https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg",
"https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg",
"https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" ,
"https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg",
];
var counter = 0;
var discography = document.getElementById("album");
function moveToNextDisc() {
if (counter >= discs.length) {
counter = 0;
}
discography.setAttribute("src", discs[counter]);
counter++;
}
var interval = setInterval(moveToNextDisc, 1000);
discography.addEventListener("click", function () {
clearInterval(interval);
discography.innerHTML = "Counter stopped";
});
<h2>Discography</h2>
<div class="row">
<div class="col-lg-8">
<div class="albums">
<span>
<img id="album" alt="1994" class="img-responsive">
</span>
</div>
</div>
</div>

for learning purpose, you are developing a component that:
changes cover every track change
stops when the user pauses
Javascript should be used for business logic and html/css as a view reflection of the state of the component.
So we need for an Object which has at least three methods:
public play starts the player
public pause pauses the player
private _loop iterates through the tracks
and for a Controller which controls the html view.
function Player(element, interval) {
this.element = element;
this.tracks = element.querySelectorAll('.albums');
this.currentTrack = null;
this.isPlaying = false;
this._timeout = null;
this.interval = Number(interval) || 2000;
}
Player.prototype.pause = function() {
window.clearTimeout(this._timeout);
this.isPlaying = false;
return this;
};
Player.prototype.play = function() {
this.isPlaying = true;
return this._loop();
};
Player.prototype._loop = function() {
var self = this;
self._timeout = window.setTimeout(function() {
var track;
if(self.currentTrack) {
track = self.currentTrack.nextElementSibling;
self.currentTrack.style.opacity = 0;
}
if(!track) {
track = self.tracks[0];
}
track.style.opacity = 1;
self.currentTrack = track;
return self._loop();
}, self.interval);
return this;
}
/** VIEW CTRL **/
function PlayerCtrl() {
var element = document.querySelector('#album');
var player = new Player(element, 3000);
var play = document.querySelector('#Play');
var pause = document.querySelector('#Pause');
play.onclick = function() {
return player.isPlaying || player.play();
};
pause.onclick = function() {
return player.isPlaying && player.pause();
};
player.play();
}
document.addEventListener('DOMContentLoaded', PlayerCtrl);
#album {
width: 300px;
height: 300px;
margin: 10px auto;
overflow: hidden;
background: lightcoral;
position: relative;
border: 3px dotted #333;
}
.albums {
transition: 450ms opacity linear;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.albums img { max-width: 100%; }
<button id="Play">Play</button>
<button id="Pause">Pause</button>
<hr />
<h2> Discography </h2>
<div class="row">
<div id="album" class="col-lg-8">
<div class="albums" id="album 0"> <span><img src="https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg" alt="1994" class="img-responsive"></span></div>
<div class="albums" id="album 1"> <span><img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg" alt="1995" class="img-responsive"></span></div>
<div class="albums" id="album 2"> <span><img src="https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg" alt="1997" class="img-responsive"></span></div>
<div class="albums" id="album 3"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg" alt="1998" class="img-responsive"></span></div>
<div class="albums" id="album 4"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg" alt="2000" class="img-responsive"></span></div>
<div class="albums" id="album 5"> <span><img src="https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" alt="2004" class="img-responsive"></span></div>
<div class="albums" id="album 6"> <span><img src="https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg" alt="2007" class="img-responsive"></span></div>
</div>

Icon size changes on shift

I want to shift the whole div to left on click of button but I want to fix the size now size changes on shift. I want to click on Sync button and it should move left.
I am using Jquery.
Following is the whole Code
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$('button').click(function () {
$('.error').stop().fadeIn(400).delay(3000).fadeOut(400); //fade out after 3 seconds
});
</script>
<script type="text/javascript">
window.onload=function(){
populatedropdown( "monthdropdown", "yeardropdown")
}
</script>
<script type="text/javascript">
var monthtext=['Month','01','02','03','04','05','06','07','08','09','10','11','12'];
var yeartext=['Year','2015','2014','2013','2012','2011','2010','2009','2008','2007','2006','2005','2004','2003','2002','2001','2000'];
function populatedropdown( monthfield, yearfield){
var today=new Date();
var monthfield=document.getElementById(monthfield);
var yearfield=document.getElementById(yearfield);
for (var m=0; m<=12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
// monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) ;//select today's month
var thisyear=today.getFullYear();
// yearfield.options[0]= Year;
for (var y=0; y<17; y++){
//yearfield.options[y]=new Option(thisyear, thisyear);
yearfield.options[y]=new Option(yeartext[y], yeartext[y]);
thisyear-=1;
}
// yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true); //select today's year
}
</script>
<script type="text/javascript">
$(function () {
$("#drop").change(function () {
selectedText = $(this).find("option:selected").text();
if(selectedText != "RBSK")
{
alert("Test available for RBSK only");
}
msg="";
});
});
$(function () {
$("#monthdropdown").change(function () {
selectedText_month="Month";
selectedText_month = $(this).find("option:selected").text();
if(selectedText_month == "Month")
{
alert("Please Choose Month");
}
console.log("month is--" + selectedText_month);
});
});
$(function () {
$("#yeardropdown").change(function () {
selectedText_year="Year";
selectedText_year = $(this).find("option:selected").text();
if(selectedText_year == "Year")
{
alert("Please Choose Valid Year");
}
console.log("year is--" + selectedText_year);
});
});
console.log("period: "+selectedText_year+selectedText_month);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#Submit').click(function () {
$('#content').animate({
'marginLeft': "-=600px" //moves left
});
});
$('#Submit').click(function () {
$('#myHeader').animate({
'marginTop': "-=250px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe').animate({
'marginTop': "-=450px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe2').animate({
'marginTop': "-=450px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe1').animate({
'marginTop': "-=950px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe3').animate({
'marginTop': "-=970px" //moves left
});
});
// $('#Submit').click(function () {
// $('#img').show();
//
// $.ajax({
//
//
//
// success: function (result) {
// $('#img').hide();
// }
//
// });
// });
});
</script>
<style>
h2 {
text-align: center;
}
body {
background-color: lightblue;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form id="From1" method="post">
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="js/xmlimg.png" style="width:180px; height:160px"; align="left">
<img src="js/loading.gif" id="img" style="display:none" align="center"/>
</div>
<div id="content"style="display: block">
<h2 >Welcome</h2>
<br>
<p style="font-size:150%;margin-left:39%" > Sources :
<select id="drop" name="drop">
<option value="0">Select Source</option>
<option value="1">RBSK</option>
<option value="2">MIDRS</option>
<option value="3">ATM </option>
<option value="4">RT </option>
</select>
<p style="font-size:150%;margin-left:40%"; >Period :
<form>
<form action="" name="someform">
<select id="monthdropdown"></select>
<select id="yeardropdown"></select>
<br> <br>
<button type="button" class="btn btn-primary btn-lg" style= " margin-left: 13% " id="Submit" name="Submit" onclick="prepareDataValueSet()">SYNC
</button>
</form>
</form>
</div>
<h4 id="myHeader" style="text-align:right; margin-top:10%; margin-right:20%; color: indianred"></h4>
<h4 id="qwe" style="text-align: right; margin-top:15%; margin-right:10%;color: dodgerblue"></h4>
<h4 id="qwe2" style="text-align: right; margin-top:20%; margin-right:10%;color: dodgerblue"></h4>
<h4 id="qwe1" style="text-align: right; margin-top:55%; margin-right:4%;color: darkgreen"></h4>
<h4 id="qwe3" style="text-align: right; margin-top:55%; margin-right:4%;color: darkgreen"></h4>
</div>
</form>
</body>
</html>