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
Solution 1 :
Solution 2 :
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";
}
}
Solution 3 :
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";
}
}
Problem :
**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>
Comments
Comment posted by Jovylle
You better use class there, you shoud not duplicate ids