CODEWITHSUNDEEP
javascripthtml
user8039194
user8039194

Reputation:

Displaying div based on dropdown value

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

Upvotes: 0

Views: 183

Answers (1)

Bruno Monteiro
Bruno Monteiro

Reputation: 4519

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

Upvotes: 2

Related Questions