0

我有 3 个 div，每个 div 都有一个不同的 id。根据我拥有的下拉列表的值，我想显示其中一个 div。我创建了我的函数并调用它，但由于某种原因没有发生任何变化。当我使用 console.log 时，永远不会记录下拉列表的新值。我不确定是什么导致了问题，并希望得到任何帮助。

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

1 回答 1

2

我在这里为您做了一个简单的工作示例，因此您可以根据此调整代码：

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

我不得不删除几个损坏的引用，因为您的 HTML 没有包含所有内容（例如时间元素）。另外，请确保您已加载所有依赖项（我注意到您正在使用 moment.js）。

我所做的更改是：

  • 在您运行 JavaScript 之前，添加一个document.addEventListener("DOMContentLoaded", function()以确保您的 HTML 已加载。
  • 更改绑定onChange函数的方式document.getElementById('length').addEventListener('change', function (evt)

基本上，addEventListener比 更灵活onChange。您可以在此处阅读有关此更改的更多信息：

addEventListener 与 onclick

希望能帮助到你 ：）

于 2019-03-10T21:47:18.593 回答