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

EDIT: JSFiddle

I'm not sure how to approach this. I'm reluctant to use an unnecessary amount of ids or classes.

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

I have a drop-down menu that contains options for changing the speed of how fast words are displayed on a text box in real time. I've attempted to access which option is selected and the value in milliseconds through the getTextSpeed function.

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

This is used in the runDisplay function which takes a given set of words from input text and displays them, one word at a time, which are staggered by the amount of milliseconds given by getTextSpeed.

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

This doesn't seem to be working. getTextSpeed doesn't seem to return a value, so I'm guessing that setInterval() is running the default.

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

Am I doing this incorrectly? By my understanding, this should work. I am trying to retrieve the value, not the text, and the value is a number. There are no error messages in the console, just no noticeable changes when I attempt to change the speed options when running the webpage.

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

<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 个解决方案

#1

Did you try it this way?

你这样试试吗?

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