We Keep Coding

how to apply same function to multiple divs

on this page (http://jodiaries.com/test/) I need to make a popup appear when I click on the red boxes.
So far it works, I added the onclick = "div1" attribute to the red box (on the others = "div2", etc) and use this:
function showhide(divElement) {
var e = document.getElementById(divElement);
if(e.style.display == 'flex'){
e.style.display = 'none';
} else {
e.style.display = 'flex';
}
}
for now the popup closes when I click again on the number, I would like to make it close by clicking anywhere outside that div/popup. I created another script (probably wrong) with this:
window.onload = function(){
var divToHide = document.getElementById('div1');
document.onclick = function(e){
if(e.target.id !== 'div_block-286-119'){
divToHide.style.display = 'none';
}
};
};
but it works only on the first red box, not on the others (because I target only div_block-286-119).
How can I get it to work with all popups (i will add more as soon as everything works)?
thanks in advance!

It's a bad idea to work with ids in your case, also in general. Instead of onclick="yourFunction()" use event listener. I didn't test the code down below, but it should work.
document.querySelectorAll(".crono-day-red").forEach(red => {
red.addEventListener("click", () => showhide(red));
})
const showhide = red => {
// I prefer to control styles by toggling classes.
// IMO, it's easier, especially for multiple styles.
red.closest(".ct-div-block").classList.toggle("popup-visible");
}
const closePopups = () => {
window.addEventListener("click", () => {
let clickedInside = event.target.classList.contains(".popup-visible")
|| event.target.closest(".popup-visible)"
if (clickedInside) {
return;
}
document.querySelectorAll(".popup-visible").forEach(x => x.classList.remove("popup-visible"));
})
}
window.onload = closePopups();
.ct-div-block .nove-gen-click { display: none }
.ct-div-block.popup-visible .nove-gen-click { display: flex }
All you need to do is to toggle "popup-visible" class by your functions.
I also noticed that you define popup styles in #div1 and #div2... Very bad practice.
EDIT AFTER COMMENT
To close currently open red box when you click the new one:
const showhide = red => {
red.closest(".ct-section-inner-wrap")
.querySelectorAll(".popup-visible")
.forEach(x => x.classList.remove("popup-visible"));
red.closest(".ct-div-block").classList.add("popup-visible");
}

Javascript click event requires double clicks

I have a simple HTML-CSS-JavaScript page with an event listener on a button to toggle a div.
However, all is working but the animation function takes two clicks first time to work, although i consoled the click event to prove that the button listens to the first click too.
i tried to wrap into window.onload but same thing.
note: i want to use pure javascript only.
thank you
this pic shows the first click (it says "clicked" in the console):
this pic shows the second click (animation took place):
Here is my code:
var showDivButton = document.getElementById('showDivButton');
var info = document.getElementById('info');
showDivButton.addEventListener('click', animation) ;
// animation func
function animation () {
console.log('Clicked!');
if (info.style.display === 'none'){
info.style.display = 'inline-block';
showDivButton.style.background = 'green';
} else {
info.style.display = 'none';
showDivButton.style.background = 'gray';
}
}
Look at My Plunker Here please. Thank you in advance.

Try to revise your function block as follow:
function animation () {
console.log('Clicked!');
if (info.style.display == '' || info.style.display == 'none'){
info.style.display = 'inline-block';
showDivButton.style.background = 'green';
} else {
info.style.display = 'none';
showDivButton.style.background = 'gray';
}
}
info.style.display is '' on initial

Because info.style.display refers to the style attribute of your div, not the computed Style, so on the first click, this is not set.
You may want to look at getComputedStyle, but i would advise switching class instead of directly modifying style.

toggling a div when a text area is typed in or not

Any idea why this function isn't working? I have a jsfiddle here http://jsfiddle.net/hoodleehoo/8wxwe9rd/
Here's the function I have:
$("#answer").on('input',function(e){
if(e.target.value === ''){
// Textarea has no value
document.getElementById('hotpages1').style.display = 'block';
document.getElementById('hotpages2').style.display = 'none';
} else {
// Textarea has a value
document.getElementById('hotpages1').style.display = 'none';
document.getElementById('hotpages2').style.display = 'block';
}
});
The goal is to have a div change it's display style based on whether the textarea is typed in. If the text is deleted and the text area is again blank it should toggle back to what it was originally.
UPDATE:
Okay, I forgot to put the jquery in the jsfiddle which I picked up on right after I posted this, but that didn't fix the issue on my page. After a ton of trial and error it turns out the function needs to be placed after the form, not before or inside. After moving the function to the bottom of the page it works beautifully!

You forgot to reference jQuery in the fiddle.
I changed the event to keyup, input also works. input's a newer event, consult the compatibility table.
$("#answer").on('keyup', function (e) {
var hot1 = document.getElementById('hotpages1'),
hot2 = document.getElementById('hotpages2');
if (e.target.value === '') {
hot1.style.display = 'block';
hot2.style.display = 'none';
} else {
hot1.style.display = 'none';
hot2.style.display = 'block';
}
});
http://jsfiddle.net/8wxwe9rd/5/

Text does not return to default when different toggle is closed

I am having no success at getting my text to return to it's default value when a different toggled div is clicked upon. Everything else seems to work great except for this one thing. What am I missing in my code? I end up having to click the other div again before it will finally return to the default text.
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
var menu;
$(document).ready(function () {
$('.bio_container').hide();
$('.bio_button').click(function () {
menu = $("#" + $(this).data("menu"));
$(".bio_container:not(#" + menu.attr("id") + ")").slideUp();
var biobutton = $(this);
menu.slideToggle(function(){
biobutton.text($(this).is(':visible') ? '« Close Biography' : 'Read Full Biography »');
});
});
});
Here's a fiddle so you can see where I am so far.

You are not actively updating the other button's text on click, you're almost there.
Missing line inside the slideToggle function:
$(".bio_button").not(biobutton).text('Read Full Biography »');
See updated JSFiddle.
Please understand that this is a quick hack though, and that the many selectors are not performing too greatly - which won't matter much if you don't have many menus to slide.

How to determin that javascript has finished doing something

JS on ios is rather slow. For example in this piece of code, the Js adds the class before being able to add the block style. This breaks an animation i have on the page.
comments.style.display="block";comments.className = "show";
I have a workaround that fixes the issue on ios but just feels wrong:
comments.style.display="block";setTimeout(function(){comments.className = "show";},1)
Is there any way to determine if the block style has been set and only then trigger the second part?
Thanks for your suggestions!

Can't you just use an if?
<div id="foo" style="display: none;">foo</div>
var div = document.getElementById( "foo" );
if ( div.style.display == "none" ) {
div.style.display = "block";
}
If you want to listen to a class change (or a style change) "event", you can try these links:
Event detect when css property changed using Jquery <= this solves the problem without jQuery
jQuery - Fire event if CSS class changed
Trigger event using Jquery on CSS change?
Is it possible to listen to a "style change" event?
I think the first one will solve your problem. Here is the code:
document.documentElement.addEventListener( "DOMAttrModified", function( evt ){
if ( evt.attrName === "style" ) {
if ( evt.newValue.indexOf( "block" ) != -1 ) {
alert( "do something!" );
}
}
}, false );
document.getElementById( "foo" ).style.display = "block";

This is a glorious mess of a hack that may work:
comments.blockStyleEvent = function() {
if ( this.style.display === "block" ) {
this.onBlockStyleEvent.apply(this);
}
};
comments.onBlockStyleEvent = function() {
this.className = "show";
};
setInterval(function(){
comments.blockStyleEvent();
}, 1);
You could also create two css classes one show and another showAsBlock for example then you could do this:
// somewhere else
comments.className = "hide";
// ...then
comments.className = "showAsBlock";