how to change font size of a paragraph with javascript
Question
Hello im learning javaScript and im trying to change the font size of a paragraph with 3 buttons in a site, while i was writting the code the console uotputed this erros and i can't figure it out what it is. i also want to know if the way im coding it its correct thank you very much.
the html code:
<!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>
the css:
p {
font-size: 13px;
margin-bottom: 2em;
}
.boton {
background: red;
padding: .5em 1em;
}
the 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');
}
and finally the error:
Uncaught TypeError: Cannot call method 'addEventListener' of null codigo.js:6
thank you for your attention guys :)
well i placed the tag before and now its working at least thats what i think so.... another problem has emerged and its that the paragraph doesnt change its fon size but i still recieve the console log message as if its working :/
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');
}
}
i also have no idea of how to assign different font sizes ot each button xD can anyone suggest me something?
2 answers
solution1
2 2013-03-26 03:42:21
When document.getElementById returns null, it means it didn't find an element with the supplied ID. In this case, it's because your script is running before the page is loaded.
Call the function after the load event:
window.onload = function() {
// stuff to run onload
};
An extra precaution is to check that getElementById returns an element (or at least something other than null) before trying to call a method.
Edit
Also, as pointed out by Mahesh Sapkal, IE less than 8 (and maybe 9?) doesn't support addEventListener , you have to use attachEvent . There are a number of "addEvent" functions that use one or the other based on feature detection, here's a simple one:
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;
}
}
and the loop becomes:
var boton;
for (var i = 0; i < indice.length; i++) {
boton = document.getElementById('boton' + indice[i]);
if (boton) {
addListener(boton, 'click', cambiarFuente);
}
}
Note there is no semicolon after the if block, it's not a statement (though it usually contains statements).
solution2
1 ACCPTED 2013-03-26 03:45:14
You can use this way instead of:
window.addEventListener('load', inicio, false);
Use this:
$(document).ready(function(){
inicio();
});
And in the function:
function inicio(){
var indice =[1,2,3];
for (var i = 0; i < indice.length; i++) {
var boton = $('#boton' + indice[i]);
boton.click(function(){
cambiarFuente();
});
}
}
The reason why your script didn't work is, you are executing the script even before the document loads. One simple fix would be placing your <script></script> before the </body> and it works. Check it out.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.