getElementsByClassName not letting me change fontsize - javascript

I am trying to make a JavaScript script that will change the "Resizable" Class elements on my page, however I don't think that I am using the getElementsByClassName correctly.
Here is my code:
function resizeText(multiplier) {
var elements = document.getElementsByClassName('Resizable');
for(var i=0; i<elements.length; i++) {
elements[i].style.fontSize = parseFloat(elements[i].style.fontSize) + (multiplier+ * 0.2)
}
}
I have a button using onclick="resizeText(1)" and another with (-1), neither are working and I am unsure why. Am I correct in using getElementsByClassName to make an Array and then try and change the style of each object?

May be you're missing "px" at the end:
function resizeText(multiplier) {
var elements = document.getElementsByClassName('Resizable');
for(var i = 0; i < elements.length; i++) {
elements[i].style.fontSize = parseFloat(elements[i].style.fontSize) + (multiplier + * 0.2) + "px";
}
}

have you tried
elements[i].style.fontSize = (parseFloat(elements[i].style.fontSize) + (multiplier+ * 0.2)) + "px";
or the element's font-size has initial value?

function resizeText(multiplier) {
var elements = document.getElementsByClassName('Resizable');
for(var i=0; i<elements.length; i++) {
elements[i].style.fontSize = parseFloat(elements[i].style.fontSize) + (multiplier * 0.2) + 'px';
}
}

Related

js.executeScript doesn't work when using getElementsByClassName in selenium

I have a method:
public void delayToCapture(String methodGetBy, String key){
/* List of methodGetBy:
* 1. getElementById
* 2. getElementsByTagName
* 3. getElementsByClassName
* 4. querySelectorAll
*/
System.out.println("Excuteing javaScript...");
if(methodGetBy.equals("getElementById")){
js.executeScript("setTimeout(function(){ document." +methodGetBy+ "('" +key+ "').setAttribute('style', 'display: none');},500);");
}
else if(methodGetBy.equals("getElementsByClassName")){
js.executeScript("setTimeout(function(){"
+ "var elems = document.getElementsByClassName('"+ key +"');"
+ "for(var i = 0; i < elems.length; i++){"
+ "elems[i].style.display = 'none';}"
+ "},"
+ "500);");
}
}
And I call that method in another class:
delayToCapture("getElementsByClassName", "positionmenu");
When running the code, console always show me this message:
java.lang.NullPointerException
However, if I run this code at below on console of Brower directly -> It's work:
setTimeout(function(){
var elems = document.getElementsByClassName('positionmenu');
for(var i = 0; i < elems.length; i++){
elems[i].style.display = 'none';
}
},500);
So, could you tell me what is the reason here?
Try using this :
else if(methodGetBy.equals("getElementsByClassName")){
List<WebElement> element = driver.findElements(By.className(key)); // getting element using class name
js.executeScript("setTimeout(function(){"
+ "var elems = arguments[0];"
+ "for(var i = 0; i < elems.length; i++){"
+ "elems[i].style.display = 'none';}"
+ "},"
+ "500);", element);
}
Hope that helps you.

How to get attribute ID to parameter of function js

