Question

您好我正在学习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可以有人建议我吗？

Answer 1

当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块后面没有分号，它不是一个语句（虽然它通常包含语句）。

Answer 2

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

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>之前，并且有效。看看吧。

如何使用javascript更改段落的字体大小

2 个答案:

修改