Databases
StackOverflow2013
Postsdbo
POhow to change font size of a paragraph with javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to change font size of a paragraph with javascript
    primarykey
    data
    text
    <p>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.</p> <p>the html code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html leng="es"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Mi ejercicio DHTML&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/estilos.css"&gt; &lt;script type="text/javascript" src="js/codigo.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p id="parrafo"&gt; 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. &lt;/p&gt; &lt;span class="boton" id="boton1"&gt;Fuente pequeña&lt;/span&gt; &lt;span class="boton" id="boton2"&gt;Fuente mediana&lt;/span&gt; &lt;span class="boton" id="boton3"&gt;Fuente grande&lt;/span&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>the css:</p> <pre><code>p { font-size: 13px; margin-bottom: 2em; } .boton { background: red; padding: .5em 1em; } </code></pre> <p>the javascript:</p> <pre><code>window.addEventListener('load', inicio, false); function inicio() { var indice = [1, 2, 3]; for (var i = 0; i &lt; indice.length; i++) { var boton = document.getElementById('boton' + indice[i]); boton.addEventListener('click', cambiarFuente, false); }; } function cambiarFuente() { console.log('hola'); } </code></pre> <p>and finally the error:</p> <pre><code>Uncaught TypeError: Cannot call method 'addEventListener' of null codigo.js:6 </code></pre> <p>thank you for your attention guys :)</p> <p>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 :/</p> <pre><code>window.addEventListener('load', inicio, false); function inicio(){ var indice =[1,2,3]; for (var i = 0; i &lt; 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'); } } </code></pre> <p>i also have no idea of how to assign different font sizes ot each button xD can anyone suggest me something?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJhonnatan Gonzalez Rodriguez
    1. USJhonnatan Gonzalez Rodriguez
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COi want to use 1 loop to add the event listener to the 3 buttons i would also like to use a loop to make the funciton cmabiarFuente change the fonts
      singulars
      1. POhow to change font size of a paragraph with javascript
      1. USJhonnatan Gonzalez Rodriguez
    2. COaddEventListener is not supported in IE, have you tried in other browsers.
      singulars
      1. POhow to change font size of a paragraph with javascript
      1. USMahesh Sapkal
    3. COim actually testing in chrome :(
      singulars
      1. POhow to change font size of a paragraph with javascript
      1. USJhonnatan Gonzalez Rodriguez
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload