Javascript problems with dropdown return - javascript

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

Related

array problems in JavaScript

I have built out an example of what I'm trying to accomplish. I want to be able to make an array of passwords where if one is correct, then they are all sent to another page. However, in the following example it is not working. If I input the name that is suppose to pop up with a hello message it states its wrong when I have it in an Array.
let textarea = document.getElementById('banner');
let okbutton = document.getElementById('btn');
let form = document.getElementById('user-form');
let textBox = document.getElementById('text-box');
let spanMe = document.getElementById('spans');
let userNameIs = ['marquise', 'quise', 'tom'];
textarea.style.display = 'none';
spanMe.style.display = 'none';
textarea.style.display = 'none';
okbutton.addEventListener('click', function() {
if (textBox.value.length <= 4) {
spanMe.style.display = 'block';
spanMe.style.color = 'red';
} else if (textBox == userNameIs[1]) {
spanMe.style.display = 'none';
textarea.style.display = "block"
textarea.innerText = 'hello' + ' ' + textBox.value;
} else if (textBox != userNameIs[1])
spanMe.style.display = 'block';
spanMe.style.color = 'red';
});

Javascript and HTML onclick event- how to disable and add

As an experiment for a larger project, I am trying to make a text battle (it's in progress). What I need is when I press the button, it prints the text into a <p> tag. Also, it makes two buttons, one that says ATTACK and the other says SPARE. How would I
disable the initial onclick event from the button so I don't keep on making new buttons
add an onclick event to the new ones so I could run a different function.
This is my code:
HTML:
<button id = 'button' onclick='enemy()'>button</button>
And my JavaScript:
// PLAYER
var playerHP = 100;
var playerAt = 10;
var playerDef = 0;
//ENEMY
var enemyHP = 50;
var enemyAt = 5;
//FIGHT
function enemy() {
document.getElementById("test").innerHTML = "You encounter a wild MONSTER(AT:5 ¦ HP:50). Will you attack?";
for (var i = 0; i < 1; i++) {
var btnAt = document.createElement('BUTTON');
var t = document.createTextNode('Attack!');
btnAt.appendChild(t);
document.body.appendChild(btnAt);
var btnSp = document.createElement('BUTTON');
var d = document.createTextNode('Spare!');
btnSp.appendChild(d);
document.body.appendChild(btnSp);
}
}
Ignore some of the stuff- its for future use.
P.S. No jQuery, please, unless it is unavoidable.
something like this using .Disabled to disable the button, so you dont have to clear out the onclick for later use. and just set .onclick to whatever function you want on the button you built. I also recommend not trying to avoid jquery... Once you start using it, you can relize how much easier it can make your life. Also, why the loop?
// PLAYER
var playerHP = 100;
var playerAt = 10;
var playerDef = 0;
//ENEMY
var enemyHP = 50;
var enemyAt = 5;
//FIGHT
function enemy() {
document.getElementById("test").innerHTML = "You encounter a wild MONSTER(AT:5 ¦ HP:50). Will you attack?";
var btnAt = document.createElement('BUTTON');
//set onlick for button
btnAt.onclick = function()
{
//do stuff here
}
var t = document.createTextNode('Attack!');
btnAt.appendChild(t);
document.body.appendChild(btnAt);
var btnSp = document.createElement('BUTTON');
var d = document.createTextNode('Spare!');
btnSp.appendChild(d);
document.body.appendChild(btnSp);
//disable button
var originalbtn = document.getElementById("button").disabled = true;
}

Dynamically Generating Dropdown options

I need help with this dynamically generated dropdown options. What I am trying to accomplish is have three dynamically generated dropdown menus that are dependent on each other. I can get the first dropdown to be created just fine, but my main issue is that I cannot get the onchange to fire when something new is selected.
var dropDown = document.createElement("FIELDSET");
var course_s = document.createElement("SELECT");
course_s.id = "course";
for(var j = 0; j < courseList.length+1; j++){
var course_o = document.createElement("OPTION");
if(j == 0){
course_o.value = "NONE";
course_o.innerHTML = "NONE";
}else{
course_o.value = courseList[j-1];
course_o.innerHTML = courseTitle[j-1]+" "+courseNumber[j-1];
}
course_s.appendChild(course_o);
}
var module_s = document.createElement("SELECT");
module_s.id = "module";
var module_o = document.createElement("OPTION");
module_o.value = "NONE";
module_o.innerHTML = "NONE";
module_s.appendChild(module_o);
var segment_s = document.createElement("SELECT");
segment_s.id = "segment";
var segment_o = document.createElement("OPTION");
segment_o.value = "NONE";
segment_o.innerHTML = "NONE";
segment_s.appendChild(segment_o);
Module and segment options are set when course has been changed.

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.

Categories