We Keep Coding

How to check width and height from all images has been called by jquery?

i have a problem on jquery image, which i need validate all image has been clicked or show with jquery
here is my code, how i add new images and show the images
<script>
true_image = false;
var _URL = window.URL || window.webkitURL;
$(document).ready(function(){
var abc = 0;
var wrapper = $(".images");
var add_button = $("#add_more");
var x = 1;
$(add_button).click(function(){
x++;
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field" id="remove_image'+x+'"></img><div>');
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
});
$('body').on('change', '#file_input', function() {
var image ;
if (this.files && this.files[0]) {
image = new Image;
image.onload =function() {
console.log("width : "+this.width+" height: "+this.height);
if(this.width < 700 || this.height < 650){
alert("The image width is " +this.width + " and image height is " + this.height +", minimum image width is 700 pixel and height is 650 pixel");
$("#submit").prop("disabled",true);
}else{
$("#submit").prop("disabled",false);
}
};
image.src = _URL.createObjectURL(this.files[0]);
if(true_image == true){
abc += 1;
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).after("<div id='abcd" + abc + "' class='abcd'></div><img class='images_view' width='300' height='200' id='previewimg" + abc + "' src=''/>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd" + abc).append($("<img/>", {
id: 'img',
src: '<?=base_url('asset/images/BG/close.png')?>',
alt: 'delete'
}).click(function() {
$(this).parent().parent().remove();
if(($('#file_input').val()) == undefined){
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
}
}));
}
}
});
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
$('.remove_field').hide();
};
$('body').on('click', '.images_view', function() {
abc += 1;
var cover = false;
var image_id = this.id;
$('.images_view').filter(function( index ) {
if($( this ).attr( "id" ) === image_id){
$(this).parent().find('#file_input').attr('name','cover');
$(this).parent().find('#cover').remove();
$(this).parent().append("<span class='cover' id='cover'>Cover</span>");
}else{
$(this).parent().find('#file_input').attr('name','file[]');
$(this).parent().find('#cover').remove();
}
})
});
});
</script>
from the above code, i trying to upload multi images so i add a button, and after it was clicked a new <input id="file_input" class="images_file" type="file" name="file[]"/> will be added, than after an images has been selected it could show the images. i want trying to validate the file is an image file, width and height on the image
my problem are, if i selected the false image (not in criteria) the button will be disabled but if in the next select, i choose the true image the button back to normal. I know this will happen because i don't check the old images that has been selected before, and that is my problem i don't know how to check it.
guys can you help me how to solve the problem?