I need put 5 images on page like thumbnail, and after click show the lightbox. I need put ID of element what I create to function like parameter. But i cant get ID. I was looking for this problem here and with google but nothings work :( It is project to school and I can use only html, css and javascript, I can not use jquery. Thanks. Here is my code:
function onloadpg() {
for (var i = 0; i<5; i++) {
x[i] = document.createElement("IMG");
x[i].setAttribute("src", "images/" + (i+1) + ".jpg");
x[i].setAttribute("width", "250");
x[i].setAttribute("height", "200");
x[i].setAttribute("alt", fotky.title);
x[i].setAttribute("title", fotky.title);
x[i].setAttribute("id", i+1);
x.setAttribute("onclick", zobraz(x.getAttribute('id')), nacitaj(x.getAttribute('id')));
}
Problem :
You could see in the browser console the message :
Uncaught TypeError: x.setAttribute is not a function
Solution :
You need to use x[i] instead of x to target the current element by index in :
x.setAttribute("onclick", zobraz(x.getAttribute('id')), nacitaj(x.getAttribute('id')));
^________________________________^______________________________^
Should be :
x[i].setAttribute("onclick", "zobraz("+x[i].getAttribute('id')+")", "nacitaj("+x[i].getAttribute('id')+")");
^^^^_________________________^_______^^^^^^___________________^^^^___________^^^^^^___________________^^^^^
Note also that you've to add quotes " and concate variables.
NOTE : You should define the variable x as array :
var x = [];
Hope this helps.
function onloadpg() {
var x = [];
for (var i = 0; i < 5; i++) {
x[i] = document.createElement("IMG");
x[i].setAttribute("src", "images/" + (i + 1) + ".jpg");
x[i].setAttribute("width", "250");
x[i].setAttribute("height", "200");
x[i].setAttribute("alt", "fotky.title");
x[i].setAttribute("title", "fotky.title");
x[i].setAttribute("id", i + 1);
x[i].setAttribute("onclick", "zobraz("+x[i].getAttribute('id')+")", "nacitaj("+x[i].getAttribute('id')+")");
document.body.innerHTML += x[i].outerHTML+"<br>";
}
}
function zobraz(id) {
alert('zobraz : '+id);
}
function nacitaj(id) {
alert("nacitaj : "+id);
}
onloadpg();
function onloadpg(element_id) {
var elem = document.getElementById(element_id);
for (var i = 0; i<5; i++) {
x[i] = document.createElement("IMG");
x[i].setAttribute("src", "images/" + (i+1) + ".jpg");
x[i].setAttribute("width", "250");
x[i].setAttribute("height", "200");
x[i].setAttribute("alt", fotky.title);
x[i].setAttribute("title", fotky.title);
x[i].setAttribute("id", i+1);
x.setAttribute("onclick", zobraz(x.getAttribute('id')),nacitaj(x.getAttribute('id')));
}
onloadpg("element_id");

random color for every tag

I have this piece of javascript and I need every element "title" to be colored with different randomized color. I accomplished colorize only the first one. It is possible? Thanks
var randomColor = Math.floor(Math.random()*16777215).toString(16);
document.getElementById('title').style.color = randomColor;
<div id="title"><a>TEXT1</a></div>...<div id="title"><a>TEXT2</a></div>...
Just invoke changeColor(); functions.
$(function(){
changeColor();
});
function changeColor() {
var paragraphs = document.getElementsByTagName("p");
for(var i = 0; i < paragraphs.length; i++)
{
var innerText = paragraphs[i].innerText;
var innerTextSplit = innerText.split("");
paragraphs[i].innerText = ""
for(var j = 0; j < innerTextSplit.length; j++) {
var randomColor =getRandomColor();
innerTextSplit[j] = '<span style="color: ' + randomColor + '">' + innerTextSplit[j] + '</span>';
paragraphs[i].innerHTML += innerTextSplit[j];
}
}
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>abcdefthuild</p>
<p>abcdefthuild</p>
<p>abcdefthuild</p>
<p>abcdefthuild</p>
<p>abcdefthuild</p>
As I already commented, you cannot use duplicate IDs, prefer using a class instead and modify your code accordingly.
var getElm = document.getElementsByClassName('title');
for(var i = 0, l = getElm.length; i < l; i++) {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
getElm[i].style.color = '#' + randomColor;
}
<div class="title"><a>TEXT1</a></div>
<div class="title"><a>TEXT2</a></div>
Some explanation of how the above code works:
I am using getElementsByClassName which will return me an array of elements you want to target, in this case, it's the ones with the class name of title. Then I loop them, generate a new random hex, and assign it to the looped element.
Make sure you don't forget to concatenate your hexcode with #
Use like this .without classname
using document.querySelectorAll().it will select the element.
Then applied each element with color using Array#forEach
And you are missing # in dom for adding color
document.querySelectorAll("div[id='title']").forEach(function(a){
var randomColor = Math.floor(Math.random()*16777215).toString(16);
a.style.color ='#'+randomColor;
})
<div id="title"><a>TEXT1</a></div>
<div id="title"><a>TEXT2</a></div>
<div id="title"><a>TEXT2</a></div>
<div id="title"><a>TEXT2</a></div>
<div id="title"><a>TEXT2</a></div>
<div id="title"><a>TEXT2</a></div>...
HTML
<div class="title"><a>TEXT1</a></div>...
<div class="title"><a>TEXT2</a></div>...
JS
var elements = document.getElementsByClassName('title');
var usedColors = {};
var getRandomColor = function() {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
while(usedColors[randomColor] === 1) {
randomColor = Math.floor(Math.random()*16777215).toString(16);
}
usedColors[randomColor] = 1;
return randomColor;
};
for (var i = 0; i < elements.length; i++ ) {
var randomColor = getRandomColor();
elements[i].style.color = "#"+randomColor;
}
JSFIDDLE
https://jsfiddle.net/1cuwdLye/

Flipping a div by class name

I'm trying to flip a div on mouseover, I found a few pages really useful.
followed this to set ID and then according to this one I need to add the mouseover property in the HTML but it's not easy as the ID.
Here is my code so far:
var abcElements = document.querySelectorAll('.builder_row_cover');
for (var i = 0; i < abcElements.length; i++)
abcElements[i].id = 'abc-';
var oHover = document.getElementById("abc-");
oHover.setAttribute("onmousehover", "flip()");
var k = 0;
function flip() {
var j = document.getElementById("abc-");
k += 180;
j.style.transform = "rotatey(" + k + "deg)";
j.style.transitionDuration = "0.5s"
}
I'm just starting, I have tried with setting attribute, but no way to see the mouseover in the HTML, any suggestion?
First, the name of the event is onmouseover.
Giving multiple elements the same ID won't work. document.getElementById() will just return the first element with that ID, not the one that the mouse is over.
You don't need to use the ID at all. You can use this in the event handler to refer to the target of the event.
var abcElements = document.querySelectorAll('.builder_row_cover');
for (var i = 0; i < abcElements.length; i++) {
abcElements[i].addEventListener('mouseover', flip);
}
var k = 0;
function flip()
k += 180;
this.style.transform = "rotatey(" + k + "deg)";
this.style.transitionDuration = "0.5s";
}

how to specify a background color for every tr element in javascript?

I am having multiple tr with bgcolors like
<tr bgcolor="#OC6110">
<tr bgcolor="#000000">
<tr bgcolor="#FFFFFF">
I want to give different bg color for every tr element without specifying its id value. I need to make changes in javascript or CSS. I don't want to touch in HTML.
Is it possible?
Already some bgcolors are given in html..I need to overwrite it without touching html
You can use the following function to get a random color
function get_color() {
var lt= '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += lt[Math.round(Math.random() * 15)];
}
return color;
}
And apply the color using
$("tr").each(function() {
$(this).css("background-color", get_color());
});
source and more solutions here
Update:
As per comment, you can store the color values in an array and use them like this:
var myColors = ['#f00','#ff0','#fff'];//store the color values here
$("tr").each(function() {
for(var i=0; i<myColors.length;i++){
$(this).css("background-color", myColors[i]);
}
});
you can also try this
$(function() {
$("table tr").each(function() {
var color = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
$(this).css("background-color", color);
});
});
You can use jquery
$('tr:odd').css("background-color", "#OC6110");
$('tr:even').css("background-color", "#000000");
Yeah, you can get a list of all tr elements with document.getElementsByTagName('tr') You can then step over the elements in that NodeList (like an array, with subtle differences), using setAttribute('bgColor', yourNewTextStringRepresentingAColorHere);
Something like this:
function colourAllTrs()
{
var trList = document.getElementsByTagName('tr');
var i, n = trList.length;
for (i=0; i<n; i++)
{
newColor = '#123456';
trList[i].setAttribute('bgcolor', newColor);
}
}
You can use C-link's getColor function, instead of simply using #123456.
Try this JavaScript Solution.
var colors = ['#999999','#000000','#cccccc'],
myTrs = document.getElementsByTagName('tr');
for(i=0, len = myTrs.length; i < len; i++){
myTrs[i].style.backgroundColor = colors[i % colors.length]
};
Updated Fiddle Demo

Categories