Develop Reference

Why is this.value undefined when getting value of images?

New to coding, please be gentle. This has to be done with pure JavaScript, due to limitations by our class. At the moment, all I'm trying to do is console.log() the value of the image clicked by the user. In this instance, it's either value="0" for "Rock", value="1" for "Paper" or value="2" for "Scissors". I'm unexperienced with using this.value, and I'm wondering if I can pass the value of the clicked image as a parameter to the function called "check()".
HTML
<img src="img/rock.png" alt="Rock" id="rock" value="0" onclick="check(this.value)">
<img src="img/paper.png" alt="Paper" id="paper" value="1" onclick="check(this.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" value="2" onclick="check(this.value)">
JavaScript (no jQuery)
function check(inputValue) {
console.log(inputValue);
}
I expect the output to be either 0, 1 or 2 depending on which image was clicked by the user. At the moment, all I'm getting is undefined.

Because images don't have a value attribute, this will always come back as undefined. An alternative would be to use a data attribute. These can be retrieved using this.dataset.<attributeName>.
For example, data-value would be accessed by doing this.dataset.value.
function check(inputValue) {
console.log(inputValue);
}
<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this.dataset.value)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this.dataset.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this.dataset.value)">

Images don't have a value attribute. You'd probably be better off using a data attribute.
function check(inputValue) {
console.log(inputValue.dataset.value);
}
<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this)">

How to show a list of random image via click event?

I have coded a basic php web page where I want random images from my images folder to be displayed once a button has been clicked.
However no images are being displayed and I cannot find the issue with my code.
var myImg = ["fruit1.jpg", "fruit2.jpg", "fruit3.jpg", "fruit4.jpg", "fruit5.jpg", "fruit6.jpg"];
function displayImage() {
var num = Math.floor(Math.random() * 6);
document.picture.src = myImg[num];
}
<div class="wrapper">
<div class="boxa">A1
<input onclick="displayImage();" type=button value="Display Random Image">
<img src="" name="picture" />
</div>
<div class="boxb">B
<input onclick="displayImage();" type=button value="Display Random Image">
<img src="" name="picture" />
</div>
<div class="boxc">C
<input onclick="displayImage();" type=button value="Display Random Image">
<img src="" name="picture" />
</div>
</div>

document.picture.src doesn't exist.
When you click on the <input>, you want to access the <img ...> and that's the nextElementSibling. Therefore, you need an argument in the function, too.
Example
var myImg = ["fruit1.jpg", "fruit2.jpg", "fruit3.jpg", "fruit4.jpg", "fruit5.jpg", "fruit6.jpg"];
function displayImage(el) {
var num = Math.floor(Math.random() * 6);
el.nextElementSibling.src = myImg[num];
}
<div class="wrapper">
<div class="boxa">A1
<input onclick="displayImage(this);" type=button value="Display Random Image">
<img src="" name="picture" />
</div>
<div class="boxb">B
<input onclick="displayImage(this);" type=button value="Display Random Image">
<img src="" name="picture" />
</div>
<div class="boxc">C
<input onclick="displayImage(this);" type=button value="Display Random Image">
<img src="" name="picture" />
</div>
</div>
A better generic solution would be
var myImg = ["fruit1.jpg", "fruit2.jpg", "fruit3.jpg", "fruit4.jpg", "fruit5.jpg", "fruit6.jpg"];
var selector = "div[class^=box] input";
function El(selector) {
return document.querySelectorAll(selector);
}
function setRandImg(img, images) {
var rand = Math.floor(Math.random() * images.length);
img.src = images[rand];
}
function addEventListeners(els, type, fn) {
for (var i = 0; i < els.length; i += 1) {
var el = els[i];
el.addEventListener(type, fn);
}
}
function displayImg() {
setRandImg(this.nextElementSibling, myImg);
}
addEventListeners(El(selector), "click", displayImg);
<div class="wrapper">
<div class="boxa">A1
<input type=button value="Display Random Image">
<img src="" name="picture" />
</div>
<div class="boxb">B
<input type=button value="Display Random Image">
<img src="" name="picture" />
</div>
<div class="boxc">C
<input type=button value="Display Random Image">
<img src="" name="picture" />
</div>
</div>

Angular image gallery with ng repeat

I want to change the following image from a thumbnail.
Here is the code:
<input type="radio" name="slide_switch" id="{{$index+1}}" ng-model="g" ng-repeat="gallery in Blog.GalleryImageList"/>
<label for="{{$index+1}}" ng-model="g">
<img ng-repeat="gallery in Blog.GalleryImageList" ng-src="{{gallery}}" width="100" height="50" class="col-md-2"/>
</label>
<img ng-repeat="gallery in Blog.GalleryImageList" ng-src="{{gallery}}" class="img-responsive img-rounded ImgSize"/>

Displaying different Images with multiple buttons in Javascript

