Increase and decrease font size not working with all paragraphs javascript

Question

**I have many separated paragraphs in one HTML page all of them have the same id **id=text** when I use the onmousemove event only the first paragraph can increase and decrease the font size not all of them although they have the same id  .**

This is the javascript code:

function incfont(){
    var t= document.getElementById('fontsize').value;
    var x= document.getElementById('text');
    x.style.fontSize = t+"px";

**Here are an example of paragraphs with the same id **

<p id="test">paragraph 1 </p>
<p id="test">paragraph 2 </p>

You better use class there, you shoud not duplicate ids – Jovylle Jun 15 '20 at 19:41 — Jovylle, Jun 15 '20 at 19:41

score 0 · Answer 1 · answered Jun 15 '20 at 19:44

0

As you have many paragraphs, you shouldn't be setting an id, but a class.

getElementById() only gets a single element.

Please refer to this question and the selected answer. GetElementByID - Multiple IDs

answered Jun 15 '20 at 19:44

Leandro Faria

11
5

srp · Answer 2 · 2020-06-15T19:53:23.933

0

In Html

<p class="test">paragraph 1 </p>
<p class="test">paragraph 2 </p>

In Script

function incfont(){
    var t= document.getElementById('fontsize').value;
    var x= document.getElementsByClassName("test");
    for(var i=0;i<x.length;i++){
    x[i].style.fontSize = t+"px";
    }
}

edited Jun 15 '20 at 19:53

answered Jun 15 '20 at 19:46

srp

619
7
18

score -1 · Answer 3 · answered Jun 15 '20 at 20:00

In Html

//Instead of Id use class in HTML
<p class="test">paragraph 1 </p>
<p class="test">paragraph 2 </p>

In Script

function incfont(){
    var t= document.getElementById('fontsize').value;
    //Here you need to change getElemetById to getElementsByClassName because getElementById() only gets a single element
    var x= document.getElementsByClassName("test");
    x.style.fontSize = t+"px";
    }
}

Increase and decrease font size not working with all paragraphs javascript

3 Answers3