I've read through similar questions' answers but most are jQuery answers. I'm using JavaScript only to do this so if someone could help me fix my problem would be great.
So far in my js when my input image is clicked my function displays a box. I want to be able to click this input image again to close the box. At the moment I can't close it by clicking the image.
Here is my js:
var settings = document.getElementById('cog');
settings.onclick = Cog;
function Cog(){
document.getElementById('settings').style.display = "block";
document.getElementById('cogbox').style.display = "block";
}
'cog' is my image and clickable input. What code am I missing to make the box close by clicking the 'cog' image?
I believe you just need a variable to check if you should show or hide the box.
Check if this works:
var settings = document.getElementById('cog');
settings.onclick = Cog;
var cogShow = false;
function Cog(){
cogShow = !cogShow;
document.getElementById('settings').style.display = (cogShow ? "block" : "none");
document.getElementById('cogbox').style.display = (cogShow ? "block" : "none");
}
Or you could simplify it even more, by checking if cogbox is visible and them doing the opposite to the object when clicking again:
var settings = document.getElementById('cog');
settings.onclick = Cog;
function Cog(){
show = (document.getElementById('cogbox').style.display === "none");
document.getElementById('cogbox').style.display = (show ? "block" : "none");
document.getElementById('settings').style.display = (show ? "block" : "none");
}
is there any reason your not using library? if you're going to be doing a lot of JS, Mootools or JQuery will help you out a lot. Jquery is easier to learn though Mootools is way more flexible. For your problem, you're only really giving it the ability to show, though nothing else. try using a conditional statement like the one shown here: Toggle Html with JS
That should get you where you need to be.
Related
There are multiple clickable images on the screen. I want to keep which image I clicked in a variable. How can I do this with javascript? Can you help me, please ?
You can add a listener on the images click event, then take the src for example of the image clicked and store it in a variable like this:
$('img').click(function (e) {
var clickedImge = '';
clickedImge = e.target.src;
});
I tried to write the auto-clicking function on a web page:
var button = document.getElementById('send_order_btnSendOrder');
setInterval(function(){button.click()}, 200)
it works correctly
, now after each auto clicking i want these values will be located in fileds.
document.getElementById('send_order_txtPrice').value = "24030";
document.getElementById('send_order_txtCount').value = "5";
I mean setting values after autoclaving repeatedly.
how should I change my code?
var button = document.getElementById('send_order_btnSendOrder').addEventListener('click', function())
And then removeEventListener('click', function())
Example of what I want
Excuse my noobness.
I want an input field that disappears when there's been input. (Like the '3' in the example.)
I want the input field to return if I want to edit the input.
I've looked up online on how to do this and how to go around it, but I don't get anything useful out of it.
I have tried something like this (old, irrelevant code, it's just an example of what I tried to do):
function addButtonActions() {
questionsButton.addEventListener("click", function () {
var page = document.getElementById('page-questions');
hideAllPages();
page.style.display = 'block';
});
function hideAllPages() {
var startPage = document.getElementById('page-start');
var questionsPage = document.getElementById('page-questions');
var scorePage = document.getElementById('page-score');
startPage.style.display = 'none';
questionsPage.style.display = 'none';
scorePage.style.display = 'none';
}
But it didn't seem to work for the input field.
I don't use <form></form>, because that always seems to give me bugs. Something like <form></form> doesn't help my layout for the page anyway, I don't think.
First of all: Example of using FORM
Your problem is in the JavaScript. Your calling hide, then behind it calling BLOCK which unhides it.
hideAllPages();
page.style.display = 'block';
Also, what is questionsButton? That needs to be an object variable.
I have made a small javascript to hide dividers when the value of a dropdown menu has changed.
But for some reason the script doesn't work on my own site.
document.getElementById("type").onchange = function () {
var v = this.options[this.selectedIndex].value;
if (v == 1) {
document.getElementById("CostDiv").style.display = "block";
} else {
document.getElementById("CostDiv").style.display = "none";
}
}
Here's a link: http://jsfiddle.net/WeHv3/
is there more than one element in the html document called CostDiv ?
Please give us the source of the html document as that is only difference at the moment I can see.
I think problem is your listener are unable to attach with your element.
Just add your JavaScript at the bottom of page and your problem is solved.
I'm new to stackoverflow!
I'm having problems with a piece of code for my companies website, using jquery. I'm trying to track the clicks on two button and set a variable/s which can then be used to determine a course of action. Basically its a sliding dropdown that animates one way if the variable is set to true and another if it is set to false. I've initiallised the variables both to be false to begin with and then through the course of clicking they should be set to true or false depending on the situation:
var boollogin = false;
var boolregister = false;
$(document).ready(function(){
$('#slidedownlogin').hide();
$('#details_add_area').hide();
$('#emailconfirmation').hide();
$('#register').toggle(function(){
if(boollogin == false){
$('#login_area').hide();
$('#register_area').show();
$('#details_add_area').hide();
$('#slidedownlogin').animate({'height':'235px'},1500, 'easeOutExpo');
}else{
$('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo',function(){
$('#login_area').hide();
$('#details_add_area').hide();
$('#register_area').show();
$('#slidedownlogin').animate({'height':'235px'},1500, 'easeOutExpo');
});
}
boolregister = true;
} , function(){
$('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo', function(){
$('#slidedownlogin').children().hide();
});
boolregister = false;
boollogin = false;
});
$('#login').toggle(function(){
if(boolregister == false){
$('#register_area').hide();
$('#details_add_area').hide();
$('#login_area').show();
$('#slidedownlogin').animate({'height':'220px'},1500, 'easeOutExpo');
}else{
$('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo',function(){
$('#register_area').hide();
$('#details_add_area').hide();
$('#login_area').show();
$('#slidedownlogin').animate({'height':'220px'},1500, 'easeOutExpo');
});
}
boollogin = true;
} , function(){
$('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo', function(){
$('#slidedownlogin').children().hide();
});
boollogin = false;
boolregister= false;
});
});
The page I'm working on is at http://www.premiersoftware.co.uk/index94.php. Full code is in the php file at the moment so you can look at it there too. You should be able to get an idea of what I'm trying to do by clicking the two links (Register and Login) at the top right of the page.These are supposed to reset the variables boollogin or boolregister, but inspecting these two variables in firebug reveals they aren't being reset and don't change. As a result the page initially acts as expected but after a while and a few clicks it gets really quirky. The form valitation and stuff hasn't been done yet as I'm trying to get the animation sorted first.
I was hoping someone here would be able to shed some light on why the variables aren't being reset and suggest how I could fix the code. If there is another way to create the same kind of functionality I'm also open to suggestion.
Thanks in advance
Dan
I think instead of closing the div that drops down and then opening it up again when the user switches between login and register, it may be more intuitive to just display the correct register or login form within the opened div.
This code may help you regardless, but it implements what I suggested above.
http://jsbin.com/etezo5
edit link so you can see the code:
http://jsbin.com/etezo5/edit
have you tried doing something like:
$('Register').appendTo('#support').css({'float':'right','margin-right':'10px'});
$('Login').appendTo('#support').css({'float':'right','margin-right':'10px'});
Then in your JS,
function toggleTheCorrectDiv(toggleRegister){
if (toggleRegister){
//Show Register Content
}else{
//Show Login Content
}
}