Dynamic Variable Content JavaScript

Question

<script>			
function zeigeBildGross1(Bild1){
    document.getElementById("Bild1").width = 500;
    document.getElementById("Bild1").height = 300;
}
			
function zeigeBildGross2(Bild2){
	document.getElementById("Bild1").width = 500;
	document.getElementById("Bild1").height = 300;
}
			
function zeigeBildGross3(Bild3){
	document.getElementById("Bild1").width = 500;
	document.getElementById("Bild1").height = 300;
}
			
function zeigeBildGross4(Bild4){
	document.getElementById("Bild1").width = 500;
	document.getElementById("Bild1").height = 300;
}
</script>
<noscript>
Bitte JavaScript in Ihrem Browser aktivieren!
</noscript>
</head>
<body>
	<img id="Bild1" width=300 height=200 onclick=zeigeBildGross(Bild1) src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
	<img id="Bild2" width=300 height=200 onclick=zeigeBildGross(Bild2) src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
	<img id="Bild3" width=300 height=200 onclick=zeigeBildGross(Bild3) src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
	<img id="Bild4" width=300 height=200 onclick=zeigeBildGross(Bild4) src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>
</body>

Hello, I want to code a website using HTML and JS, where 4 pictures are shown. If I press on one picture, it should be resized.

Is it possible, to get a "dynamic" variable?

My idea was, to get a new variable which can have the content Bild1, Bild2, Bild3 or Bild4, depending on which picture was pressed before so there's not the same function for each case just with a different word.

For example:

function zeigeBildGross(){
    var x = <!-- depending on which pic was pressed either: Bild1, Bild2, Bild3 or Bild4 !-->
    document.getElementById(x).width = 500;
    document.getElementById(x).height = 300;
}

Is that possible?

Thank you for reading, Stöger

Tyr · Accepted Answer · 2015-06-09 17:23:28Z

3

Simply deliver the id of your image to the function:

HTML: <img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this.id)">

Javascript:

function zeigeBildGross(id){
    document.getElementById(id).width = 500;
    document.getElementById(id).height = 300;
}

Cleaner version:

<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this)">

Javascript:

function zeigeBildGross(bild){
    bild.width = 500;
    bild.height = 300;
}

edited Jun 9, 2015 at 17:23

answered Jun 9, 2015 at 17:17

Tyr

2,7561 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stöger Over a year ago

Thanks for your response, it's all working now. But I wasn't able to put only this into the brackets, it works with this.id only!

Guffa · Accepted Answer · 2015-06-09 18:04:49Z

0

You don't need to create a variable that contains the image being clicked, it already exists as the context in the onclick event handler.

Simply pass this as parameter to the function, and you can use that to access the element:

function zeigeBildGross(bild){
    bild.width = 500;
    bild.height = 300;
}

<img id="Bild1" width=300 height=200 onclick="zeigeBildGross(this)" src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
<img id="Bild2" width=300 height=200 onclick="zeigeBildGross(this)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
<img id="Bild3" width=300 height=200 onclick="zeigeBildGross(this)" src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
<img id="Bild4" width=300 height=200 onclick="zeigeBildGross(this)" src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>

answered Jun 9, 2015 at 18:04

Guffa

703k111 gold badges760 silver badges1k bronze badges

3 Comments

Stöger Over a year ago

How I already mentioned in my comment on @Tyr's answer, it's not working with this (in my case). I have to put this.id

Guffa Over a year ago

@Stöger: If you pass this.id to the function then you get the id of the element, and you have to use getElementById to get a reference to the element that you already had a reference to. If you pass this to the function you have the reference to the element and you don't need to find the element again, just use the parameter to access the element. See the code in my example. Also, if you pass the element reference instead of the id, the elements doesn't need an id for it to work.

Stöger Over a year ago

Thanks for your comment! Now I understand why I wasn't able to use this, thanks!

Collectives™ on Stack Overflow

Dynamic Variable Content JavaScript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related