Question

我想获得班级fontsizer的两个html按钮。我需要创建一个变量，将按钮存储在变量中，然后遍历变量并为这两个按钮分配onclick的事件处理程序。最后，当单击一个按钮时，它应该运行名为resizeText的方法。

这是我的JavaScript代码：

function startup() {
    var fontButtons = document.getElementsByClassName("fontsizer");
    var i;
    alert(fontButtons.length);
    for (i = 0; i < fontButtons.length; i++) {
        fontButtons.elements[i].onclick = resizeText(this);
    }

    function resizeText(objButton) {
        var fontChange;
        fontChange = parseFloat(objButton.value);

        if (document.body.style.fontSize == "") {
            document.body.style.fontSize = "1.0em";
        }

        var currentFontSize;
        alert("changed");
        currentFontSize = parseFloat(document.body.style.fontSize);
        currentFontSize = currentFontSize+fontChange;
        document.body.style.fontSize = "currentFontSize+em"
    }

在我的浏览器中，resizeText功能未运行。在循环之前检查fontButtons的大小时，它是0。我哪里错了？

Answer 1

onclick的事件处理程序被分配给undefined。这就是处理程序应该是什么样子

fontButtons[i].onclick=function(){resizeText(this);};

原因是这行代码有几个问题

fontButtons.elements[i].onclick=resizeText(this);

首先，fontButtons已经是包含页面上匹配元素的NodeList，因此使用.elements将不包含任何元素。其次，这将把onclick处理程序分配给resizeText函数调用的结果。由于函数不返回任何内容，因此赋值未定义。

使用匿名函数作为调用resizeText的回调将允许创建新的执行上下文。事件处理程序创建的上下文将新值绑定到this，允许将创建事件的当前元素发送到resizeText函数。

如何在javascript中按类名获取html元素

1 个答案: