CODEWITHSUNDEEP
javascripthtml
Weptrex
Weptrex

Reputation: 1

I am trying to increase the height of an image alone using JavaScript

I am trying to write some script which will enable me to click on a image (more than once) and increase the height of the image. They should not get wider, or move down, or move over. I have the following HTML file below with some JavaScript attempting this but I can get it to work. If anyone could offer some insight as to what I am doing wrong it would be appreciated!

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Forest</title>
    <style>
        div.treebox {
            width: 80px;
            height: 25em;
            float: left;
            position: relative;
        }

        img.tree {
            width: 80px;
            position: absolute;
            bottom: 0pt;
        }

        div.forest {
            width: 720px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <div class="forest">
        <!-- Added onclick and id for each  image-->
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg1()" id="img1"></div>
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg2()" id="img2"></div>
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg3()" id="img3"></div>
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg4()" id="img4"></div>
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg5()" id="img5"></div>
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg6()" id="img6"></div>
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg7()" id="img7"></div>
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg8()" id="img8"></div>
        <div class="treebox"><img class="tree" style="height: 120px;" src="Winter_Tree_1_by_Merlin2525.png" onclick="tallImg9()" id="img9"></div>
    </div>
    <script>
        // Added onclick handler for each image
        function tallImg1() {
                                var myImg = document.getElementById("img1");
                                var currHeight = myImg.clientHeight;
                                myImg.style.height = (currHeight + 25); }
        function tallImg2() { document.getElementById("img2").style.height = (currHeight + 25); }
        function tallImg3() { document.getElementById("img3").style.height = (currHeight + 25); }
        function tallImg4() { document.getElementById("img4").style.height = (currHeight + 25); }
        function tallImg5() { document.getElementById("img5").style.height = (currHeight + 25); }
        function tallImg6() { document.getElementById("img6").style.height = (currHeight + 25); }
        function tallImg7() { document.getElementById("img7").style.height = (currHeight + 25); }
        function tallImg8() { document.getElementById("img8").style.height = (currHeight + 25); }
        function tallImg9() { document.getElementById("img9").style.height = (currHeight + 25); }
    </script>
</body>

</html>

<!--

Upvotes: 0

Views: 45

Answers (1)

Vahid Pouyafar
Vahid Pouyafar

Reputation: 71

I'm not sure if this fixes whole problem or not but there's something in your code you have to change:

WRONG: myImg.style.height = (currHeight + 25);
RIGHT: myImg.style.height = (currHeight + 25) + "px";

Upvotes: 1

Related Questions