Javascript:检索在没有JQuery的情况下选择了哪个下拉菜单?

时间:2016-01-30 23:05:50

标签: javascript html menu element intervals

编辑:JSFiddle

我不确定如何处理这个问题。我不愿意使用不必要的id或类。

我有一个下拉菜单,其中包含用于更改单词实时显示在文本框中的速度的选项。我试图通过getTextSpeed函数访问选择了哪个选项以及以毫秒为单位的值。

这在runDisplay函数中使用,该函数从输入文本中获取一组给定的单词并一次显示一个单词,这些单词与getTextSpeed给出的毫秒数交错。

这似乎不起作用。 getTextSpeed似乎没有返回值,因此我猜测setInterval()正在运行默认值。

我做错了吗?据我了解,这应该有效。我试图检索值,而不是文本,值是一个数字。控制台中没有错误消息,当我在运行网页时尝试更改速度选项时没有明显的变化。

<fieldset>
          <p>Speed</p>
            <select id="speed">
                <option value="300">200 wpm</option>
                <option value="200">300 wpm</option>
                <option value="171" selected="selected">350 wpm</option>
                <option value="150">400 wpm</option>
                <option value="133">450 wpm</option>
                <option value="120">500 wpm</option>
            </select>
      </fieldset>

function getTextSpeed() {
    var speeds = document.getElementById("speed");
    return speeds.options[speed.selectedIndex].value;
}

function start() {
  var text = document.getElementById("words").value;
  var list = text.split(/\s+/);
  runDisplay(list, "display")
} 

function runDisplay(data, id) {
        var reader = document.getElementById(id);
        var index = 0;
        var textSpeed = getTextSpeed();
        if (timer) {
            clearInterval(timer);
        }
        if (data.length) {
            timer = setInterval(function() {
            reader.innerHTML = data[index++];
            index = index % data.length;
          }, textSpeed);
        }
    }

1 个答案:

答案 0 :(得分:0)

你有这样的尝试吗?

function getTextSpeed() {
    var speeds = document.getElementById("speed").value;
    return speeds;
}