JS change content by click - javascript

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";
}
}

Related

JavaScript: No toggle by click on <a> link

This is my code:
var works = document.querySelector('#works');
var cross_one = document.querySelector('#cross_one');
var works_navigation = document.querySelector('#works_navigation');
works.addEventListener('click', function (event) {
if (cross_one.style.display == "") {
cross_one.style.display = "none";
works_navigation.style.display = "block";
} else {
cross_one.style.display = "";
works_navigation.style.display = "none";
}
}
);
Included is a toggle function which works very well. But additionally, I need a command like this:
If a <a> link inside the construction gets clicked, it should not toggle.
My idea would be something like this:
var allLinks = document.links;
allLinks[i].onclick = function () {
cross_one.style.display = "none"; };
But I don't know who to indclude it.
Not sure i understood your question, but you might be looking for something like this :
In your HTML, add your link like
My Link
and in your JS
var toggle = true;
function doNotToggle() {
toggle = false;
}
var works = document.querySelector('#works');
var cross_one = document.querySelector('#cross_one');
var works_navigation = document.querySelector('#works_navigation');
works.addEventListener('click', function (event) {
if (toggle) {
if (cross_one.style.display == "") {
cross_one.style.display = "none";
works_navigation.style.display = "block";
} else {
cross_one.style.display = "";
works_navigation.style.display = "none";
}
}
});
and clicking your link will stop your eventListener function from doing anything.

Why won't my display block reappear?

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';
}
}

Creating a Show/Hide Loop that Considers Radio Buttons and a Drop-down Menu

I am currently running a page that requires a drop-down menu and three radio buttons for user selections. Each time the user changes their selection, a div is displayed based on their selection while all other divs are hidden. My current JavaScript works, but it's a massive, and probably inefficient mess.
EX:
function enrollmentChange() {
var enrollmentChoice = document.getElementById("enrollmentChoice");
if (document.getElementById("onC").checked) {
if (enrollmentChoice.options[enrollmentChoice.selectedIndex].text === "Please select enrollment status") {
document.getElementById("full-timeOn").style.display = "none";
document.getElementById("three-quarter-timeOn").style.display = "none";
document.getElementById("half-timeOn").style.display = "none";
document.getElementById("less-than-half-timeOn").style.display = "none";
document.getElementById("full-timeOff").style.display = "none";
document.getElementById("three-quarter-timeOff").style.display = "none";
document.getElementById("half-timeOff").style.display = "none";
document.getElementById("less-than-half-timeOff").style.display = "none";
document.getElementById("full-timeComm").style.display = "none";
document.getElementById("three-quarter-timeComm").style.display = "none";
document.getElementById("half-timeComm").style.display = "none";
document.getElementById("less-than-half-timeComm").style.display = "none";
}
You can see it all here http://jsfiddle.net/5h3kL/2/.
Is there a way for me to condense this into some type of loop? I have played around with a few loops, but I'm uncertain of how to make the loop consider both the radio button selection and drop-down menu selection.
I think this might shorten things a bit:
function enrollmentChange() {
var id = document.getElementById, // short hand
choice = id("enrollmentChoice").options[id("enrollmentChoice").selectedIndex].text,
which = id("onC").checked ? "On" :
id("offC").checked ? "Off" :
id("comm").checked ? "Comm" : "";
if (which !== "") {
["On", "Off", "Comm"].forEach(function(w) {
id("full-time" + w).style.display = "none";
id("three-quarter-time" + w).style.display = "none";
id("half-time" + w).style.display = "none";
id("less-than-half-time" + w).style.display = "none";
});
if (choice === "Full Time (12 or More Credit Hours)") {
id("full-time" + which).style.display = "block";
} else if (choice === "Three-Quarter Time (9-11 Credit Hours)") {
id("three-quarter-time" + which).style.display = "block";
} else if (choice === "Half Time (6-8 Credit Hours)") {
id("half-time" + which).style.display = "block";
} else {
id("less-than-half-time" + which).style.display = "block";
}
}
}
You can do something like that:
var enrollmentChoice = document.getElementById("enrollmentChoice");
var arraymap = ['Please select enrollment status',''],
['Full Time (12 or More Credit Hours)','three-quarter-timeOn'],
['Half Time (6-8 Credit Hours)','half-timeOn'] ... ;
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'radio') {
for(var ii=0;ii<arraymap.length;ii++){
if(arraymap[ii][0] == enrollmentChoice.options[enrollmentChoice.selectedIndex].text && arraymap[ii][1] == inputs[i].id){
inputs[i].style.display = 'block';
}else{
inputs[i].style.display = 'none';
}
}
}
}

Menu Toggle function not working properly

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);

Simplifiying IF statements

I've been studying javaScript for two weeks now and I know there must be a better wayf doing what is shown bellow.
This is what happens:
The function myId() call another function and receives back a parameter that can be mk-prod06, mk-prod05, mk-prod04, mk-prod03. But I was wondering if I can make this function more flexible by accepting any parameter (mk-prod0x) where x can be any number. I don't' want to hand write every "if" for it. Is that even possible in this case? Thank you.
//Hides and shows product boxes
function myId() {
adjustStyle();
var showProduct6, showProduct5, showProduct4, showProduct3, hideProduct6, hideProduct5, hideProduct4, hideProduct3;
if (oProdId === "mk-prod06") {
showProduct6 = document.getElementById("mk-prod06");
showProduct5 = document.getElementById("mk-prod05");
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct6.style.display = "inline";
showProduct5.style.display = "inline";
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod05") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct6.style.display = "none";
showProduct5 = document.getElementById("mk-prod05");
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct5.style.display = "inline";
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod04") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod03") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct4 = document.getElementById("mk-prod04");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
hideProduct4.style.display = "none";
showProduct3 = document.getElementById("mk-prod03");
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod02") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct4 = document.getElementById("mk-prod04");
hideProduct3 = document.getElementById("mk-prod03");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
hideProduct4.style.display = "none";
hideProduct3.style.display = "none";
}
}
Well, you basically have written out a loop. And it's quite trivial to formulate that loop explicitly:
function myId() {
adjustStyle();
var x = // the number, wherever you got it from. Maybe:
// parseInt(oProdId.slice(7), 10)
for (var i=6; i>2; i--) {
var product = document.getElementById("mk-prod"+("0"+i).slice(-2));
product.style.display = i > x ? "none" : "inline";
}
}
Something like this should work:
function hideShow(id) {
var upTo = id.match(/md-prod0(\d)/)[1];
for (var i = 3; i < 6; i++) {
var element = document.getElementById('md-prod0' + i);
if (i <= upTo) element.style.display = 'inline';
else element.style.display = 'none';
}
}
You have to adjust it slightly if more elements will be added.
Basically it loops over 3 to 6 and checks whether the current element is less than or equal to the given ID. In that case it shows the element. Otherwise it hides it.

Categories