Develop Reference

i want to hide the showmore button if the height of the div(ccontainer) is less than 550px

i want to hide the showmore button if the height of the div(ccontainer) is less than 550px and i will have more than one div and for each i will have a showmore button, and i already have a code that works (hides the btn) but it doesn't work for more than one button like if there are two divs it will hide the button of the first div but it just ignores the second one maybe that is because the code is implemented from top to bottom, so to sum it up what i want to do is that if div's height is less than 550px the show more button should be hidden and the code should also hide the second button for the second div.
and sorry for my broken English
code
js
// showmore btn show/hide
const btn = document.querySelector('.showmore');
const height = document.querySelector('#ccontainer').clientHeight;
btn.forEach(function(){
if (height <= 530) {btn.style.display = 'none';} else {btn.style.display = '';}
)}
html
<div class="ccontainer" id="ccontainer">
<p id="context"> content </p>
<div class="img" id="cntimgcon" >
<img src="images\image2.jpg" id="cntimgp1">
</div>
<p id="context"> content </p>
</div>
<Button class="showmore"> show more </button>

Your question is not fully understandable.But I think you are asking that hide the top most showmore button and display other showmore button when the upper ccontainer is less than 500px.Your styling of the button looks not good to me,but I didnt change it since this is a jquery question. Inorder to test this code I duplicate same html code you have provided. And added image url for display the image since you didnt provide image resource.And I added window.onload function in order to execute your targeted function after the page loads.
working sanbox.
I need to mention that you used const btn= document.querySelector('.showmore').But It should be change to const btn =document.querySelectorAll(".showmore");.
querySelector only select the first element but querySelectorAll return you a list of node.
html code
<div class="ccontainer" id="ccontainer">
<p id="context">content</p>
<div class="img" id="cntimgcon">
<img
src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01"
id="cntimgp1"
height="25px"
width="auto"
/>
</div>
<p id="context">content</p>
</div>
<button class="showmore">show more</button>
<div class="ccontainer" id="ccontainer">
<p id="context">content</p>
<div class="img" id="cntimgcon">
<img
src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01"
id="cntimgp1"
height="25px"
width="auto"
/>
</div>
<p id="context">content</p>
</div>
<button class="showmore">show more</button>
js code
<script>
window.onload = function () {
const btn = document.querySelectorAll(".showmore");
const height = document.querySelector("#ccontainer").offsetHeight;
btn.forEach(function (single, index) {
if (height <= 500 && index == 0) {
single.style.display = "none";
} else {
single.style.display = "block";
}
});
};
</script>

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

Show images in order of buttons clicked

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>

Using JSON to retrieve different id from data base

I have an HTML img tag with an empty src and I use JSON and jquery to retrieve the src of the img from the database when the user hovers over a parent span that contain the img tag. The problem is when I retrieve the src with JSON everything is fine and the image src is retrieved but I a loop set for this span in the very same page, so when the first image is already retrieved it's src is applied for the other looped span images. It is like retrieving the same id of the first image for the other different looped images that suppose to have different id for different content image contents.
here's is my code :
$(document).ready(function(){
$('#key').hover(function(){
var id=$('#im').attr('value');
$.post('getjson.php',{id:id},function(data){
$('img').attr('src',data.user_img);
},'json');
});
});
Here is the HTML
{loop="data"} <span class="foo" id="key">{$value.user_key}</span> <span class="foo">
<img alt="ther is an image here" src="" value="{$value.id}" id="im"/></span>

The problem is that you have duplicated IDs on your page. So, $('#key') will always return the first DIV with the id key, the same for $('#im'). Instead this $('img') will select all images on your page. Here is a demo to illustrate the problem:
console.log("$('#key') count:"+$('#key').length);
console.log("$('#img') count:"+$('#key').length);
console.log("$('img') count:"+$('img').length);
$('#key').hover(function(){
console.log("ID hovered: "+$('#im').attr('value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="key"> Div 1
<img src="" id="im" value="1" />
</div>
<div id="key"> Div 2
<img src="" id="im" value="2" />
</div>
<div id="key"> Div 3
<img src="" id="im" value="3" />
</div>
<div id="key"> Div 4
<img src="" id="im" value="4" />
</div>
To solve that you need to use another selector, for example, use a class:
$(document).ready(function(){
$('.my-selector').hover(function(){
//This will select all images inside 'this' (hovered .key)
var img = $('img', this);
$.post('getjson.php',{id : img.attr('value')},function(data){
img.attr('src',data.user_img);
},'json');
});
});
HTML:
{loop="data"} <div class="my-selector"> <!-- add parent div -->
<span class="foo" id="key">{$value.user_key}</span>
<span class="foo">
<img alt="ther is an image here" src="" value="{$value.id}" id="im"/>
</span>
</div>

Try changing
$('img').attr('src',data.user_img);
to
$("img[value='"+ id +"']").attr('src',data.user_img);

It is because you are setting the source to all images on the page.
$('img') should be replaced with $('#key')
in your case the code should be :
$(document).ready(function(){
$('#key').hover(function(){
var img = this;
var id=$('#im').attr('value');
$.post('getjson.php',{id:id},function(data){
$(img).attr('src',data.user_img);
},'json');
});
});

Javascript img tag src switch function not working

I have a small app the uses 3 images as buttons, the images are different colors, above the image buttons there is a big pair of glasses, depending on what color button you press the color of the glasses will change to match the color of the button that was pressed. The problem is I am getting a "Cannot set src to null" error.
Here is a jsfiddle: http://jsfiddle.net/vAF8S/
Here is the function
//Functions that change the glasses image
function changeColor(a){
var img = document.getElementById("imgG");
img.src=a;
}

you have two Id's for the tag. you should have only one ID. change your html.
<section id="banner" >
<img id="imgG" src="images/orangeG.png"><br>
<img id="wcolorButton" src="images/whiteT.png" />
<img id="bcolorButton" src="images/blueT.png" />
<img id="ocolorButton" src="images/orangeT.png" onClick="changeColor('images/whiteG.png')" />
</section>
FIDDLE

you are getting this error because you have applied ID twice to the same element
use this HTML
<section id="banner" >
<img class="glasses" id="imgG" src="images/orangeG.png"><br>
<img class="wcolorButton" src="images/whiteT.png" />
<img class="bcolorButton" src="images/blueT.png" />
<img class="ocolorButton" src="images/orangeT.png" onClick="changeColor('images/whiteG.png')" />
</section>