Javascript - Multiple onclick elements for different actions

Javascript - Multiple onclick elements for different actions - javascript

I am trying to figure out how to make this code significantly cleaner. I've tried multiple things but nothing seems to work.
toggle1.onclick = function() {
var div = document.getElementById('toggle-content1');
if (div.style.display !== 'none') {
div.style.display = 'none';
document.getElementById("arrow1").className = "arrow-right";
}
else {
div.style.display = 'block';
document.getElementById("arrow1").className = "arrow-down";
}
};
toggle2.onclick = function() {
var div = document.getElementById('toggle-content2');
if (div.style.display !== 'none') {
div.style.display = 'none';
document.getElementById("arrow2").className = "arrow-right";
}
else {
div.style.display = 'block';
document.getElementById("arrow2").className = "arrow-down";
}
};
toggle3.onclick = function() {
var div = document.getElementById('toggle-content3');
if (div.style.display !== 'none') {
div.style.display = 'none';
document.getElementById("arrow3").className = "arrow-right";
}
else {
div.style.display = 'block';
document.getElementById("arrow3").className = "arrow-down";
}
};
If anyone has any tips or learning resources that I can look at I would really appreciate some assistance! From what I understand, I need to pull the number somehow and then attach it into the toggle function?
Thank you!

var toggle1 = document.getElementById('toggle-switch1');
var toggle2 = document.getElementById('toggle-switch2');
var toggle3 = document.getElementById('toggle-switch3');
function handler(divId) {
var div = document.getElementById(divId);
div.style.display = div.style.display !== 'none' ? 'none' : 'block';
};
toggle1.onclick = handler.bind('toggle-content1');
toggle2.onclick = handler.bind('toggle-content2');
toggle3.onclick = handler.bind('toggle-content3');
or
var toggle1 = document.getElementById('toggle-switch1');
var switches = {
'toggle-switch1': 'toggle-content1',
'toggle-switch2': 'toggle-content2',
'toggle-switch3': 'toggle-content3',
};
toggle1.parentElement.onclick = function(event) {
if (switches[event.target.id]) {
var div = document.getElementById(switches[event.target.id]);
div.style.display = div.style.display !== 'none' ? 'none' : 'block';
}
}
or you can specify on toggle-switch1 and toggle-switch2 and toggle-switch3 appropriate target names in data-switchTarget attribute, i.e. toggle-content1 for toggle-switch1, toggle-content2 for toggle-switch2 and toggle-content3 for toggle-switchTarget, e.g.:
<div id='toggle-switch1' data-switchTarget='toggle-content1'>...</div>
and code for that will be:
var toggle1 = document.getElementById('toggle-switch1');
toggle1.parentElement.onclick = function(event) {
if (event.target.dataset.switchTarget) {
var div = document.getElementById(event.target.dataset.switchTarget);
div.style.display = div.style.display !== 'none' ? 'none' : 'block';
}
}
upd: you have just updated question, so in that case you can use:
var toggle1 = document.getElementById('toggle-switch1');
var switches = {
'toggle-switch1': {content: 'toggle-content1', arrow: 'arrow1'},
'toggle-switch2': {content: 'toggle-content2', arrow: 'arrow2'},
'toggle-switch3': {content: 'toggle-content3', arrow: 'arrow3'},
};
toggle1.parentElement.onclick = function(event) {
if (switches[event.target.id]) {
var div = document.getElementById(switches[event.target.id].content);
var isDivDisplayed = div.style.display !== 'none';
div.style.display = isDivDisplayed ? 'none' : 'block';
document.getElementById(switches[event.target.id].arrow).className = isDivDisplayed ? 'arrow-right' : 'arrow-down';
}
}

Related

Vanilla JS modal issue