I'm a newbie to Javascript and I'm trying to put together a program that displays one image at a time, and when a different button is pressed a new image is shown to replace the old one. I'm hoping that you all could help me out with this one!
Here's what I have so far:
<html>
<body>
<p>My favorite Beers!</p>
<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg() {
var obj = document.getElementById('picture1','picture2','picture3','picture4','picture5','picture6','picture7','picture8','picture9','picture10');
obj.className = 'show';
}
</script>
<body>
<img id="picture1" src="lost abbey.png"class="show">
<input type="button" onclick = "showImg()" value= "Lost And Found">
<img id="picture2" src="stone-gtipa-bottle.jpg" class="hide">
<input type="button" onclick = "showImg('stone-gtipa-bottle.jpg')" value= "Green Tea IPA">
<img id="picture3" src="belching beaver.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Belching Beaver">
<img id="picture4" src="boardwalk_insta.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Karl Strauss">
<img id="picture5" src="el conquistador epa.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Mission Brewery">
<img id="Picture6" src="fallbrook.png" class="hide">
<input type="button" onclick = "showImg()" value= "Fallbrook Brewery">
<img id="Picture7" src='gordon biersch golden ale.jpg' class="hide">
<input type="button" onclick = "showImg()" value= "Gordon Biersch">
<img id="Picture8" src="grumpy bear.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Grizzly Paw">
<img id="Picture10" src="Moderntimes.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Modern Times">
<img id="Picture9" src="lost-abbey-agave-maria1.png" class="hide">
<input type="button" onclick = "showImg()" value= "Agave Maria">
</body>
</html>

You can do this in a better way (don't predefine all the images and don't set them all to hide, but whatever, the following script and HTML will do more or less what you want.
<script>
function showImg( id ) {
// hide previously shown image
for ( i = 1; i < 10; i++) {
var obj = document.getElementById( "picture" + i );
if (obj != null)
obj.className = 'hide';
}
var obj = document.getElementById( "picture" + id );
if (obj != null)
obj.className = 'show';
}
</script>
<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<p>My favorite Beers!</p>
<img id="picture1" src="lost abbey.png" title="1" class="show">
<input type="button" onclick="showImg(1);" value="Lost And Found">
<img id="picture2" src="stone-gtipa-bottle.jpg" title="2" class="hide">
<input type="button" onclick="showImg(2);" value="Green Tea IPA">
<img id="picture3" src="belching beaver.jpg" title="3" class="hide">
<input type="button" onclick="showImg(3);" value= "Belching Beaver">
<img id="picture4" src="boardwalk_insta.jpg" title="4" class="hide">
<input type="button" onclick = "showImg(4)" value= "Karl Strauss">
<img id="picture5" src="el conquistador epa.jpg" title="5" class="hide">
<input type="button" onclick = "showImg(5)" value= "Mission Brewery">
<img id="picture6" src="fallbrook.png" class="hide">
<input type="button" onclick = "showImg(6)" value= "Fallbrook Brewery">
<img id="picture7" src='gordon biersch golden ale.jpg' class="hide">
<input type="button" onclick = "showImg(7)" value= "Gordon Biersch">
<img id="picture8" src="grumpy bear.jpg" class="hide">
<input type="button" onclick = "showImg(8)" value= "Grizzly Paw">
<img id="picture10" src="Moderntimes.jpg" class="hide">
<input type="button" onclick = "showImg(10)" value= "Modern Times">
<img id="picture9" src="lost-abbey-agave-maria1.png" class="hide">
<input type="button" onclick = "showImg(9)" value= "Agave Maria">
An alternative, would be to have a single <img> anchor, and then the buttons would change the src of the <img> based on what the <input type="button" onclick="showImg();>" sends in as src rather than a number.
My goal has been to make a solution which is closely based on what you already have.

js jquery searching and leaving visible when typing name

I have this code in my html:
<form>
<div style="width:530px; height:220px; overflow-y:scroll;">
<div class="people">
<label class="checkbox_1" for="1">
<img src="1.jpg" />
<span>
Jolly Bob Monumir
</span>
</label>
<input type="checkbox" name="people[]" value="1" id="1" />
</div>
<div class="people">
<label class="checkbox_1" for="2">
<img src="2.jpg" />
<span>
Jonathan Monumir
</span>
</label>
<input type="checkbox" name="people[]" value="2" id="4" />
</div>
<div class="people">
<label class="checkbox_1" for="3">
<img src="3.jpg" />
<span>
Misoury Crow
</span>
</label>
<input type="checkbox" name="people[]" value="3" id="3" />
</div>
<div class="people">
<label class="checkbox_1" for="4">
<img src="4.jpg" />
<span>
Michael Crow
</span>
</label>
<input type="checkbox" name="people[]" value="4" class="checkbox_1" id="4" />
</div>
</div>
</form>
After page loads whole form should be displayed. Now I would like to have inputbox and when I type in this box letters names of people it should automatically leave visible those names (divs with classes "people") which contain letters I type.
Example: I type "Jo", divs with Jolly Bob Monumir and Jonathan Monumir should be displayed and other should stay hidden. Then when I type "Cro", Misoury Crow and Michael Crow should be visible., etc. How can I do this with jquery? thanks in advance
UPDATE:
I found this and it works like a charm!
$('#search-criteria').on('keyup', function(){
$('div.people').hide();
var txt = $('#search-criteria').val();
$('div.people').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show();
}
});
});

I think you are looking for something like autocomplete of jqueryui.

I added a input field where you type:
<input type="text" id="people_name">
and jQuery code is:
$('input#people_name').on('keyup', function() {
var value = this.value.trim();
if(value.length) {
$('div.people span').filter(function() {
return new RegExp(value, 'i').test($(this).text());
}).closest('div.people').show();
} else $('div.people').hide();
});
DEMO
NOTE: You may use any autocomplete plugin.

UPDATE:
I found this and it works like a charm!
$('#search-criteria').on('keyup', function(){
$('div.people').hide();
var txt = $('#search-criteria').val();
$('div.people').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show();
}
});
});