CODEWITHSUNDEEP
javascripthtml
Stöger
Stöger

Reputation: 155

Dynamic Variable Content JavaScript

<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

Upvotes: 2

Views: 142

Answers (2)

Guffa
Guffa

Reputation: 700800

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>

Upvotes: 0

Tyr
Tyr

Reputation: 2810

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;
}

Upvotes: 3

Related Questions