I made this 2 functions based on different sessions, which displays/hides diffrent HTML code according to the session. Any idea on how this could could be simplified? If it possible at all to write it with less and better code?
// HTML / user interface for ADMIN view
function showAdminInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
btnCreateProduct.style.display = "flex";
btnCreateUser.style.display = "flex";
pageViewProducts.style.display ="flex";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
btnSubscribeNav.style.display = "none";
}
/************************************************************************/
/************************************************************************/
/************************************************************************/
// HTML / user interface for USER view
function showUserInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
pageViewProducts.style.display ="flex";
btnEditUsersNav.style.display = "none";
btnEditProductsNav.style.display = "none";
btnViewSubscribersNav.style.display = "none";
btnCreateProduct.style.display = "none";
btnCreateUser.style.display = "none";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
}
You can separate the shared style changes like this:
function initInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
pageViewProducts.style.display ="flex";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
}
function showAdminInterface() {
initInterface();
btnCreateProduct.style.display = "flex";
btnCreateUser.style.display = "flex";
btnSubscribeNav.style.display = "none";
}
function showUserInterface() {
initInterface();
btnEditUsersNav.style.display = "none";
btnEditProductsNav.style.display = "none";
btnViewSubscribersNav.style.display = "none";
btnCreateProduct.style.display = "none";
btnCreateUser.style.display = "none";
}
and you can create helper function for show and hide:
function hide(el) {
el.style.display = "none"; // you can do the same with show and flex
}
function showUserInterface() {
initInterface();
hide(btnEditUsersNav);
hide(btnEditProductsNav);
hide(btnViewSubscribersNav);
hide(btnCreateProduct);
hide(btnCreateUser);
}
or
function showUserInterface() {
initInterface();
[
btnEditUsersNav,
btnEditProductsNav,
btnViewSubscribersNav,
btnCreateProduct,
btnCreateUser
].forEach(hide);
}
Just for the example, but you get the idea.
function showInterface(isAdmin = false) {
lblDropdown.style.display = isAdmin ? "flex" : "none";
... // the rest
}
Related
Can I use this code for (bootstrap 5) without jQuery?
<script type="text/javascript">
$( document ).ready(function() {
setInterval(function(){
var attend = jQuery('#pills-profile').hasClass('active');
if(attend == true){
jQuery('#id2').show();
jQuery('#id1').hide();
}else{
jQuery('#id2').hide();
jQuery('#id1').show();
}
}, 1000)
});
Something like this
document.addEventListener("DOMContentLoaded", function () {
const first = document.getElementById("id1");
const second = document.getElementById("id2");
const attend = document.getElementById("pills-profile");
setInterval(function () {
if (attend.classList.contains("active")) {
second.style.display = "block";
first.style.display = "none";
} else {
second.style.display = "none";
first.style.display = "block";
}
}, 1000);
});
So I have a div with 10 other divs inside. They have all display= “none”. Each div is linked with a image, when you click on the image, the linked div opens up. But the div only can be closed when I click on the image again. But if I click all 10 images, all 10 divs will open up & they overlap each other.
How can I fix that only 1 div can be showed at a time? So if one div is opened and I click on a new image; the old div disappears and the new div shows up?
function hideShowDiv() {
function showDiv() {
if(kledingInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv2() {
if(ewlInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv3() {
if(onderwijsInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv4() {
if(overigeInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv5() {
if(vrijeTijsInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
}
hideShowDiv();
so this is what i have tried but it doesn't work. All divs have the class info.
Base on the code you post
function hideShowDiv() {
function showDiv() {
if(kledingInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv2() {
if(ewlInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv3() {
if(onderwijsInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv4() {
if(overigeInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv5() {
if(vrijeTijsInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
}
hideShowDiv();
There are several things, first of all, you are nesting the function. when you call hideShowDiv(), you are just defining 5 functions instead of executing anyone of them. to archive what you discribe, you just need to document.querySelectorAll(".info").style.display = "none"; first and then run all the if statement. like this:
function hideShowDiv(element) {
document.querySelectorAll(".info").style.display = "none";
element.style.display = "inline-block")
}
hideShowDiv(document.getElementById("whatevertheidis"));
I would like the pause button to resume the song from where it was paused instead of restarting the song.
with vanilla javascript only please,
Thank you !
var songs = [
"song1.mp3",
"song2.mp3",
"song3.mp3",
];
var song = new Audio();
var currentSong = 0;
var playButton = document.querySelector(".play");
var pauseButton = document.querySelector(".pause");
function playSong() {
song.src = songs[currentSong];
pauseButton.style.display = "block";
playButton.style.display = "none";
songTitle.textContent = sT[currentSong];
Artist.textContent = artistNames[currentSong];
songCover.src = songCovers[currentSong];
song.play();
}
playButton.addEventListener("click", function playSong() {
song.src = songs[currentSong];
pauseButton.style.display = "block";
playButton.style.display = "none";
songTitle.textContent = sT[currentSong];
Artist.textContent = artistNames[currentSong];
songCover.src = songCovers[currentSong];
song.play();
});
pauseButton.addEventListener("click", function pauseSong() {
song.pause();
pauseButton.style.display = "none";
playButton.style.display = "block";
});
The song resets because every time you click on the play button, the src of the song is being assigned again. And therefor the song will start over from the start.
So you'll need to change the part of your code where the song is selected. Do that outside of the play function so that clicking play will only play, and clicking pause will only pause.
function chooseSong() {
song.src = songs[currentSong];
songTitle.textContent = sT[currentSong];
Artist.textContent = artistNames[currentSong];
songCover.src = songCovers[currentSong];
}
function playSong() {
pauseButton.style.display = "block";
playButton.style.display = "none";
song.play();
}
function pauseSong() {
pauseButton.style.display = "none";
playButton.style.display = "block";
song.pause();
}
playButton.addEventListener('click', playSong);
pauseButton.addEventListener('click', pauseSong);
chooseSong();
I am trying to make a button which when clicked will stop the execution of the automatic slideshow.
The clearTimeout() function isn't working for some strange reason. can someone please tell me how to make it work?
var button = document.getElementById("button");
button.addEventListener("click",stop);
function stop(){
**clearTimeout(t);**
}
window.addEventListener("load",finalResult);
**var t = setTimeout(function(){finalResult()},0);**
function finalResult(){
getFirstImage();
function getFirstImage(){
img1.style.display = "block";
setTimeout(getSecondImage,3000);
}
function getSecondImage(){
img1.style.display = "none";
img2.style.display = "block";
setTimeout(getThirdImage,3000);
}
function getThirdImage(){
img3.style.display = "block";
img2.style.display = "none";
setTimeout(getFourthImage,3000);
}
function getFourthImage(){
img4.style.display = "block";
img3.style.display = "none";
setTimeout(loopAgain,3000);
}
function loopAgain(){
img4.style.display = "none";
setTimeout(getFirstImage,0);
}
}
You have to clear all the timeouts present in the page.
Something like this:
var button = document.getElementById("button");
button.addEventListener("click", stop);
function stop() {
clearTimeout(t);
clearTimeout(a);
clearTimeout(b);
clearTimeout(c);
clearTimeout(d);
clearTimeout(e);
}
window.addEventListener("load", finalResult);
var t = setTimeout(function() {
finalResult()
}, 100);
var a, b, c, d, e;
function finalResult() {
getFirstImage();
function getFirstImage() {
img1.style.display = "block";
a = setTimeout(getSecondImage, 3000);
}
function getSecondImage() {
img1.style.display = "none";
img2.style.display = "block";
b = setTimeout(getThirdImage, 3000);
}
function getThirdImage() {
img3.style.display = "block";
img2.style.display = "none";
c = setTimeout(getFourthImage, 3000);
}
function getFourthImage() {
img4.style.display = "block";
img3.style.display = "none";
d = setTimeout(loopAgain, 3000);
}
function loopAgain() {
img4.style.display = "none";
e = setTimeout(getFirstImage, 0);
}
}
My working code:
if (new Date() < new Date(2013,3,25)) {
document.getElementById("StatusOn").style.display = "block";
document.getElementById("StatusOff").style.display = "none";
} else {
document.getElementById("StatusOn").style.display = "none";
document.getElementById("StatusOff").style.display = "block";
}
How do I add this check interval to the code above?
// call the "check ..." function every 10 seconds.
//setInterval("check_if_it_is_some_date_today()", 10000);
Wrap it in a function, which is what you should be passing to setInterval anyway:
setInterval(function() {
if (new Date() < new Date(2013,3,25)) {
document.getElementById("StatusOn").style.display = "block";
document.getElementById("StatusOff").style.display = "none";
} else {
document.getElementById("StatusOn").style.display = "none";
document.getElementById("StatusOff").style.display = "block";
}
}, 10000);