I'm using a on-click event on javascript for my website and once the heading is clicked the block of information shows. That part works. However once I click it again it does not go back to "none".
var x = 1;
if(x%2 != 0){
document.getElementById("infoForEmployers").style.display = "block";
x++;
}else{
document.getElementById("infoForEmployers").style.display = "none";
x++;
}
console.log(x);
Never mind the console log, that was me trying to see if x was increasing. So basically every other click should either show or not show.
Your x variable is being set to 1 every time you set the function.
Make it a global variable and you'll be fine:
Try this:
window.x = window.x || 0 ;
if(window.x%2 != 0){
document.getElementById("infoForEmployers").style.display = "block";
window.x++;
}else{
document.getElementById("infoForEmployers").style.display = "none";
window.x++;
}
console.log(window.x);
Use this function to toggle the element
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Related
I need your precious help!!!
I have 2 slides on the top of the screen and they change after 10 seconds(loop). You can see here: http://packageonly.tk/test
If you click on FULL info - on both slides - you will see the contents on the bottom of the screen - i want them to be replaced. so only 1 info is being shown at the bottom - ORR - I wonder how can i connect the content at the bottom to the top - so the content would change accordingly.
thanks
I have use this code so far:
function myFunction() {
var x = document.getElementById("id1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x2 = document.getElementById("id2");
if (x2.style.display === "none") {
x2.style.display = "block";
} else {
x2.style.display = "none";
}
}
<div id="id1">This is id1</div>
<div id="id2">This is id2</div>
<button type="button" onclick="myFunction()">myFunction()</button>
<button type="button" onclick="myFunction2()">myFunction2()</button>
Looks like you're not making the old info disappear. Try this:
function myFunction() {
var x1 = document.getElementById("id1"); // renamed this
var x2 = document.getElementById("id2"); // added this
if (x1.style.display === "none") {
x1.style.display = "block";
x2.style.display = "none"; // added this to remove the old info
} else {
x1.style.display = "none";
}
}
function myFunction2() {
var x1 = document.getElementById("id1");
var x2 = document.getElementById("id2");
if (x2.style.display === "none") {
x2.style.display = "block";
x1.style.display = "none";
} else {
x2.style.display = "none";
}
}
I'm trying to make my first website, the function that I am looking to get is I
have a dropdown box where every option changes the hash. When the hash changes
I have a certain table and image display based on which hash. So far I can get
it to work but only with my first option. Whenever I try to add more only one
of them is functioning.
So far I've tried fitting all of my code into a single function but that seems very tedious and it would involve me writing a massive amount of
elem = document.getElementById("xxxxx");
elem.style.display = "block";
for every one of my options
function locationmario() {
if (window.location.hash === '#Mario') {
elem = document.getElementById("damagetablemario");
elem.style.display = "block";
elem = document.getElementById("marioimage");
elem.style.display = "block";
} else {
elem.style.display = "none";
elem = document.getElementById("damagetablemario");
elem.style.display = "none";
}
}
function locationdk() {
if (window.location.hash === "#Donkey-Kong") {
elem = document.getElementById("damagetabledk");
elem.style.display = "block";
elem = document.getElementById("dkimage");
elem.style.display = "block";
} else {
elem = document.getElementById("dkimage");
elem.style.display = "none";
elem = document.getElementById("damagetabledk");
elem.style.display = "none";
}
}
window.onhashchange = locationmario;
window.onhashchange = locationdk;
I want to be able to see my corresponding table and image for each hash that I switch to.
I really want to change more of your code, but the below should work.
First the clear_ids, simply loops through IDs and hides those divs by default. After that its just a simple IF else statement.
function locationchange() {
var clear_ids = ["marioimage","damagetablemario","damagetabledk","dkimage"];
for(z=0;z<=clear_ids.length-1;z++){
elem = document.getElementById(clear_ids[z]);
elem.style.display = "none";
}
if (window.location.hash === "#Donkey-Kong") {
elem = document.getElementById("damagetabledk");
elem.style.display = "block";
elem = document.getElementById("dkimage");
elem.style.display = "block";
}
else if (window.location.hash === '#Mario') {
elem = document.getElementById("damagetablemario");
elem.style.display = "block";
elem = document.getElementById("marioimage");
elem.style.display = "block";
}
}
window.onhashchange = locationchange;
window.onhashchange can only point to one function, so in the case above it will only point to locationdk. I suggest you refactor you code so that you have two if statements checking the window.location.
This works fine at all times except for the first time tab_toggle(0) is called.
when the first time this function is called the #box_home has display:block; so the function shouldn't do anything but whats happening is #box_port(the next div) is getting display:block; and #box_home remaining display:block as before. why is this happening. is it because when the function is called the variable has value undefined so doing some random thing.
Please answer this in javascript only, dont answer in jquery.
i couldnt make it work just this part in jsfiddle so i am sharing the entire webpage code
http://goo.gl/dhTUDH
<!-- Javascript -->
<script>
function tab_toggle(x) {
console.log("tab_toggle");
var home = document.getElementById("box_home").style;
var port = document.getElementById("box_port").style;
var about = document.getElementById("box_about").style;
var contact = document.getElementById("box_contact").style;
var box = [home,port,about,contact];
switch (x) {
case 0:
if (home.display == "block") {
console.log('end');
} else if (port.display == "block") {
box[0].display = "block";
box[1].display = "none";
} else if (about.display == "block") {
box[1].display = "block";
box[2].display = "none";
} else {
box[2].display = "block";
box[3].display = "none";
}
break;
default:
if (home.display == "block") {
box[0].display = "none";
box[1].display = "block";
} else if (port.display == "block") {
box[1].display = "none";
box[2].display = "block";
} else if (about.display == "block") {
box[2].display = "none";
box[3].display = "block";
} else {}
break;
}
}
<!-- HTML -->
◀
▶
<div id="box_home"></div>
<div id="box_port"></div>
<div id="box_about"></div>
<div id="box_contact"></div>
<!-- CSS -->
#box_home{display:block;}\
#box_port{display:none;}
#box_about{display:none;}
#box_contact{display:none;}
You can't access a style directly as a property, as in
home.display
Instead, use the getComputedStyle() method
getComputedStyle(home).display
element.style will get the element's inline style. Try getComputedStyle or add a class.
getComputedStyle(box[0]).getPropertyValue("display")
Not sure what would you achieve, but this should work:
var currentElement = 0;
(tab_toggle = function (x) {
var home = document.getElementById("box_home").style;
var port = document.getElementById("box_port").style;
var about = document.getElementById("box_about").style;
var contact = document.getElementById("box_contact").style;
var box = [home, port, about, contact];
if (currentElement + x < 0 || currentElement + x > box.length - 1)
return;
currentElement += x;
console.log("toggled " + currentElement);
for (var i = 0; i < box.length; i++) {
box[i].display = "none";
}
box[currentElement].display = "block";
})(0);
I'm having an issue with the code I have provided below and I'm new to Javascript and Jquery. What the code is supposed to do is on load it fetches a number for "unread notifications" then places that number in a div called notes_number. Then it should read the number from notes_number and depending on if the number is more than 0 it will show the div called notes_signal.
I do this on load, every 5 seconds, and then whenever the notifications button is pressed. The code isn't working because on load it doesn't put a number in the notes_number div. Also the other occurrences aren't working. At one point I thought it was working but now I can't figure out what's up. Here's the code:
//THIS IS TO CHECK WHEN THE PAGE COMES UP
$("#notes_number").load("getnumber.php");
if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}
if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
//THIS IS TO CHECK EVERY 5 SECONDS
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}
if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
}, 5000);
//THIS IS TO CHECK WHEN THE BUTTON IS PRESSED
function toggleDiv(divId) {
$("#"+divId).show();
$(document).ready(function(){
$("#myContent").load("getnotes.php?page=<? echo $page; ?>");
});
$("#notes_number").load("getnumber.php");
if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}
if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
}
Create a function:
function checkNotes() {
$.get( "getnumber.php", function( data ) {
$( "#notes_number" ).text( data );
if ( parseInt(data) > 0 ) {
$('#notes_signal').show();
} else {
$('#notes_signal').hide();
}
});
}
And call it on load, on interval and on button click.
I would use .get in your instance
var load = $.get('getnumber.php');
Javascript is asynchronous, which means that
if(document.getElementById("notes_number..... will run before
$("#notes_number").load("getnumber.php"); is completed.
So you have to use a call back like this:
$("#notes_number").load("getnumber.php",function(){
if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}
if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
});
Also I'm not sure that this will work elem.style.display = "";
Try 'elem.style.display = "block"; instead
In the following code I want to reduce these 5 functions down to 3.
The first function toggle_visibility() is already made universal by passing the id when I call the function from my html, however, I have to repeat the next two functions thankYouText_Change() and resettxt() because I don't know how to store the value of the Item variable, nor the p or OK_button variables and pass them to the next function so that they can be used by the other functions.
My goal is to figure out how to reduce these to a set of 3 functions that can be accessed at anytime in my html and applied to any and all relevant elements simply by using onClick="function_foo('desired_element_foo'), without having to have a separate set of functions for each time I want to use them on a different element.
I think that in order to do this I also need to know how to make the variables p and OK_Button have values that will automatically change and be stored based upon the id that I send to them/access them with.
function toggle_visibility(id) {
var Item = document.getElementById(id);
if (Item.style.display == 'block') {
Item.style.display = 'none';
}
else {
Item.style.display = 'block';
}
}
function thankYouText_Change() {
var p = document.getElementById("thanksForEmail");
var OK_Button = document.getElementById("okButton");
if (p.innerHTML == 'Thank you for submitting your e-mail.') {
OK_Button.style.display = 'none';
p.innerHTML = "Returning to page...";
setTimeout("toggle_visibility('msgSend'), resettxt()", 500);
}
}
function resettxt() {
var p = document.getElementById("thanksForEmail");
var OK_Button = document.getElementById("okButton");
if (p.innerHTML == 'Returning to page...') {
p.innerHTML = 'Thank you for submitting your e-mail.';
OK_Button.style.display = 'block';
}
}
//Start of repeated functions for second div and button elements
function thankYouText_Change2() {
var p = document.getElementById("thanksForEmail2");
var OK_Button = document.getElementById("okButton2");
if (p.innerHTML == 'Thank you for submitting your e-mail.') {
OK_Button.style.display = 'none';
p.innerHTML = "Returning to page...";
setTimeout("toggle_visibility('msgSend2'), resettxt2()", 500);
}
}
function resettxt2() {
var p = document.getElementById("thanksForEmail2");
var OK_Button = document.getElementById("okButton2");
if (p.innerHTML == 'Returning to page...') {
p.innerHTML = 'Thank you for submitting your e-mail.';
OK_Button.style.display = 'block';
}
}
For a first pass, you could simplify this to something like this:
function thankYouText_Change(pId, okId, msgSendId){
var p = document.getElementById(pId);
var OK_Button = document.getElementById(okId);
if(p.innerHTML == 'Thank you for submitting your e-mail.'){
OK_Button.style.display = 'none';
p.innerHTML = "Returning to page...";
setTimeout(function(){
toggle_visibility(msgSendId);
resettxt(pId, okId);
}, 500);
}
}
function resettxt(pId, okId){
var p = document.getElementById(pId);
var OK_Button = document.getElementById(okId);
if(p.innerHTML == 'Returning to page...'){
p.innerHTML = 'Thank you for submitting your e-mail.';
OK_Button.style.display = 'block';}
}
And then for each set of elements on the page, you just need to call thankYouText_Change with the correct IDs for each of the 3 related elements.
For a 2nd pass, you could simplify both of my above functions into one, so that you don't need to re-call document.getElementById on the same elements more than once (not significant, but I also like to declare everything with var - variables and functions alike):
var thankYouText_Change = function(pId, okId, msgSendId){
var p = document.getElementById(pId);
var OK_Button = document.getElementById(okId);
if(p.innerHTML == 'Thank you for submitting your e-mail.'){
OK_Button.style.display = 'none';
p.innerHTML = "Returning to page...";
setTimeout(function(){
toggle_visibility(msgSendId);
if(p.innerHTML == 'Returning to page...'){
p.innerHTML = 'Thank you for submitting your e-mail.';
OK_Button.style.display = 'block';
}
}, 500);
}
}
(Note that this eliminates the need for a resettxt function.)