This seems like a simple idea to me clearly I'm missing something here and any advice on what is wrong would be appreciated. I have created a simple modal that will pop up when the button is clicked. I assumed by using an If/else statement in the JS function i could just chose to set the button ti show or to disappear. I know of work arounds for this but I'm curious why this solution will not work
function openNav() {
let open = document.querySelector('#open');
open.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'block';
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block';
}
})
}
openNav();
function closeNav() {
let close = document.querySelector('#close');
close.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'none';
if (nav.style.display === 'block') {
close.style.display = 'block';
} else {
close.style.display = 'none';
}
})
}
closeNav();
the button does work to open the modal after it is closed tho the "open" button does not re appear.

you can change it to toggle too since you should only use this function once for adding the event listener
function toggleNav() {
const open = document.querySelector('#open');
const close = document.querySelector('#close');
const nav = document.querySelector('nav');
open.addEventListener('click', () => {
nav.style.display = 'block';
close.style.display = 'block';
open.style.display = 'none';
})
close.addEventListener('click', () => {
nav.style.display = 'none';
close.style.display = 'none';
open.style.display = 'block';
})
}
toggleNav();
#close, nav {
display:none;
}
<button id="open">Open nav</button>
<button id="close">Close nav</button>
<nav>Nav</nav>
a few more errors:
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block'; // This is a comparison
}

You are not setting the open button back to block when the nav is closed. Try this code instead:
function openNav() {
let open = document.querySelector('#open');
open.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'block';
open.style.display = 'none';
close.style.display = 'block';
/*
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block';
}
*/
})
}
openNav();
function closeNav() {
let close = document.querySelector('#close');
close.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'none';
open.style.display = 'block';
close.style.display = 'none';
/*
if (nav.style.display === 'block') {
close.style.display = 'block';
} else {
close.style.display = 'none';
}
*/
})
}
closeNav();
I think you are assuming that the if block is monitoring the display. However, it does not, it only checks it once in the function call.

Javascript: How can this code be reduced or improved?

This is some JS that I've written, how can this be reduced?
it swaps the text as in hides one div and displays the other.
var directorOne = document.getElementById('directorOne').addEventListener("click", changeText);
var directorOneText = document.getElementById('directorOneText');
function changeText() {
if (directorOneText.style.display === "block") {
directorOneText.style.display = "none";
directorTwoText.style.display = "none";
console.log("luke open");
} else {
directorOneText.style.display = "block";
directorTwoText.style.display = "none";
}
}
var directorTwo = document.getElementById('directorTwo').addEventListener("click", changeText2);
var directorTwoText = document.getElementById('directorTwoText');
function changeText2() {
if (directorTwoText.style.display === "block") {
directorTwoText.style.display = "none";
directorOneText.style.display = "none";
console.log("bruce open");
} else {
directorTwoText.style.display = "block";
directorOneText.style.display = "none";
}
}

Using a single function that is called with the elements as parameters
var directorOneText = document.getElementById('directorOneText');
var directorTwoText = document.getElementById('directorTwoText');
function changeText(t1, t2) {
t1.style.display = (t1.style.display === "block") ? "none" : "block";
t2.style.display = "none";
}
var directorOneClickEvent = document.getElementById('directorOne').addEventListener("click", function(){ changeText(directorOneText, directorTwoText)});
var directorTwoClickEvent = document.getElementById('directorTwo').addEventListener("click", function(){ changeText(directorTwoText, directorOneText)});
#directorOne {background:#333; padding: 20px;}
#directorTwo {background:#ddd; padding: 20px;}
<div id="directorOne">d1<textarea id="directorOneText"></textarea></div>
<div id="directorTwo">d2<textarea id="directorTwoText"></textarea></div>

Hide DIV after click and show when h press

I have this div:
<div id="control">BLABLABLA</div>
And i want want when my page load, show it, when we click, i hide it, and if the visitor click on h, the div re-appear?

function myFunction(){
var control = document.getElementById('control');
var i = document.getElementById('i'); // id of i
var h = document.getElementById('h'); // id of h
control.style.display = "block";
i.onclick = function(){
control.style.display = "none";
};
h.onclick = function(){
control.style.display = "block";
};
}
<body onload="myFunction()">

May be this should work. I assume that you are meaning h as h1
var div = document.getElementById('control');
div.onclick = function(){
div.style.display = "none";
};
document.getElementsByTagName('h1')[0].onclick = function(){
div.style.display = "block";
}

