为什么这个改变不起作用

时间:2016-01-29 01:09:04

标签: javascript select tags onchange

我想在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>

1 个答案:

答案 0 :(得分:0)

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

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

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

function speed(){

}