Hello Im new at html css and javascript and I have been having some problems trying to change the fontsize of the elements of a class using javascript.
For some reason when I change the fontsize of the elements in the function resize_element it doesnt work, any suggestions??
This is what I have so far:
// Create Elements
var images_names = ["Images/article_0.svg", "Images/article_1.svg", "Images/article_2.svg", "Images/article_3.svg", "Images/article_4.svg",
"Images/article_5.svg", "Images/article_6.svg", "Images/article_7.svg", "Images/article_8.svg" ]
var i;
for (i = 0; i < images_names.length; i++) {
// Create div
var divAnunci = document.createElement('div');
divAnunci.setAttribute('class','divAnunci');
// Create link
var linkvar = document.createElement('a');
linkvar.setAttribute('href','https://www.youtube.com/');
var text = document.createTextNode("Buy Now");
linkvar.appendChild(text);
// Create images
var img = document.createElement('img');
img.src = images_names[i];
img.setAttribute('onclick','two()');
// Create titol
var titol = document.createElement('p');
titol.setAttribute('class','titol');
var text = document.createTextNode("A very nice random title");
titol.appendChild(text);
// Create description
var descripcio = document.createElement('p');
descripcio.setAttribute('class','descripcio');
var text = document.createTextNode("A very nice random longer description");
descripcio.appendChild(text);
// Append titiol, descripcio, link and image to div
divAnunci.appendChild(titol);
divAnunci.appendChild(img);
divAnunci.appendChild(descripcio);
divAnunci.appendChild(linkvar);
// Append divanunci to main div
document.getElementById('container').appendChild(divAnunci);
}
// Geometry function
function resize_element(num){
var i;
// Resize whole div
var elements = document.getElementsByClassName("divAnunci");
var widthsize = 100/num-0.1;
widthsize = widthsize.toString();
for (i = 0; i < elements.length; i++) {
elements[i].style.width = widthsize+"%";
}
// Change font titols
elements = document.getElementsByClassName("titol");
i = 0;
var fontsize = 2.2*4/num;
fontsize = fontsize.toString();
for (i = 0; i < elements.length; i++) {
elements[i].style.fontsize = fontsize+"vw";
// elements[i].setAttribute('font-size',fontsize+"vw");
}
// Change font descripcions
elements = document.getElementsByClassName("descripcio");
i = 0;
var fontsize = 1.5*4/num;
fontsize = fontsize.toString();
for (i = 0; i < elements.length; i++) {
elements[i].style.fontsize = fontsize+"vw";
// elements[i].setAttribute('font-size', fontsize+"vw");
}
}body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Contenidor que conte el header */
.header {
text-align: center;
padding: 32px;
position: sticky;
top: 0;
background-color: white;
}
/* Contenidor que conte tots els anuncis */
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: space-between;
}
/* Contenidor que conforma anunci */
.divAnunci {
/* background-color: #f2ce6b; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 24%;
}
/* Imatge dels productes */
img {
width:100%;
}
/* Titol dels productes */
.titol {
font-size:2.2vw;
}
/* Descripcio dels productes */
.descripcio {
font-size:1.5vw;
}
/* Lik dels productes */
a{
width: 50%;
}
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<title>SOME TITLE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<div class="header">
<h1>NICE TITLE</h1>
<p>Click on the buttons to change the grid view.</p>
<button onclick="resize_element(2)">2</button>
<button onclick="resize_element(4)">4</button>
<button onclick="resize_element(8)">8</button>
<button onclick="resize_element(16)">16</button>
</div>
<div id="container">
</div>
</body>
</html>
