为什么这个 onchange 不起作用

Question

我正在尝试在 js 中解决一个简单的问题。我不知道为什么我的速度方法没有被调用。我已经插入了 console.log() 来检查是否所有其他方法都有效并且结果是有效的。我从 html 和 js 中插入了代码。这是一个选择列表，如果我选择不同的值，应该调用 speed 方法，但它永远不会。任何帮助表示赞赏。

(function() {
"use strict";
window.onload = function() {
    document.getElementById("startbutton").onclick = displayWords;
    document.getElementById("stopbutton").onclick =  stop;  
    document.getElementById("speedMenu").onchange = speed;
};

var timer = null;
var speed = 171;
var count = 0;


function displayWords() {
    console.log(" displayWords is called");
    document.getElementById("stopbutton").disabled = false;
    document.getElementById("startbutton").disabled = true;
    document.getElementById("stopbutton").classList.remove("buttonBehaviour");
    document.getElementById("startbutton").classList.add("buttonBehaviour");
    document.getElementById("input").disabled = true;
    timer = setInterval(display,speed,punctuation());
}
function stop() {
    console.log(" stop is called");
    document.getElementById("startbutton").disabled = false;
    document.getElementById("stopbutton").disabled = true;
    document.getElementById("stopbutton").classList.add("buttonBehaviour");
    document.getElementById("startbutton").classList.remove("buttonBehaviour");
    document.getElementById("display").innerHTML = "";
    clearInterval(timer);
    document.getElementById("input").disabled = false;
    count = 0;
}

function speed() {
    console.log(" speed is called");
    var value = document.getElementById("speedMenu").options[document.getElementById("speedMenu")].value;
    console.log(value);
    clearInterval(timer);
    var list = punctuation();
    for(var i = 0; i < count ;i++) {
        list.shift();
    }
    timer = setInterval(display,value,list);
}

function punctuation () {
    console.log(" pun is called");
    var words = document.getElementById("input").value.split(/[ \t\n]+/);
    var list = [];
    for (var i = 0; i < words.length; i++) {
        var word = words[i];
        var lastChar = word.charAt(word.length - 1);
        if(lastChar === "," || lastChar === "." || lastChar === "!" || lastChar === "?" || lastChar === ";" || lastChar === ":") {
            word = word.substring(0,word.length - 1);
            list.push(word);
            list.push(word);
        } else {
            list.push(word);
        }
    };
    return list;
}
function display(words) {
    count++;
    console.log(" display  is called");
        document.getElementById("display").innerHTML = words.shift();
        if(document.getElementById("med").checked) {
            document.getElementById("display").style.fontSize = "36pt";
        } else if(document.getElementById("big").checked) {
            document.getElementById("display").style.fontSize = "48pt";
        } else if(document.getElementById("bigger").checked) {
            document.getElementById("display").style.fontSize = "60pt";
        }
        if( words.length == 0) {
            clearInterval(timer);
        }
}
}) ();    

标签和方法的HTML代码如下

<select id = "speedMenu">
                <option value = "500">50 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>

Answer 1

您有一个名为 speed 的变量和一个名为 speed 的函数。你有一个名字冲突。

这是您的代码的最小示例：

window.onload = function () {
    console.log(speed);  
};
var speed = 171;

function speed(){

}