0

您好，我正在学习 javaScript，我试图在站点中使用 3 个按钮更改段落的字体大小，而我在编写代码时，控制台输出了这个错误，我无法弄清楚它是什么。我也想知道我的编码方式是否正确，非常感谢。

html代码：

<!DOCTYPE html>
<html leng="es">
    <head>
        <meta charset="UTF-8">
        <title>Mi ejercicio DHTML</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <script type="text/javascript" src="js/codigo.js"></script>
    </head>
    <body>
        <p id="parrafo">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.
        </p>
        <span class="boton" id="boton1">Fuente pequeña</span>
        <span class="boton" id="boton2">Fuente mediana</span>
        <span class="boton" id="boton3">Fuente grande</span>
    </body>
</html>

的CSS：

p {
    font-size: 13px;
    margin-bottom: 2em;
}
.boton {
    background: red;
    padding: .5em 1em;
}

的JavaScript：

window.addEventListener('load', inicio, false);

function inicio() {
    var indice = [1, 2, 3];
    for (var i = 0; i < indice.length; i++) {
        var boton = document.getElementById('boton' + indice[i]);
        boton.addEventListener('click', cambiarFuente, false);
    };
}

function cambiarFuente() {
    console.log('hola');
}

最后是错误：

Uncaught TypeError: Cannot call method 'addEventListener' of null codigo.js:6

谢谢大家的关注：）

好吧，我之前放置了标签，现在它的工作至少是我认为的......另一个问题出现了，它的段落没有改变它的 fon 大小，但我仍然收到控制台日志消息，就好像它在工作一样：/

window.addEventListener('load', inicio, false);

function inicio(){
var indice =[1,2,3];
for (var i = 0; i < indice.length; i++) {
    var boton = document.getElementById('boton' + indice[i]);
    boton.addEventListener('click', cambiarFuente, false);
};

function cambiarFuente(){
    var parrafo = document.getElementById('parrafo');
    parrafo.style.fontSize=20;
    console.log('hola');
}
}

我也不知道如何为每个按钮分配不同的字体大小 xD 谁能给我一些建议？

4

2 回答 2

2

当 document.getElementById 返回 null 时，这意味着它没有找到具有提供的 ID 的元素。在这种情况下，这是因为您的脚本在页面加载之前正在运行。

在加载事件之后调用函数：

window.onload = function() {
   // stuff to run onload
};

一个额外的预防措施是在尝试调用方法之前检查 getElementById 是否返回一个元素（或至少不是 null ）。

编辑

此外，正如 Mahesh Sapkal 所指出的，IE 小于 8（也许是 9？）不支持addEventListener，你必须使用attachEvent. 有许多“addEvent”函数基于特征检测使用一个或另一个，这里有一个简单的：

  function addListener(element, event, fn) {

    // Use addEventListener if available
    if (element.addEventListener) {
      element.addEventListener(event, fn, false);

    // Otherwise use attachEvent, set this and event
    } else if (element.attachEvent) {
      element.attachEvent('on' + event, (function (el) {
        return function() {
          fn.call(el, window.event);
        };
      }(element)));

      // Break closure and primary circular reference to element
      element = null;
    }
  }

循环变为：

var boton;

for (var i = 0; i < indice.length; i++) {
    boton = document.getElementById('boton' + indice[i]);

    if (boton) {
          addListener(boton, 'click', cambiarFuente);
    }
}

注意 if 块后面没有分号，它不是一个语句（尽管它通常包含语句）。

于 2013-03-26T03:42:21.293 回答
1

您可以使用这种方式代替：

window.addEventListener('load', inicio, false);

用这个：

$(document).ready(function(){
    inicio();
});

在函数中：

function inicio(){
    var indice =[1,2,3];
    for (var i = 0; i < indice.length; i++) {
        var boton = $('#boton' + indice[i]);
        boton.click(function(){
            cambiarFuente();
        });
    }
}

您的脚本不起作用的原因是，您甚至在文档加载之前就正在执行脚本。一个简单的解决方法是将你的放在<script></script>前面</body>并且它可以工作。一探究竟。

于 2013-03-26T03:45:14.187 回答