Show images in order of buttons clicked - javascript

I'm new to web developing and trying to build a website that shows different flags when clicking buttons.
I encounter some problems when positioning the image... For example, when I click "C -> A -> D -> B ->A", the A flag shows up before other flags and I cannot click again to make it show up twice. Here are my questions.
1) When I click the buttons the images show up in the order of the , not by which button I click first. Is there any way to make the first click one shows up first?
2) What function or code in CSS/javascript/JQuery I can use if I want the image to show up twice or for more times?
Thank you!
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script>
function showImg( id ) {
for ( i = 1; i < 10; i++) {
}
var obj = document.getElementById( "flag" + id );
if (obj != null)
obj.className = 'show';
}
</script>
<style type="text/css">
.hide{display:none;}
</style>
<input type="button" onclick="showImg(1)" value="A" >
<input type="button" onclick="showImg(2)" value="B">
<input type="button" onclick="showImg(3)" value= "C">
<input type="button" onclick = "showImg(4)" value= "D">
<input type="button" onclick = "showImg(5)" value= "E">
<input type="button" onclick = "showImg(6)" value= "ANS">
<div class="row">
<div class="main">
<div class="screen" position: relative">
<img id="flag1" src="flag1.jpeg" title="1" class="hide" position="static">
</div>
<div position= "relative">
<img id="flag2" src="lag2.jpeg" title="2" class="hide">
<div position= "relative">
<img id="flag3" src="flag3.jpeg" title="3" class="hide">
</div>
<div position= "relative">
<img id="flag4" src="flag4.jpeg" title="4" class="hide">
</div>
<div position= "relative">
<img id="flag5" src="flag5.jpeg" title="5" class="hide">
</div>
<div position= "relative">
<img id="flag6" src="flag6.jpeg" class="hide" position="static">
</div>
</div>
</div>
</div>
</body>
</html>

One approach to the problem is, rather than hiding and showing elements (which relies on those elements being within the DOM already, then showing and hiding them as appropriate which retains their original order), to insert the relevant <img /> elements on clicking the <button> elements.
In the HTML below I've stripped out much of the extraneous HTML in order to simplify the example, and I've converted your <input type="button" /> elements into <button> elements, which allows those elements to contain HTML and allows us to use generated content in the pseudo-elements, ::before and ::after:
// here we select all <button> elements that have a "data-src"
// attribute:
const buttons = document.querySelectorAll('button[data-src]'),
// creating a named function to handle inserting the
// elements:
insertImage = function() {
// the 'this' is passed automatically from the later
// use of EventTarget.addEventListener() method, here
// we cache that within a variable:
let clicked = this,
// we retrieve the element, via its id, into which
// we wish to append the elements:
output = document.getElementById('gallery'),
// we create an <img> element:
image = document.createElement('img');
// we use a template literal to set the 'src'
// property-value to the 'https' protocol
// coupled with the data-src attribute-value
// retrieved via the Element.dataset API:
image.src = `https://${clicked.dataset.src}`;
// and append the <img> to the desired element:
output.append(image);
};
// here we iterate over the NodeList of <button> elements
// retrieved earlier, using NodeList.prototype.forEach():
buttons.forEach(
// along with an Arrow function to the attach the
// insertImage function (note the deliberate lack of
// parentheses) via the EventTarget.addEventListener()
// method:
(btn) => btn.addEventListener('click', insertImage)
);
/*
using the ::before pseudo-element, with generated
content, to add text to the button elements that
have a data-src attribute:
*/
button[data-src]::before {
content: 'Show image ' attr(value);
}
#gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 180px);
grid-gap: 1em;
align-content: center;
justify-content: center;
}
<!--
here we have three <button> elements, each with a data-src
custom attribute that contains the src of the relevant image:
-->
<button type="button" value="A" data-src="i.stack.imgur.com/4CAZu.jpg"></button>
<button type="button" value="B" data-src="i.stack.imgur.com/SqYhm.gif"></button>
<button type="button" value="C" data-src="i.stack.imgur.com/a9xXV.png"></button>
<div id="gallery"></div>

Related

How to make image give her name to text field then edit the name and save it? Plus delete button should remove picture

This one is very tricky and I cant imagine how to solve it... Request was "Double click on picture, then you get picture name in to text field. There you can change name and save it with button. Also there's another button which clicked you delete the picture."
At this moment I dont have much, it's just a guess what it should look like..
function rodytiViduryje(pav){
var paveikslas=document.getElementById("jap");
paveikslas.src=pav.src;
var aprasymas=document.getElementById("apr");
aprasymas.value=pav.title;
lastph=pav;
}
function keistiAprasyma(){
var NA=document.getElementById("apr");
lastph.title=NA.value;
}
function trintiPaveiskla(){
lastph.remove();
}
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt=japonija class="b" style="width:780px;height:480px">
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti" onclick="keistiAprasyma()">Išsaugoti aprašymą</button><br/>
<br>
<button onclick="trintiPaveiksla()">Trinti iš galerijos</button><br/>
</div>
</div>
Please share your ideas! :)
JS could be something like this (also made small changes to HTML):
document.addEventListener("DOMContentLoaded", function(event) {
let img = document.querySelector('#jap');
let descriptionInput = document.querySelector('#apr');
let saveButton = document.querySelector('#saugoti');
let deleteButton = document.querySelector('#trinti');
img.addEventListener('dblclick', function (e){
console.log
descriptionInput.value = this.alt;
});
saveButton.addEventListener('click', function(){
img.alt = descriptionInput.value;
});
deleteButton.addEventListener('click', function(){
img.remove();
});
});
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt="japonija" class="b" style="width:780px;height:480px" />
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti">Išsaugoti aprašymą</button><br/>
<br>
<button id="trinti">Trinti iš galerijos</button><br/>
</div>
</div>
My advice for future endeavours: scale your tasks to smaller ones. This will give you more valid results. Also you'll be able to learn while combining those multiple solutions to the one you need. I.e., your searches for this task could be:
Javascript double click event
Javascript get images' alt value
Javascript set images' alt value
Javascript remove DOM element

How to delete an image in array of images in javascript while maintaining current image list on browser screen?

I have an array of images that I uploaded to the browsers screen as follows:
...
<input type="file" id="image" accept="image/*" name="image[]" multiple /><br/>
<div id="images"></div>
$('#image').change(function(){
for (i = 0; i < $(this)[0].files.length; i++) {
imageCount = imageCount + 1;
$("#images").append('<div style="width:100px;"><img src="'+window.URL.createObjectURL(this.files[i])+'" id="images" width="100px" height="100px"/>'+'<button type="button" onclick="uploadImage('+imageCount+');">Upload </button> <button type="button" onclick="removeImage('+imageCount +');">X</button></div> nbsp;');
}
});
function removeImage(position) {
images = $('#images');
alert("Position: "+position);
}
...
How would one go about removing an image at a specific position in the image array?
Your code has nothing to do with arrays.
Instead, you're trying to add / remove elements from the DOM. Rather than trying to dynamically assign values to onclick, you can just use an event handler.
Also good to note, with your code you will end up with multiple elements having id="image", which is invalid. IDs need to be unique. Instead, use classes. See also template literals and .on()
<input type="file" id="add_images" accept="image/*" multiple />
<div id="images"></div>
$('#add_images').on('change', function(){
$.each(this.files, function(file) {
$('#images').append(`
<div style="width:100px;">
<img class="image" src="${window.URL.createObjectURL(file)}">
<button class="upload_image">Upload</button>
<button class="remove_image">X</button>
</div>`);
});
});
$('#images') //this replaces the onclick="" method
.on('click', 'button.remove_image', function() {
this.parentElement.remove();
});
.on('click', 'button.upload_image', function() {
//code for uploading image
});
Can't say I've ever used URL.createObjectURL(), so you may need to rejigger that part of the code.

Replacing Choose File with Font Awesome icon makes cloned image preview inoperable

Apparently, I can’t figure out how to bind font awesome element to the cloned form. I tried everything, but the image on the cloned form goes to the original message.
The image preview was already functioning on the cloned form. Afterwards First on html, I added font awesome element with camera icon just above <input type="file". Second on javascript, I added a function to trigger font awesome element, which works on the original message submission. Third, I created iClone() function to find, trigger, and change the data-count number of both font awesome and input file after grabbing font awesome element using jQuery. Fourth, I created var cloneCount = 0; variable initially set to 0 to increment and change the id name of the cloned form. Fifth, I created var bindFileChange = function(cloneCount) { variable to bind font awesome and file input elements to the new form with new form id name.
Next on the reply button $("button").click(function(){, where the actual cloning takes place, first, cloneCount++; increments cloneCount, i.e., id name of the new form. Second, it clones the form and add the new id name to it. Third, it runs the iClone function. Finally, it runs the bindFileChange(cloneCount); function. This is supposed to bind both font awesome and input file to the new form with a new id. But it doesn't work.
Here is the link to the test case, where I tried to add font-awesome to cloned image preview, on JSBin: https://jsbin.com/cepanet/4/edit?js
And, here is the link to the functioning code for cloning image preview without font-awesome on JSBin: https://jsbin.com/xexejur/10/edit?html,js,output
$(document).ready(function() {
// Original message. It is not cloned.
$("#form_clone0").click('submit', function() {
let fileInput = $('input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
// Function to activate font awesome
$("i").click(function() {
$("input[type='file']").trigger('click');
});
});
// Function to find, trigger, and change the data-count number of both font
// awesome and input file after grabbing font awesome element using jQuery.
function iClone() {
$("i").click(function() {
$("input[type='file']").first().attr('data-count', cloneCount).trigger('click');
});
};
// Variables to bind font awesome and file input elements to cloned form.
// Including, variable to increment cloned form counter. Set to zero.
var cloneCount = 0;
var bindFileChange = function(cloneCount) {
let fileInput = $('i, span, input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$('i').siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
};
$("button").click(function() {
// Cloned functions for reply message. Actual cloning takes place
// here.
cloneCount++;
$("#form_clone0").clone().attr('id', 'form_clone' + cloneCount).insertAfter("#form_clone" + (cloneCount - 1));
iClone();
bindFileChange(cloneCount);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="form_clone0">
<form method="post" enctype="multipart/form-data">
<div>
<img class="image_Preview" width="100" height="100" />
<i class="fa fa-camera"></i>
<input type="file" class="fileUpload" data-count="0" style="display: none;">
</div>
<div>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
<button>Reply</button>
</body>
</html>
Use a label and assign it [for] attribute with the value of the input id:
<label for='upload'></label>
<input id='upload' type='file'>
When the label is clicked then the input that it is associated with is as well.
Delegate events on an ancestor tag that existed since the page loaded. Pass a selector that represents all applicable tags that you want to target to the second parameter (it's called Event.data).
$('main').on('click change', '.file, .upload, .reply', function(e) {...
Cloning becomes complicated if the source being cloned has unwanted content. It may be easier just to clone the contents of a <template> or just render a htmlString. The following demo does the latter.
99% of the time it's optimal to place all <script> tags before the </body> end tag (see HTML of Demo).
let count = 0;
$('main').on('click change', '.file, .reply, .upload', function(e) {
if ($(this).is('.reply')) {
++count;
const htmlString = `<form id="box${count}" class="input-group form-row" method="post" enctype="multipart/form-data"><label class="input-group-prepend" for="image${count}" style="display:block;min-height:120px"><figure class="input-group-text" style="min-height:100%"><i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i> <img class="preview" width="100" height="100"> <figcaption> </figcaption></figure></label><input id="image${count}" name='image${count}' class="file" type="file" data-count="${count}" style="display: none"><section class="input-group-append" style="max-height: 120px"><fieldset class="btn-group-vertical" style="min-height: 100%"><button class="upload btn btn-primary btn-sm" type="button" style="min-height: 50%" form="box${count}">Upload</button> <button class="reply btn btn-secondary btn-sm" type="button" style="min-height: 50%">Reply</button></fieldset></section></form>`;
$('main')[0].insertAdjacentHTML('beforeend', htmlString);
} else if ($(this).is('.file')) {
$(this).closest('.input-group').find('.preview').attr('src', window.URL.createObjectURL(this.files[0]));
$(this).closest('.input-group').find('figcaption').text(this.value.split(`\\`).pop());
} else if ($(this).is('.upload')) {
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
$('body').tooltip({
selector: '.tip'
});
i.tip.btn:hover {
color: #fff;
background: #000;
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<main class='container'>
<form id='box' class='input-group form-row' method='post' enctype="multipart/form-data">
<label class='input-group-prepend' for='image' style='display:block;min-height:120px'>
<figure class='input-group-text' style='min-height:100%'>
<i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i>
<img class="preview" width="100" height="100">
<figcaption> </figcaption>
</figure>
</label>
<input id='image' name='image' class="file" type="file" data-count="0" style="display: none;">
<section class=' input-group-append' style='max-height: 120px'>
<fieldset class='btn-group-vertical' style='min-height: 100%'>
<button class='upload btn btn-primary btn-sm' type='button' style='min-height: 50%' form='box'>Upload</button>
<button class='reply btn btn-secondary btn-sm' type='button' style='min-height: 50%'>Reply</button>
</fieldset>
</section>
</form>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
<!--This is where the jQuery/JavaScript would be placed-->
</script>
</body>
</html>

html checkbox list that shows and hides links when filtered

I have written code that creates a checkbox list where when i click the checkbox below my list of options i would like a link to show underneath that the user can click (show/hide) I cannot figure out why my code will not work. If the user unchecked the box the link disappears but nothing happens when i click my check boxes. I would like to do this fix in JQuery
<!DOCTYPE html>
<html>
<div class ="container">
<head></head>
<body>
<input id="grp1" type="checkbox" value="group_1" onClick="http://google.com" />
<label for="grp1"> group 1 </label>
<div>
<input id="grp2" type="checkbox" value="group_2" onClick="http://google.com" >
group_2</label>
</div>
</body>
</html>
You'll have to use javascript to hide/show the wanted elements in html. There are many approaches to this. The most basic one would be something like
<!DOCTYPE html>
<html>
<body>
<div id="container">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("container").onclick = function (e) {
//check every box if it's checked
if (document.getElementById('grp1').checked) {
document.getElementById('url1').style.display = 'block';
} else {
document.getElementById('url1').style.display = 'none';
}
if (document.getElementById('grp2').checked) {
document.getElementById('url2').style.display = 'block';
} else {
document.getElementById('url2').style.display = 'none';
}
}
</script>
</body>
</html>
Of course you can use different approaches like creating the element in javascript then adding it to the html if you don't like the idea if existing hidden elements. You might also use loops to loop through checkbox element and simply show/hide the url accordingly. And more to make the code flexible on any number of boxes. Something like this
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div id="checkBoxContainer">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
</div>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("checkBoxContainer").onclick = function (e) {
var linkNumber = 1; //This is number of the first url element with ud url1
var containerChildren = document.getElementById("checkBoxContainer").children;
//loop through the children elements
for (var i = 0; i < containerChildren.length; i++) {
var oneChild = containerChildren[i]; //catch only one child in a variable
//simply filter the input elements which are of type checkbox
if(oneChild.tagName === "INPUT" && oneChild.type === "checkbox"){
//Show or hide the url accordingly.
if (oneChild.checked) {
document.getElementById('url' + linkNumber++).style.display = 'block';
} else {
document.getElementById('url' + linkNumber++).style.display = 'none';
}
}
}
}
</script>
</body>
</html>
The onclick HTML attribute doesn't work that way. The attribute value is executed as javascript. You can make a js function to show/hide the link.
Hi you want to try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.group-link{
display: block;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="jsParent">
<label for="grp1">
<input id="grp1" type="checkbox" value="group_1" onchange="showLink(this)"/> group 1
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/dogs-101/videos/the-doberman">Group 1 Link</a>
</div>
<div class="jsParent">
<label for="grp2">
<input id="grp2" type="checkbox" value="group_2" onchange="showLink(this)"/> group_2
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/cats-101/videos/ragdoll">Group 2Link </a>
</div>
<script type="text/javascript">
function showLink(el){
var parent = el.parentElement.parentElement;
var linkEl = getAnchorEl(parent);
if(linkEl){
if(el.checked){
linkEl.classList = linkEl.classList.value.replace('hidden', '');
}else{
linkEl.classList = linkEl.classList.value + ' hidden';
}
}
}
function getAnchorEl(parent){
var childrens = parent.children;
var linkEl = null;
for (var i = 0; i < childrens.length; i++) {
var childEl = childrens[i];
if(childEl.classList.value.indexOf('jsLink') > -1){
linkEl = childEl;
break;
}
}
return linkEl;
}
</script>
</body>
</html>
Your question is undoubtedly a duplicate but I am answering because I would like to help you identify issues with the code you posted.
I notice you have a <div>tag between your tag and tag. Why? This is a bit of an over simplification but as a general rule never put anything between your <html> and <head> tag and only place <div> tags inside your <body> tag. Also be mindful of how you nest your elements. That tag starts after and before .
Even if that were correct placement you close the before you close your div arbitrarily in the middle of your body tag. you should never have
<div>
<p>
</div>
</p>
Instead it should look like this
<div>
<p>
</p>
</div>
In your onClick attribute you have a random URL. That will not open a new window. You new too put some javascript in there.
<input onClick="window.open('http://google.com')">
Also your second label tag does not have an opening, just a </label> close tag
To answer your question - I suggest you look at the jQuery toggle function.
<input type="checkbox" id="displayLink" />
Google
<script type="text/javascript">
$("#displayLink").click(function(){
$("#googleLink").toggle();
});
</script>
As a general rule you should favor event handlers (such as the $("").click() posted above) to handle events (like clicking) as opposed to html attributes such as onClick.

How to toggle `<div>` items upon click of another div?

I have <div> structure like this
<!-- Parent -->
<div id="parentCategory" >
<input type="image" src="a.jpg" onClick="showNextCat('nextCategory1', 'block', 'nextCategory2', 'nextCategory3')" />
<input type="image" src="b.jpg" onClick="showNextCat('nextCategory2', 'block', 'nextCategory1', 'nextCategory3')" />
<input type="image" src="c.jpg" onClick="showNextCat('nextCategory3', 'block', 'nextCategory1', 'nextCategory2')" />
...
</div>
<!-- 1st Child -->
<div id="nextCategory1" style="display: none;">
<input type="image" src="1a.jpg" />
<input type="image" src="1b.jpg" />
</div>
<!-- 2nd Child -->
<div id="nextCategory2" style="display: none;">
<input type="image" src="2a.jpg" />
<input type="image" src="2b.jpg" />
</div>
<!-- 3rd Child -->
<div id="nextCategory3" style="display: none;">
<input type="image" src="3a.jpg" />
<input type="image" src="3b.jpg" />
</div>
My JS
function showNextCat(id, visibility, h1, h2) {
var item = document.getElementById(id);
document.getElementById(h1).style.display = "none";
document.getElementById(h2).style.display = "none";
if (item.style.display !== "none") {
item.style.display = "none";
}
else {
item.style.display = visibility;
}
}
I don't want to hardcode the showNextCat() method to hide non-selected <div>
Please Improvise the JS method.
There are 2 possible option either if you are using jquery
then it will be easier.
Let's see first jQuery's solution
Apply class="category" to all the element which you want to manipulate dynamically.
put value in html want to show like data-show="nextCategory1"
apply css
.category{
display:none;
}
Put this JS function
$('#parentCategory input').on('click',function(e){
$('.category').hide();
$('#'+$(this).data('show')).show();
});
View Fiddle
Now Let's see Javascript solution which is also bit of simillar
function showNextCat(id) {
var item = document.getElementById(id);
var elem = document.querySelectorAll(".category")
var i;
for (i = 0; i < elem.length; i++) {
elem[i].style.display='none';
}
item.style.display='block';
}
View Fiddle2
using jQuery you can make this easy. first thing to do, remove all the onClick events from your buttons. then, you have to define a css class for the selected divs :
.selected {
display : block;
}
then on the buttons, specify the id of the category concerned, for example
<input type="image" src="a.jpg" select-category="nextCategory1" />
all you need to do now, is to define the click event for all the buttons
$("[select-category]").click(function () {
$("#" + $(this).attr("select-category")).toggleClass("selected");
});
Note : this is not the only solutions.

Categories

Resources