我正在学习 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
我放置了 <script>之前的标签 </body>现在它可以工作了；至少我是这么认为的。出现了另一个问题，该段落没有改变其字体大小，但我仍然收到控制台日志消息，就好像它正在工作一样:
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');
}
}
我也不知道如何为每个按钮分配不同的字体大小!有人能给我建议吗？
最佳答案
当 document.getElementById 返回 null 时，表示未找到具有所提供 ID 的元素。在这种情况下，这是因为您的脚本在页面加载之前运行。
在加载事件后调用该函数:
window.onload = function() {
// stuff to run onload
};
一个额外的预防措施是在尝试调用方法之前检查 getElementById 是否返回一个元素(或至少返回 null 以外的元素)。
编辑
此外，正如 Mahesh Sapkal 所指出的，小于 8(也许是 9？)的 IE 不支持 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 block 后面没有分号，它不是语句(尽管它通常包含语句)。
关于javascript - 如何使用 JavaScript 更改段落的字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15628944/