there are so many bugs going on around here :)
first of all;
var add_button = $("#add_more");
var x = 1;
$(add_button).click(function(){
you should do this instead (add_button is assigned already as jQuery object):
add_button.click(function(){
when you click add_button you insert many file inputs with the same id:
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field"></img><div>');
and you are calling many inputs by assigning here:
$('body').on('change', '#file_input', function() {
so it will trigger more than once for the same ids. and also it won't work as properly if multiple files selected in a single input because you only check the first one here:
if (this.files && this.files[0]) {
as mentioned in comments, you should break down this code and in my suggestion you should write it from scratch..

First of all I want to say sorry, for my code is not clear.
I got the answer for my problem and some code will be changed, and new code will be added
I used JavaScript localStorage to save the the images data so, I could check the last images that has been loaded.
here is how i checked my images with localStorage
function check_image() {
var images_log = JSON.parse(localStorage.getItem("images"));
var type_reg = /^image\/(jpg|png|jpeg)$/;
if(images_log != ""){
for(var i=0;i<images_log.length;i++) {
if(images_log[i]['type'] != undefined){
if(!type_reg.test(images_log[i]['type'])){
$("#submit").prop("disabled", true);
break;
}else{
$("#submit").prop("disabled", false);
}
}
if (images_log[i]['width'] < 700 && images_log[i]['height'] < 650) {
$("#submit").prop("disabled", true);
break;
}else{
$("#submit").prop("disabled", false);
}
}
}else{
$("#submit").prop("disabled", false);
}
}
For the all code i write in question i will explain it part by part.
<script>
var _URL = window.URL || window.webkitURL;
$(document).ready(function(){
localStorage.clear();
var abc = 0;
var wrapper = $(".images");
var add_button = $("#add_more");
var x = 1;
$(add_button).click(function(){
x++;
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field" id="remove_image'+x+'"></img><div>');
}); //added a new input file and delete button
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
if(($('#file_input').val()) == undefined){
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
}
}); //if the delete button clicked, it will remove the input and the delete button
From that part I made a simple button for new input file, which when it clicked a new <input type="file"> will be added, and there is a new button to remove the <input type="file">.
This Part is how the images will be call to be loaded, and add new div for the images.
$('body').on('change', '#file_input', function() {
var image = new Image ;
if (this.files && this.files[0]) {
//i add new var to check the file type
var type = this.files[0].type; // received the type of the file;
var type_reg = /^image\/(jpg|png|jpeg)$/; //for validate the file type
abc += 1;
//this var already loaded in top of script which for sign the image delete button id, and the images id
$(this).after("<div id='delete_image" + abc + "' class='delete_image'></div><img class='images_view' width='300' height='200' id='previewimg" + abc + "' src=''/>");
//add a new div class for the images.
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
// for showing the images by call imageIsLoaded function, and hide the <input type="file">
And this part is for deleting the images, if the delete_image id is clicked it will remove the images and <input type="file"> than remove the images_id from the localStorage;
$("#delete_image" + abc).append($("<img/>", {
id: 'img',
src: '<?=base_url('asset/images/BG/close.png')?>',
alt: 'delete'
}).click(function() {
var preview_id = $(this).parent().parent().find('.images_view').attr('id');
var images_log = JSON.parse(localStorage.getItem("images"));
if(images_log != "null" || images_log != null || images_log.length != 0){
for (i=0;i<images_log.length;i++){
if(preview_id == images_log[i]['id']){
images_log.splice(i,1)
}
}
}
localStorage["images"] = JSON.stringify(images_log);
$(this).parent().parent().remove();
if(($('#file_input').val()) == undefined){
$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
}
check_image();
}));
Here is for the validation.
//here i changed my code how i disabled the button from on this to call a check_image() function and start using localStorage
if (type_reg.test(type)) { //check the file is an images file with jpg, png and jpeg
image.onload = function() {
//get the last localstorage and added it if a new images
var images_arr = localStorage.getItem("images");
var obj = [];
if(images_arr){
obj= JSON.parse(images_arr);
}
obj.push({"id": "previewimg" + abc, 'width' : this.width,'height' : this.height});
localStorage.setItem("images",JSON.stringify(obj));
//checked the image height and width showing the alert, and call the check_image() function
if(this.width < 700 && this.height < 650){
alert("The image width is " +this.width + " and image height is " + this.height +", minimum image width is 700 pixel and height is 650 pixel, Please use another image!");
check_image();
}else{
check_image();
}
};
} else {
alert('This file type is unsupported.');
var images_arr = localStorage.getItem("images");
var obj = [];
if(images_arr){
obj= JSON.parse(images_arr);
}
obj.push({"id": "previewimg" + abc, 'type' : this.files[0].type});
localStorage.setItem("images",JSON.stringify(obj));
check_image();
}
image.src = _URL.createObjectURL(this.files[0]);
}
}); //end for ('body').on('change', '#file_input', function()
For load the images :
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result).parent().find('.remove_field').remove();
}
That's all how I upload multiple images, showing the images before uploaded and validation the file.
I'm sorry, if this code is too long because I feel sorry at first time I don't write the code too clear, So here I explain how my code worked

Javascript Next and Previous images

Code is supposed to show next image when clicking on next arrow and previous image when clicked on previous arrow. It does not work though. (error occurs while assigning img.src=imgs[this.i]; it says Cannot set property 'src' of null
at collection.next) .
Javascript code :
var arr = new collection(['cake.png', 'image2.png', 'image3.png', 'image1.png']);
function collection(imgs) {
this.imgs = imgs;
this.i = 0;
this.next = function(element) {
var img = document.getElementById('element')
this.i++;
if (this.i == imgs.length) {
this.i = 0;
}
img.src = imgs[this.i].src;
}
this.prev = function(element) {
var img = document.getElementById('element');
this.i--;
if (this.i < 0) {
this.i = imgs.length - 1;
}
img.src = imgs[this.i].src;
}
}
<!DOCTYPE html>
<html>
<head>
<title>photos</title>
<script src="photos.js"></script>
</head>
<body>
<input type='button' value='<' name='next' onclick="arr.next('mainImg')" />
<img id='mainImg' src="cake.png">
<input type='button' value='>' name='prev' onclick="arr.prev('mainImg')" />
</body>
</html>
Not using jquery. I do not have enough experience in js either. Thank you for your time

You had three mistakes:
You referenced the images as img.src = imgs[this.i].src; and you just had an array of strings, not an array of objects with a src property. img.src = imgs[this.i]; is the correct way to get the URL.
You used
var img = document.getElementById('element');
when you should have used
var img = document.getElementById(element);
element is an argument coming from your onclick event. It holds the id of your image that you should be using. "element" is just a string. You try to find an element with id equal to element which doesn't exist.
Edit: You should also use < and > to represent < and >. Otherwise your HTML might get screwed up. More on that here.
var arr = new collection(['http://images.math.cnrs.fr/IMG/png/section8-image.png', 'https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg', "http://saturnraw.jpl.nasa.gov/multimedia/images/raw/casJPGFullS72/N00183828.jpg"]);
function collection(imgs) {
this.imgs = imgs;
this.i = 0;
this.next = function(element) {
var img = document.getElementById(element);
this.i++;
if (this.i >= imgs.length) {
this.i = 0;
}
img.src = imgs[this.i];
};
this.prev = function(element) {
var img = document.getElementById(element);
this.i--;
if (this.i < 0) {
this.i = imgs.length - 1;
}
img.src = imgs[this.i];
};
this.next("mainImg"); // to initialize with some image
}
<!DOCTYPE html>
<html>
<head>
<title>photos</title>
<script src="photos.js"></script>
</head>
<body>
<input type='button' value='<' name='next' onclick="arr.next('mainImg')" />
<img id='mainImg' src="cake.png">
<input type='button' value='>' name='prev' onclick="arr.prev('mainImg')" />
</body>
</html>
This is how I'd personally do it:
var myCollection = new Collection([
"http://images.math.cnrs.fr/IMG/png/section8-image.png",
"https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg",
"http://saturnraw.jpl.nasa.gov/multimedia/images/raw/casJPGFullS72/N00183828.jpg"
], "mainImg");
document.getElementById("next_btn").onclick = function() {
myCollection.next();
};
document.getElementById("prev_btn").onclick = function() {
myCollection.prev();
}
function Collection(urls, imgID) {
var imgElem = document.getElementById(imgID);
var index = 0;
this.selectImage = function() {
imgElem.src = urls[index];
};
this.next = function() {
if (++index >= urls.length) {
index = 0;
}
this.selectImage();
};
this.prev = function(element) {
if (--index < 0) {
index = urls.length - 1;
}
this.selectImage();
};
// initialize
this.selectImage();
}
<!DOCTYPE html>
<html>
<head>
<title>photos</title>
<script src="photos.js"></script>
</head>
<body>
<input id="next_btn" type='button' value='<' />
<img id='mainImg'>
<input id="prev_btn" type='button' value='>' />
</body>
</html>

Why sending string into arr.next('mainImg') function ?
your img element always have the same id, only change src.
and document.getElementById(element) is also the same img element.
html: <img id='mainImg' src="cake.png">
js: document.getElementById('mainImg')
consider img element as a container, and id is it's identifiler.

var start_pos = 0;
var img_count = document.getElementsByClassName('icons').length - 1;
var changeImg = function(direction){
pos = start_pos = (direction == "next")? (start_pos == img_count)? 0 : start_pos+1 : (start_pos == 0)? img_count : start_pos-1;
console.log(pos)
}
document.getElementById('left').onclick = function(){ changeImg("previous"); }
document.getElementById('right').onclick = function(){ changeImg("next"); }

If clauses in for loop acts weird [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a function, which collects inputted answer and checked if collected answer is the same as it is the solution. Questions are asked randomly. Questions and solutions are in separate .txt file.
I have a file with some words and the program always fulfil its condition if the last word from the list is correctly answered, even though if other answers from other questions are correct.
Any suggestions?
var besedeNemske = ["glava", "voda", "drevo"];
var besedePrevod = ["der Kopf", "das Wasser", "der Baum"];
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var lines = this.result.split('\n');
for (var line = 0; line < lines.length; line++) {
if (line % 2 != 0) {
besedeNemske.push(lines[line]);
} else {
besedePrevod.push(lines[line]);
}
}
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
}
var random = 0;
function nastaviRandom() {
random = Math.floor(Math.random() * 5);
}
function noviGlagol() {
nastaviRandom();
document.getElementById("vprasanje").innerHTML = besedePrevod[random];
}
function preveriOdgovor() {
var odgovorjeno = document.getElementById("mojOdgovor").value;
if (besedeNemske.indexOf(odgovorjeno) == random) {
document.getElementById("odgovor").innerHTML = "Pravilni odgovor";
} else {
document.getElementById("odgovor").innerHTML = "Napačen odgovor. Pravilni odgovor je " + (besedeNemske[random]) + "";
}
}
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="page-wrapper">
<h1>Nemščina glagoli</h1>
<div>
Select a text file:
<input type="file" id="fileInput">
</div>
<pre id="fileDisplayArea"><pre>
<button onclick="noviGlagol()">Novi glagol</button>
<div id="vprasanje"></div>
<div id="odgovor"></div>
<input type="text" id="mojOdgovor">
<button onclick="preveriOdgovor()">Pošlji</button>
</div>
<script>
</script>
</body>
<html>

To submit the comments on the original question as an answer:
var index = 0;
for (var i = 0; i < besedeNemske.length; i++) {
if (odgovorjeno == besedeNemske[i]) {
index = i;
break;
}
}
index will be 0 for both of these cases:
if odgovorjeno == besedeNemske[0]
if odgovorjeno is not an element in the array besedeNemske
This is a really good use case for refactoring your code to use included language functionality or libraries, as it not only shortens your code, but is usually more correct (or at least their bugs are known/understood).
As Baramar pointed out, you can change your solution to:
function preveriOdgovor() {
var odgovorjeno = document.getElementById("mojOdgovor").value;
if (besedeNemske.indexOf(odgovorjeno) == random) {
document.getElementById("odgovor").innerHTML = "Pravilni odgovor";
} else {
document.getElementById("odgovor").innerHTML = "Napačen odgovor. Pravilni odgovor je " + (besedeNemske[random]) + "";
}
}

Frankenstein image swap JavaScript needs tidy and possible automation

I'm using the following JavaScript. It works fine, but it's a mess pieced together from various sources.
I have a series of images.
Each has a small version (1.gif) and a hidden, preloaded, large version (_1.gif).
Click the small version and the large version replaces it.
Click again and it swaps back:
var lastMove;
lastMove = new Date();
function preload(arr) {for (var i=0; i<arr.length; i++) (new Image()).src = arr[i];}
var index = 0;
var picsA = ["1.gif", "_1.gif"];
preload(picsA); picNumberA = 0;
function showNextPicA() {if (new Date() - lastMove < 200) return false; if (picNumberA == (picsA.length -1)) {picNumberA = 0;} else {picNumberA = picNumberA + 1;}document.getElementById('placeholderA').src = pics1[picNumberA];}
var picsB = ["2.gif", "_2.gif"];
preload(picsB); picNumberB = 0;
function showNextPicB() {if (new Date() - lastMove < 200) return false; if (picNumberB == (picsB.length -1)) {picNumberB = 0;} else {picNumberB = picNumberB + 1;}document.getElementById('placeholderB').src = picsB[picNumberB];}
etc. with each image on the page like this:
<img src="1.gif" id="placeholderA" onclick="return showNextPicA();"/>
So, first: is this mess dangerous or unecessary or is it fine?
And second: is there a way to automate so any image file will swap to a version with a standard prefix (say _) when clicked, then back again when clicked again?
Phew. Thanks for reading!

If you are able to use sth like jQuery, in the onClick for each image, put
showNextPic($(this))
Then
var prefix = "_";
showNextPic(imgelement) {
var src = imgelement.attr('src');
if(src.indexOf(prefix) == -1) {
src = prefix + src;
}
else {
// remove prefix from src
}
imgelement.attr('src', src);
}

How do I access and modify an image in an HTML page using javascript?

My HTML page has an image with id img. The idea is that by clicking first, previous, or next, the user can navigate through a set of images. How do I do this using JavaScript?

This should be a good start for you:
<script>
var imgs = ["img1.png","img2.png","img3.png"]; // copy images to the same dir
var index = 0;
</script>
<img src="img1.png" onclick="this.src=imgs[++index%imgs.length]"/>
click the image to slide.
If you need buttons, see this example:
<img id="clicker" src="img1.png"/>
Prev
Next
First
Last
<script>
var imgs = ["img1.png","img2.png","img3.png"];
var index = 0;
var clicker = document.getElementById("clicker");
function prev() { clicker.src = imgs[--index%imgs.length]; }
function next() { clicker.src = imgs[++index%imgs.length]; }
function first() { clicker.src = imgs[index=0]; }
function last() { clicker.src = imgs[index=imgs.length-1]; }
</script>
The return false means that default action on click (follow the link) is supressed. Javascript can access elements i.e. using id (see clicker here). Once you get comfortable with this and you start to solve browser compatibility problems, it is good idea to continue with jQuery (as the other suggests), MooTools or other framework.

Use jQuery!
var myImg = $("#myimg");
$("#next").click(function(){
var id = myImg.attr("data-id") + 1;
myImg.attr("src", "image"+id+".jpg");
});
$("#prev").click(function(){
var id = myImg.attr("data-id") -1;
myImg.attr("src", "image"+id+".jpg");
});
HTML:
<img id="myimg" src="image1.jpg" data-id="1">
Next<br>
Previous<br>
This is a very dummy example. There are numerous slideshow plugins out there!

No need jQuery:
<script type='text/javascript'>
window.onload = function() {
var imageSrcs= ['1.jpeg', '2.jpg', '3.jpg'];
var index = 0;
var image = document.getElementById('img');
var previous = document.getElementById('previous');
previous.onclick = function() {
index -= 1;
if(index < 0) index = imageSrcs.length - 1;
image.src = imageSrcs[index];
}
var next = document.getElementById('next');
next.onclick = function() {
index += 1;
if(index == imageSrcs.length) index = 0;
image.src = imageSrcs[index];
}
}
</script>
And html:
<img src='1.jpeg' id='img'>
<div>
<span id='previous'>Previous</span>
<span id='next'>Next</span>
</div>

You do not need a library for this. Something like this will change the image url, where "theImg" is the id of the image:
document.getElementById("theImg").src = "newUrl.png";
To do it without explicit ids, this will change the url where i is the index of the image:
document.getElementsByTagName("img")[i].src = "newUrl.png";

Try something like this (untested):
LOAD JQUERY:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
JAVASCRIPT:
<script type='text/javascript'>
var lst_src = ['img1.jpg', 'img2.png', 'img3.gif'];
$('a', '#nav').click(function(e) {
e.preventDefault();
var src_current = $('#img').attr('src');
var index = lst_src.indexOf(src_current);
var len = lst_src.length;
var action = $(this).attr('class');
switch ($action) {
case 'previous' : var i = index - 1;
if (i < 0) src_current = lst_src[len + i];
else src_current = lst_src[i];
break;
case 'next' : var i = index + 1;
if (i > len) src_current = lst_src[i - len];
else src_current = lst_src[i];
break;
case 'first' : src_current = lst_src[0];
break;
case 'last' : src_current = lst_src[len - 1];
break;
}
$('#img').attr('src', src_current);
});
</script>
HTML: Use the class of a link to denote the required action:
<img id='img' src='img1.jpg'>
<p id='nav'>
<a href='' class='first'>←←First</a>
<a href='' class='previous'>←Previous</a>
<a href='' class='next'>Next→</a>
<a href='' class='last'>Last→$rarr;</a>
</p>