CODEWITHSUNDEEP
javascripthtmlcssfont-sizemaximize
nolags
nolags

Reputation: 633

maximize a div & change its fontSize

I have 2 divs in my html and I want to increase the size by onclick, but the fontSize doesn't change.

Code:

function changeSize(id, weight, height)
{
with (document)
{
	if (getElementById(id).style.width = '240px'){
		getElementById(id).style.width = weight + 'px';
		getElementById(id).style.height = height + 'px';
		getElementById(id).style.fontSize = '30px';
	}	
	else {
		getElementById(id).style.width ='240px';
		getElementById(id).style.height ='300px';
		getElementById(id).style.fontSize = '18px';

	}
}
}
.kaesten{
	width:240px;
	height:300px;
	background-color:darkgrey;
	background-position:center;
	background-repeat:no-repeat;
	text-shadow:0px 0px 3px #000;
	border: 5px solid #F0F8ff;
	vertical-align:top;
	text-shadow: 3px 3px 4px #777;
	float:left;
	margin-left:30px;
}
<div id="box1" class="kaesten" onclick="maxi('box1', 600, 600); return false;">
test1

</div>

<div id="box2" class="kaesten">
test2
</div>

Question: How can I change the fontSize? And how can I change the div size into the original size again by a second click?

Upvotes: 2

Views: 95

Answers (3)

George
George

Reputation: 36794

You have made a typo. Properties and methods in JavaScript are case-sensetive. The method is getElementById, not getElementByID.

Assuming the only inline styles that are on the element are the ones you add in the function above, you can use the following to remove the styles and 'reset' the element:

function changeSize(id, weight, height){
    var elem = document.getElementById(id);
    if(elem.getAttribute('style')){
        elem.removeAttribute('style');
    } else {
        elem.style.width = weight + 'px';
        elem.style.height = height + 'px';
        elem.style.fontSize = '30px';
    }
}

var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
    elems[i].onclick = function(){
        changeSize(this.id, 600, 600);
    }
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>

Even better would be to simply pass the element to the function as a reference, rather than passing the elements id and having to query the document again.

Upvotes: 1

Keyboard ninja
Keyboard ninja

Reputation: 755

The best thing you can do in this case is to use 2 css classes and switch those with javascript. on each click you can check if it has a certain class and then switch those

.normal{
    width:240px;
    height:300px;
    background-color:darkgrey;
    background-position:center;
    background-repeat:no-repeat;
    text-shadow:0px 0px 3px #000;
    border: 5px solid #F0F8ff;
    vertical-align:top;
    text-shadow: 3px 3px 4px #777;
    float:left;
    margin-left:30px;
}

.maximize{
    width:4800px;
    height:600px;
    font-size:30px;
    background-color:darkgrey;
    background-position:center;
    background-repeat:no-repeat;
    text-shadow:0px 0px 3px #000;
    border: 5px solid #F0F8ff;
    vertical-align:top;
    text-shadow: 3px 3px 4px #777;
    float:left;
    margin-left:30px;
}

You can switch with:

var class = document.getElementById("MyElement").className;
if(class === "normal"){
     document.getElementById("MyElement").className = "maximize";
} else {
     document.getElementById("MyElement").className = "normal";
}

Upvotes: 1

akash
akash

Reputation: 2157

typo error 

getElementById(id).style.fontSize = '30' +'px';
             ^

Please check it's working

function maxi(id, weight, height)
{
	with (document)
	{
		getElementById(id).style.width = weight + 'px';
		getElementById(id).style.height = height + 'px';
		getElementById(id).style.fontSize = '30' +'px';
		
	}
}
.kaesten{
	width:240px;
	height:300px;
	background-color:darkgrey;
	background-position:center;
	background-repeat:no-repeat;
	text-shadow:0px 0px 3px #000;
	border: 5px solid #F0F8ff;
	vertical-align:top;
	text-shadow: 3px 3px 4px #777;
	float:left;
	margin-left:30px;
}
<div id="box1" class="kaesten" onclick="maxi('box1', 600, 600); return false;">
test1

</div>

<div id="box2" class="kaesten">
test2
</div>

Upvotes: 0

Related Questions