If you are looking for Jquery code, then you may do this:--
$("#control" ).on('click', function() {
$(this).hide();
});
$(document).keypress(function(e) {
var key = e.which;
var div = $("#control" );
if(key == 72 || key == 104) {
div.show();
}
else if(key == 73 || key == 105) {
div.hide();
}
});

function undefined error on show hide a div

i am trying to show and hide a div on click of a checkbox but it shows an error of checktwelve or checkten is undefined.please help me out here
function hided2(checkten) {
if (checkten.checked == true) {
document.getElementById("d2").style.display = 'block';
document.getElementById("d1").style.display = 'none';
checktwelve.checked = false;
}
else {
document.getElementById("d2").style.display = 'none';
document.getElementById("d1").style.display = 'block';
checktwelve.checked = true;
}
}
function hided1(checktwelve) {
if (checktwelve.checked == true) {
document.getElementById("d1").style.display = 'block';
document.getElementById("d2").style.display = 'none';
checkten.checked = false;
}
else {
document.getElementById("d1").style.display = 'none';
document.getElementById("d2").style.display = 'block';
checkten.checked = true;
}
}
and i made Onclick="hided1(checktwelve)" on checktwelve and likewise on other
checkten and checktwelve are id of checkboxes

checktwelve or checkten is undefined
You haven't defined these variables.
Onclick="hided1(checktwelve)"
tries to find checktwelve in global scope and can't find it.

Show specific div based on url

I need to show a particular div when a button is clicked, only if the url is on a certain members profile. If its not on a profile page show another div that will display an error message. I have written it out extra long because I'm not that great at javascript. I'm having 2 problems with the code below:
1) only the first url will show the correct div not the url after the or (||)?
2) the else code that should show the error message shows up no matter what page you're on?
Please help.
function showdiv() {
if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
else document.getElementById('AA').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
document.getElementById('BB').style.display = 'block';
if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
else document.getElementById('BB').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
document.getElementById('CC').style.display = 'block';
if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
else document.getElementById('CC').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
document.getElementById('DD').style.display = 'block';
if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
else document.getElementById('DD').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
document.getElementById('EE').style.display = 'block';
if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
else document.getElementById('EE').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
document.getElementById('FF').style.display = 'block';
if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
else document.getElementById('FF').style.display = 'block';
}
else {
document.getElementById('error').style.display = 'block';
if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
else document.getElementById('error').style.display = 'block';
}
}

That code will be a nightmare to maintain. You might have better luck structuring it more like this:
function getId() {
var href = window.location.href;
if (href.indexOf('?') != -1) {
//remove any url parameters
href = href.substring(0, href.indexOf('?'));
}
if (href.charAt(href.length - 1) == '/') {
//check for a trailing '/', and remove it if necessary
href = href.substring(0, href.length - 1);
}
var parts = href.split("/");
return parts[parts.length - 1]; //last array element should contain the id
}
function showdiv(){
var id = getId();
var elem = document.getElementById(id);
if (elem) {
if (elem.style.display == 'none') {
elem.style.display = 'block';
}
else {
elem.style.display = 'none';
}
}
else {
if (document.getElementById('error').style.display == 'none') {
document.getElementById('error').style.display='block';
}
else {
document.getElementById('error').style.display='none';
}
}
}

You should work out the logic first.
This code makes no sense at all.
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
document.getElementById('AA').style.display = 'block';
}
else {
document.getElementById('AA').style.display = 'block';
}
Structurally, it is similar to this code (simplified and with comments)
var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
a = 'block';
}
Also try to factor our the repeating parts of your code as #aroth has nicely demonstrated.

Develop Reference

JavaScript is the programming language of the Web.

Javascript - Multiple onclick elements for different actions - javascript

Related

Vanilla JS modal issue

Javascript: How can this code be reduced or improved?

Hide DIV after click and show when h press

function undefined error on show hide a div

Show specific div based on url

Categories

Resources