We Keep Coding

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.

Overlay div via jquery is set up successfully but not removed on click

I have one simple jquery script which triggers on click on button and create another div overlays on current html,i got success creating the div but the problem is when i try to close the div by a button which i have created at setting up overlay div is not working what can be the possible cause? the code is as under
input#btn cause the div to diplay and its working fine.
Jquery function file
$(document).ready(function(){
$('input#btn').click(function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'none')
{
$('#div').css('display','block');
$('#div').html('<H1>PALAK MEVADA</H1><input id="close" type="button" value="CLOSE"/>');
}
return false;
});
$('input#close').click(function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
$('#div').css('display','none');
$('#div').html('');
}
return false;
});
});

Use on():
$(document).on('click','input#close',function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
$('#div').css('display','none');
$('#div').html('');
}
return false;
});

The button doesn't exist when your code is first initialized, so your $('input#close').click(); isn't bound to anything.
Try this:
$('input#close').on('click', function(){
// Your code here...
});

How to hide a div if the form state is invalid

Can anyone suggest me how to hide a div if the form state is invalid??
Actually my requirement is like this:-
I need to display some success bar while page loading & then I want to hide this div if the form state is invalid when the user clicks on submit button.I have tried this, which worked previously but somehow our UI is changed. So, when i try to integrate this code with new UI, its not working.
<div class="addUser_success">
</div>
<button class="addUser_button" type="submit" onclick="hideDiv()"></button>
Script Code:-
function hideDiv()
{
if (document.getElementById) {
document.getElementById('addUser_success').style.display = 'none';
}
Also i used Jquery, but doesn't work at all
My Jquery code:-
$(document).ready(function ()
{
$(".addUser_button").click(function ()
{
alert("hai1");
$(".addUser_success").hide();
});
});
Any code snippets please????

I think it's
div.style.display = 'none';
and
div.style.display = 'block';

Try this:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}