Displaying div based on dropdown value

Question

I have 3 divs each with a distinct id. Based off the value of a dropdown I have, I want to show one of the divs. I created my function and call it, but for some reason no change occurs. The new value of the dropdown is never recorded, when I use console.log. I am unsure what is causing the problem and would appreciate any help.

HTML

<div class="ins-left" id="fifteen">
    <p>$15</p>
</div>

<div class="ins-left" id="thirty">
    <p>$30</p>
</div>

<div class="ins-left" id="fourtyfive">
    <p>$45</p>
</div>

CSS

#fifteen {
    display: none;
}

#thirty {
    display: none;
}

#fourtyfive {
    display: none;
}

JS

var length = document.getElementById('length');
var chosenLength = length.options[length.selectedIndex].value;

var start = document.getElementById('start').innerHTML.split('.').join('').toLocaleLowerCase();
var end = document.getElementById('end').innerHTML.split('.').join('').toLocaleLowerCase();
var time = document.getElementById('time');

time.disabled = true;

function disabled() {
    if (chosenLength.value != "") {
        time.disabled = false;
    }
}

var slotTimes = [];
document.getElementById("length").onchange = function (evt) {
    var timeDistance = evt.target.value;
    var startMoment = moment(start, "h:mm a");
    var endMoment = moment(end, "h:mm a");
    slotTimes = [];

    while (startMoment.isSameOrBefore(endMoment)) {
        slotTimes.push(startMoment.format("h:mm a"));
        startMoment = startMoment.add(timeDistance, 'minutes');
    }

    addDropdown();
    price();
};

function price(){

    if (chosenLength.value === "") {
        document.getElementById('fifteen').style.display = "none";
        document.getElementById('thirty').style.display = "none";
        document.getElementById('fourtyfive').style.display = "none";
    }
    if (chosenLength.value === "30") {
        document.getElementById('fifteen').style.display = "block";
        document.getElementById('thirty').style.display = "none";
        document.getElementById('fourtyfive').style.display = "none";
    }
    if (chosenLength.value === "60") {
        document.getElementById('fifteen').style.display = "none";
        document.getElementById('thirty').style.display = "block";
        document.getElementById('fourtyfive').style.display = "none";
    }
    if (chosenLength.value === "90") {
        document.getElementById('fifteen').style.display = "none";
        document.getElementById('thirty').style.display = "none";
        document.getElementById('fourtyfive').style.display = "block";
    }
}


function addDropdown() {
    var doc = '',
        times = slotTimes,
        i;
    for (i = 0; i < times.length; i++) {
        doc += "<option value='" + times[i] + "'>" + times[i] + "</option>";
    }

    document.getElementById('time').innerHTML = doc;
    disabled();
}

How do you call `price()`? Your example is inclomplete. Additionally `chosenLength` is never set — empiric, Mar 10 '19 at 20:47
You only set `chosenLength` at the beginning of the script. You don't override it with the new value once the change event is invoked — empiric, Mar 10 '19 at 20:50
@empiric That makes sense why the console.log value wasn't changing. Could you possibly provide me an example on how to fix this? — , Mar 10 '19 at 20:52
What you don't change the price value inside the div instead of toggling div's? — Mark Baijens, Mar 10 '19 at 21:07
@MarkBaijens I changed my HTML and function to change the price value instead, but the core problem of the chosenLength value not being over ridden when changed is still present — , Mar 10 '19 at 21:19
Are you able to make a [fiddle](https://jsfiddle.net/) with your dropdown markup included? — Elliot, Mar 10 '19 at 21:33

Bruno Monteiro · Answer 1 · 2019-03-11T01:29:30.977

2

I made a simple working example for you here, so you can adjust your code based on this:

https://codepen.io/brunomont/pen/WmExvV

I had to remove a couple of broken references since your HTML didn't include everything (like the time elements). Also, make sure you have all the dependencies loading (I noticed you are using moment.js).

The changes I made were:

Adding a document.addEventListener("DOMContentLoaded", function() to make sure your HTML was loaded, before you tyr to run the JavaScript.
Change the way you bind your onChange function to be document.getElementById('length').addEventListener('change', function (evt)

Basically, the addEventListener is more flexible than onChange. You can read more about this change here:

addEventListener vs onclick

Hope it helps :)

edited Mar 11 '19 at 01:29

answered Mar 10 '19 at 21:47

Bruno Monteiro

4,153
5
29
48

I agree that `.addEventListener()` is the way to go. However assigning an function to the `onChange` property like the OP did does not mean it will run only once. – Mark Baijens Mar 10 '19 at 22:06
1

My bad...I completely miss the concepts there @MarkBaijens. I updated the answer. Thanks for pointing that out :) – Bruno Monteiro Mar 11 '19 at 01:30

Displaying div based on dropdown value

1 Answers1