Develop Reference

JavaScript - A tags disable onClick, enable onClick on Tags (Modal-Pop up)

I have several "a" tags that contain the attribute "onclick". When I click on one of them. They display an image and a modal(pop up). I am aiming to disable the rest of the "a" tags so I do not have other modal windows appearing if I click on other "a" tags.
I created the following code. I managed to do the first part but it does not work to enable all the "a" attributes once the modal is closed. Do you know why is it?
function toggleModal(modalId, toggle, bgImageId) {
var icons = document.getElementsByTagName('a');
var toytownImage = document.querySelector("#toytownImage");
var bgImage = document.getElementById(bgImageId);
var modal = document.getElementById(modalId);
////////
toytownImage.style.display = "none";
if (toggle) {
modal.style.display = "block";
//Appear another image
bgImage.style.display = "block";
//This block the icons to be clicked
for (var i=0; i < icons.length; i++) icons[i].onclick = null;
} else {
modal.style.display = "none";
bgImage.style.display = "none";
toytownImage.style.display = "block";
//Allows icons to click again
for (var i=0; i < icons.length; i++) icons[i].onclick = toggle;
//alert(toggle);
}
};

You could add a variable outside of the function and set that variable with the modalId when the function is called. On the function calls after that you can check if another modalId has been toggled and prevent toggling if the modalId in the variable is still set to display block. For example:
var active_modal;
function toggleModal(modalId, toggle, bgImageId) {
if(!active_modal) {
active_modal = modalId;
}
var current_modal = document.getElementById(active_modal);
if(current_modal.style.display !== 'block') {
active_modal = modalId;
//code is only executed when the current_modal is not displayed anymore
}
}
I've updated your fiddle https://jsfiddle.net/fv0w5by8/116/. Note that I moved the displays to each div instead of the .modal class. The other changes have been made to the toggleModal function itself.

Can't bind click event to a class set of elements

I've got an image modal that will work when I bind an event handler to an Id, but not when I apply it to a class to have it fire off of any image clicked.
Here is a portion of the html
<div class="column">
<img src="images/journalism-images/j1.jpg" class="grid-img" id="myImage">
<img src="images/journalism-images/j2.jpg" class="grid-img">
</div>
Here is my Javascript below
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var images = document.getElementById("myImage");
var close = document.querySelector(".image-modal-close");
function changeImage() {
img.src = modalImg.src;
}
images.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
changeImage();
}
so basically what is happening is whatever image I put the ID of #myImage on will fire the modal with the correct image src, but I can't fire the modal when I use something like-
document.querySelectorAll(".grid-img");
can anyone help me out?

var images = document.querySelectorAll(".grid-img");
for ( var index = 0; index < images.length; index ++ ) {
images[index].addEventListener("click",function(e) {
// Do whatever you need.
},false);
}
Or
var $images = $( '.grid-img' );
$images.on( 'click', function(e) {
// Do whatever you need.
});
Remember that querySelectorAll returns set of elements.

Use jquery for this:
$(".grid-img").on("click", function() {
//logic
}
QuerySelectorAll will return a set of elements.
If you want javascript:
document.getElementsByClassName("grid-img").addEventListener("click",function(e) {
//Your logic
}
You can also watch the Example of getElementsByClassName
Example of getElementsByClassBame:
var element = document.getElementsByClassName("grid-img");
element[0].addEventListener("click",function(e) {
//Your logic
}
element[1].addEventListener("click",function(e) {
//Your logic
}

Javascript onclick() show and onclick() hide

I wanted to make a function with onclick where if I press the div the content should be displayed. If I click on that content it will give me the "starting"-form.
Let me show you the code:
HTML:
<div id="demo">click</div>
Javascript:
var div = document.getElementById("demo");
var info = "This is the information for the user.";
var status = true;
if(status){
div.onclick = function() { div.innerHTML = info };
status=false;
}
else {
div.onclick = function() { div.innerHTML = "click" };
status=true;
}
So I made a variable status that checks what is being shown.
I hope i could express myself good enough. :)

The if statement is not going to magically run again. You need to do the check inside the click. Do not try to bind separate click events.
(function () {
var div = document.getElementById("demo");
var info = "This is the information for the user.";
var status = false;
div.addEventListener("click", function() {
status = !status;
div.innerHTML = status ? info : "click";
});
}());
<div id="demo">click</div>

How can I make an input change its src with an onclick?

I'm trying this and my background changes color (what I want) but the src of the input only changes on the second time I click it. how can I make it change the source on the first click? Also how can I change the src back to the original with a second click?
<input id="showHideContainer" type="image" src="on.png " height="3%" width="2%" alt="On" onclick="toggle();">
<script>
document.getElementById('showHideContainer').onclick = function () {
divTest = document.getElementById('header');
if (divTest.style.display === "none") {
divTest.style.display = 'block';
} else {
divTest.style.display = "none";
};
$('body').toggleClass('style2');
$('#showHideContainer').click(function(){
$('#showHideContainer').attr('src', 'off.png');
});
}
</script>

You need to determine the current state of the obj then toggle it with the other
$('#showHideContainer').click(function(){
var off = $(this).attr('src').indexOf('off.png')>-1;
$(this).attr('src', (off?'on.png':'off.png'));
});

Quick fix. You are now attaching anoter eventhandler on the first click on the #showHideContainer, that is why it's not firing the first time. This trimmed version of your code should get you the expected result, also see the other answer to look at the state of your element attribute:
document.getElementById('showHideContainer').onclick = function () {
divTest = document.getElementById('header');
if (divTest.style.display === "none") {
divTest.style.display = 'block';
} else {
divTest.style.display = "none";
};
$('body').toggleClass('style2');
var off = $(this).attr('src').indexOf('off.png')>-1;
$(this).attr('src', (off?'on.png':'off.png'));
}

How to Hide an Image, if not clicked, in N seconds?

I have a button that when is clicked, an image is created using javascript and get prepended to a div (adds it inside a div).
var image = new Image();
var imageHtml = image.toHtml();
$('div.board').prepend(imageHtml);
function Image()
{
this.toHtml = function ()
{
return '<img src=\"myImage.png\" width=\"40px\" height=\"40px\" />';
}
}
This image can be clicked in 2 seconds then user will have 1 more score and if not clicked in that time, then the image should disappear.
How to do that in javascript?
Thanks,

function start_game(image){
var timeout = null;
image.onclick = function(){
clearTimeout(timeout);
//addScore();
};
timeout = setTimeout(function(){
image.onclick = null;
image.style.display = "none";
// remove the image from dom if needed;
}, 2000);
}
Demo: http://jsfiddle.net/UpNCb/

see this, just difference is you going to hide instead of link display
or
give id 'img_id' to your image
function hideimage() {
document.getElementById('img_id').style.display = 'none';
}
setTimeout(hideimage, 10000);

Use the function setTimeout() and the CSS property display or visibility.