We Keep Coding

Javascript problems with dropdown return

I have multiple dropdowns on my site and I am trying to alter the code so that when the chosen product is clicked again, the dropdown resets (i.e. exits the dropdown). See here in the middle of the page: https://www.arieliandcompany.com/make-a-career-transition.html
I am not managing to find a solution that retains the functionality of changing between products on dropdown, or being able to enter the dropdown again after exiting.
I tried adding this line, which closed the dropdown, but it messed up other elements of the dropdown functionality as mentioned above:
chosenProd.onclick = function(){showIndProd(0);};
Would anyone be able to help??
function showIndProd(prodNum){
var indProgs = document.getElementsByClassName('indProg');
var indProgImgs = document.getElementsByClassName('indProgImg');
var indProgPs = document.getElementsByClassName('indProgP');
var progMores = document.getElementsByClassName('indProdMore');
var chosenProd = document.getElementById(["indProg"+prodNum]);
var chosenProdMore = document.getElementById(["indProdMore0"+prodNum]);
var closeBut = document.getElementById('closeProdsMore');
for (i = 0; i < indProgImgs.length; i++) {
if (prodNum != 0){
indProgs[i].style.opacity = "0.3";
indProgImgs[i].style.height = "300px";
indProgs[i].style.filter = "grayscale(100%)";
progMores[i].style.display = "none";
chosenProd.style.opacity = "1";
chosenProd.style.filter = "none";
chosenProdMore.style.display = "block";
closeBut.style.display = "inline-block";
closeBut.style.position = "relative";
chosenProd.onclick = function(){showIndProd(0);};
} else { //close all and restore to default
indProgs[i].style.opacity = "1";
indProgImgs[i].style.height = "550px";
indProgPs[i].style.display = "table";
indProgs[i].style.filter = "grayscale(0%)";
progMores[i].style.display = "none";
closeBut.style.display = "none";
}
}
}

Seems the issue is with these two line
var chosenProd = document.getElementById(["indProg"+prodNum]);
var chosenProdMore = document.getElementById(["indProdMore0"+prodNum]);
Instead of passing string you are passing array

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

How to show and hide nested DIVs using javascript

I have two divs like following:
<div id="soil-trigger"
onclick="getWidgetData('soil-trigger'); getWidgetSoilChart();"></div>
<div id="water-trigger"
onclick="getWidgetData('water-trigger'); getWidgetWaterChart();"></div>
Clicking on one div (i.e: soil-trigger/water-trigger) generates a chart under time-series panel. For doing this I am using follwoing JS:
function getWidgetData(name){
var curEl = document.getElementById('time-series');
curEl.className = "active";
var el7 = document.getElementById('system-series');
var el8 = document.getElementById('cluster-series');
var curE2 = document.getElementById('system-health');
var curE3 = document.getElementById('cluster-info');
curE2.className = "";
curE3.className = "";
el7.className = "hide";
el8.className = "hide";
widgetEl = document.getElementById("soil-chart");
widgetEl5 = document.getElementById("water-chart");
var el = document.getElementById('soil-chart');
el.className = "";
var el5 = document.getElementById('water-chart');
el5.className = "";
if(name == 'soil-trigger'){
widgetEl.innerHTML = document.getElementById('soil-chart').outerHTML;
el.className = "show";
el5.className = "hide";
}
if(name == 'water-trigger') {
widgetEl5.innerHTML = document.getElementById('water-chart').outerHTML;
el5.className = "show";
el.className = "hide";
}
}
My code that I provided here is working like this:
When I click on soil-trigger it is showing chart under time-series for soil-data, but not showing anything under system-series and cluster-series.
Again, when I click on water-trigger it is showing chart under time-series for water-data, but not showing anything under system-series and cluster-series.
What I actually need when I will click on soil-trigger it will show three different charts under time-series, system-series, and cluster-series for soil data. Again when I will click on water-trigger it will show three different charts under time-series, system-series, and cluster-series for water data.
How can I achieve that by changing my code. Any help please.
Thanks

function getWidgetData(name) {
var timeSeries = document.getElementById('time-series'),
systemSeries = document.getElementById('system-series'),
clusterSeries = document.getElementById('cluster-series'),
systemHealth = document.getElementById('system-health'),
clusterInfo = document.getElementById('cluster-info'),
waterChart = document.getElementById("water-chart"),
soilChart = document.getElementById('soil-chart');
timeSeries.className = "active";
systemHealth.className = "";
clusterInfo.className = "";
systemSeries.className = "hide";
clusterSeries.className = "hide";
soilChart.className = "";
waterChart.className = "";
if (name == 'soil-trigger') {
soilChart.innerHTML =soilChart.outerHTML;
soilChart.className = "show";
waterChart.className = "hide";
}
if (name == 'water-trigger') {
waterChart.innerHTML = waterChart.outerHTML;
waterChart.className = "show";
soilChart.className = "hide";
}
}
Your code can be broken down like this, its a quick re-factoring and prone to errors. May be you can debug this yourself now.
soilChart.innerHTML =soilChart.outerHTML;//??????????

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.

How can I make these javascript functions universally applicable to any desired element?

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