We Keep Coding

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');
}
}

How to store class name for repeatedly clicked tags in a list using java-script and jquery?

I'm creating a memory game using html, css and javascript whereby a user is asked to match a set of cards with each other. I'm currently stuck on extracting the cards class names, which represent card type, when the user clicks on them and store it in a list. I managed to store only one class name when the user clicks on a card, but when I tried it for next card and store class name in a list I failed. I tried using both for and while loops. here is my code:
HTML part for cards:
<li class="card">
<i class="car"></i>
</li>
<li class="card">
<i class="cat"></i>
</li>
<li class="card">
<i class="car"></i>
</li>
<li class="card">
<i class="cat"></i>
</li>
JavaScript part:
for (var i=0, i<2, i++) {
$(".card").click(function() {
clickedList[i] = $(this).children().attr("class");
});
}
Please note that I have clickedList as a global array.
What I really want to do as below:
click a card and store its class name in clickedList[0]
click another card and store its class name in clickedList[1]
compare clickedList[0] and clickedList[1] if they match or not

Get rid of the loop and use index() to index the elements
var clickedList={}
var $cards = $(".card").click(function() {
var cardIndex = $cards.index(this)
clickedList[cardIndex] = $(this).children().attr("class");
console.log(clickedList)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="card">
<i class="car">car</i>
</li>
<li class="card">
<i class="cat">cat</i>
</li>
<li class="card">
<i class="car">car</i>
</li>
<li class="card">
<i class="cat">cat</i>
</li>

Beginner getting addEventListener is not a function; no jQuery

I'm a super beginner and have successfully used addEventListener before, but for some reason it's generating a "addEventListener is not a function" error in Chrome right now. Here's my working JS file:
const cards = document.getElementsByClassName('card');
const cardList = ['fa-anchor','fa-bicycle','fa-bolt','fa-bomb','fa-cube', 'fa-diamong','fa-leaf','fa-paper-plane-o']
// Log starting variables
let moves = 0;
let matchesFound = 0;
let openList = [];
let matches = 0;
let counter = 0;
let rating = 3;
let timer = {
seconds: 0,
minutes: 0,
}
/*
* Display the cards on the page
* - shuffle the list of cards using the provided "shuffle" method below
* - loop through each card and create its HTML
* - add each card's HTML to the page
*/
//Generate a new game by shuffling the cards
function newGame(){
for (var i=0; i < 2; i++){
cardList = shuffle(cardList);
}
}
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
/*
* set up the event listener for a card. If a card is clicked:
* - display the card's symbol (put this functionality in another function that you call from this one)
* - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
* - if the list already has another card, check to see if the two cards match
* + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
* + if the cardaddEventListeners do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
* + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
* + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
*/
cards.addEventListener('click', function() {
console.log('Success!');
});
//Runs timer
//Clears timer
//Display card's symbol
function displayCard(){
card.addClass('open show');
};
//Add card to list of open cards
function openCard (){
};
//Check for matches in open list
function checkMatch(){
if (openList.length === 2) { //Make sure only two cards are open
if (openList[0] == openList[1]){ //Check that they're the same
lockMatch(); //Remove open and show classes, add match class
matchesFound.push(openList[0]); //Push the matched name to the list of matches found
}
}
};
//If match, lock in open position
function lockMatch(){
card.removeClass('open show');
card.addClass('match');
};
//If not a match, return to closed state
function noMatch(){
};
//Increment move counter
function incrementCounter(){
};
//If all cards are matched & open, display win message
function winMessage(){
};
Here's the associated HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">3</span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card open show">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>
Help?
(FWIW, I'm trying to create an event that reveals a symbol upon clicking one of the cards. This code is a WIP but I can't get past this error. I also CANNOT use jQuery for this.)

document.getElementsByClassName('card'); reutrns a list of elements that contain the class name card. So in order to set an onclick eventlistener to each of the elements use a for loop like this:
for(var i=0; i < cards.length; i++)
{
cards[i].onclick = function()
{
console.log('Success!');
}
}
Here is the code:
const cards = document.getElementsByClassName('card');
const cardList = ['fa-anchor','fa-bicycle','fa-bolt','fa-bomb','fa-cube', 'fa-diamong','fa-leaf','fa-paper-plane-o']
// Log starting variables
let moves = 0;
let matchesFound = 0;
let openList = [];
let matches = 0;
let counter = 0;
let rating = 3;
let timer = {
seconds: 0,
minutes: 0,
}
/*
* Display the cards on the page
* - shuffle the list of cards using the provided "shuffle" method below
* - loop through each card and create its HTML
* - add each card's HTML to the page
*/
//Generate a new game by shuffling the cards
function newGame(){
for (var i=0; i < 2; i++){
cardList = shuffle(cardList);
}
}
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
/*
* set up the event listener for a card. If a card is clicked:
* - display the card's symbol (put this functionality in another function that you call from this one)
* - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
* - if the list already has another card, check to see if the two cards match
* + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
* + if the cardaddEventListeners do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
* + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
* + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
*/
for(var i=0; i < cards.length; i++)
{
cards[i].onclick = function()
{
console.log('Success!');
}
}
//Runs timer
//Clears timer
//Display card's symbol
function displayCard(){
card.addClass('open show');
};
//Add card to list of open cards
function openCard (){
};
//Check for matches in open list
function checkMatch(){
if (openList.length === 2) { //Make sure only two cards are open
if (openList[0] == openList[1]){ //Check that they're the same
lockMatch(); //Remove open and show classes, add match class
matchesFound.push(openList[0]); //Push the matched name to the list of matches found
}
}
};
//If match, lock in open position
function lockMatch(){
card.removeClass('open show');
card.addClass('match');
};
//If not a match, return to closed state
function noMatch(){
};
//Increment move counter
function incrementCounter(){
};
//If all cards are matched & open, display win message
function winMessage(){
};
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">3</span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card open show">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>

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.

using bxslider, no slides till browser gets resized?

I have a problem with bxslider. I use javascript to show the slider only when the user clicks on a button. But when the slider is shown no slides are there? When resizing the browser the slides show up. I made a fiddle to show the effect
https://jsfiddle.net/Yq3RM/1051/
and here is the code
<a class="show_figures" id="show_figures" href="javascript:showOrHidefigure(0);" style="text-decoration: none;">
<b>
Show figures
</b>
</a>
<div id="figures" style="display: none">
<ul class="bxslider">
<li>
<img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/trees.jpg" />
</li>
</ul>
</div>
<script type='text/javascript'>
function showOrHidefigure(id_dummy) {
var div = document.getElementById('figures');
var button = document.getElementById('show_figures');
if (div.style.display == "block") {
div.style.display = "none";
button.innerHTML = "<b>Show figures</b>";
} else {
div.style.display = "block";
button.innerHTML = "<b>Hide figures</b>";
}
}
</script>
how can I make the slide show up without resizing the browser?
thanks
carl

I've updated your code a little, basically if you remove display: none from your container and hide it with javascript instead it allows bxslider to calculate the size of the images which I believe it only does after loading when the screen is resized.
https://jsfiddle.net/Yq3RM/1058/
HTML:
<a class="show_figures" id="toggle-figures" href="javascript:;">Show figures</a>
<div id="figures">
<ul class="bxslider">
<li>
<img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
</ul>
</div>
JS
var slider = $('.bxslider').bxSlider();
$('#figures').hide();
$('#toggle-figures').on('click', function() {
$('#figures').toggle();
if( $('#figures').is(':visible')) {
$(this).text('Hide figures');
}
else {
$(this).text('Show figures');
}
});
EDIT
Also just a note, don't use b the appropriate element is strong but in this case you should just apply font-weight: bold with css and also avoid using inline styles.