Question

我正在尝试学习javascript并编写可重用的函数。我遵循了一个教程，当然你可以传递一个变量，或者确切的数据类型 - 我试图改变<div id="age">的颜色。当在函数内部显式调用displayE1时，changeColor函数有效。我希望能够改变任何颜色，并且传递displayE1，'age'和'displayE1'不起作用。

   <div id="age"></div>
    <button onclick="changeColor('blue', displayE1);" >blue</button>
    <button onclick="changeColor('red', age)">red</button>



    <script type="application/javascript">
        var age = "age"
        function grabAge() {
            var result = prompt('how old?', '');
            var displayE1 = document.getElementById("age");
            displayE1.innerHTML = result

            function changeColor(newColor, idReference) {
                idReference.style.color = newColor;
            }
        }
        grabAge()
    </script>

这有效

function changeColor(newColor) {
    displayE1.style.color = newColor;
}

为什么这个功能不可重复使用？

Answer 1

你的功能应该是

function changeColor(newColor, ele) {//You need to the second argument
    var element = document.getElementById(ele);
    element.style.color = newColor;
}

HTML：

<button onclick="changeColor('blue', 'displayE1');" >blue</button>
<button onclick="changeColor('red', 'age')">red</button>

提供，第二个参数都是ID

Answer 2

它不可重用，因为在调用它时，该函数未在窗口范围中定义。它是grabAge方法的本地方法。此外displayE1也不在全球范围内。

要使代码正常工作，需要看一下

var age = "age", displayE1;
function grabAge() {
    var result = prompt('how old?', '');
    displayE1 = document.getElementById("age");
    displayE1.innerHTML = result
}

function changeColor(newColor, idReference) {
    idReference.style.color = newColor;
}

grabAge();

注意changeColor不在其他方法中，displayE1是在函数外部定义的。

Answer 3

您可以在函数中创建变量displayE1。这是你的错误，因为在函数中创建的变量不是全局的！如果要使用该变量，则需要在全局命名空间中创建它。

<script type="application/javascript">
    var age = "age";
    var displayE1 = document.getElementById("age");

    function grabAge() {
        var result = prompt('how old?', '');
        displayE1.innerHTML = result

        function changeColor(newColor, idReference) {
            idReference.style.color = newColor;
        }
    }
    grabAge()
</script>

可重用的javascript函数不接受变量

3 个答案: