CODEWITHSUNDEEP
javascripthtml
Prasad_Joshi
Prasad_Joshi

Reputation: 662

How to pass html div id's dynamically to js function

I want to pass the div id from html to a js script dynamically as such div id r1,r2,r3 needs to be passed in to the getElementById() in jS,so when user mouse over any div,it will get rotated automatically.

This is my first Question,if any Corrections suggested are welcome! 

 <tbody>
           <tr>
        <td id="r1"> Roboust</td> 
        <td id="r2">Dynamic</td> 
        <td id="r3">Adhere</td>

        </tr>
        <tr>
         <td id="r4">Popular</td> 
         <td id="r5">Trending</td> 
         <td id="r6">Favourite</td>
        </tr>
        <tr>
         <td id="r7">Famous</td> 
         <td id="r8">Blockbouster</td>
         <td id="r9">Navie</td>
        </tr>
       </tbody>
   </table>
<h1>CLICK ON BUTTONS TO ROTATE THE BUTTON AS YOU WANT THEM</h1>
<button onclick="rotate() ">Flip Row1</button>

<script>

var rotate = function() {
document.getElementById('r1').style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
</script>
</body>

Upvotes: 8

Views: 2371

Answers (3)

CzarJohn Demafeliz
CzarJohn Demafeliz

Reputation: 328

Edited my answer

 
<html>
<body>
    <table>
        <tbody>
            <tr>
                <td id="r1" onmouseover="rotate(this)"> Roboust</td> 
                <td id="r2" onmouseover="rotate(this)">Dynamic</td> 
                <td id="r3" onmouseover="rotate(this)">Adhere</td>
            </tr>
            <tr>
                <td id="r4" onmouseover="rotate(this)">Popular</td> 
                <td id="r5" onmouseover="rotate(this)">Trending</td> 
                <td id="r6" onmouseover="rotate(this)">Favourite</td>
            </tr>
            <tr>
                <td id="r7" onmouseover="rotate(this)">Famous</td> 
                <td id="r8" onmouseover="rotate(this)">Blockbouster</td>
                <td id="r9" onmouseover="rotate(this)">Navie</td>
            </tr>
        </tbody>
   </table>

<script>
    var rotate = function(x) {
        if(x.className == "rotated"){
            x.style="transform:rotateX(0deg);transition: 0.6s;transform-style:preserve-3d";
            x.className = "";
        }
        else{
            x.style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
            x.className = "rotated";
        }
    }
</script>
</body>
</html>

Upvotes: 1

jaibatrik
jaibatrik

Reputation: 7533

You can also try this way - 

<table id="myTable">
    <tbody>
        <tr>
            <td id="r1"> Roboust</td>
            <td id="r2">Dynamic</td>
            <td id="r3">Adhere</td>

        </tr>
        <tr>
            <td id="r4">Popular</td>
            <td id="r5">Trending</td>
            <td id="r6">Favourite</td>
        </tr>
        <tr>
            <td id="r7">Famous</td>
            <td id="r8">Blockbouster</td>
            <td id="r9">Navie</td>
        </tr>
    </tbody>
</table>

<script>
    document.getElementById('myTable').onmouseover = function(event) {
        if (event.target.tagName.toUpperCase() == "TD") {
            event.target.style = "transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
        }
    }
</script>

Upvotes: 0

Mo Shal
Mo Shal

Reputation: 1637

you have several errors try it like this

      <table>
               <tr>
            <td id="r1" onmouseover="rota(r1)"> Roboust</td> 
            <td id="r2" onmouseover="rota(r2)">Dynamic</td> 
            <td id="r3" onmouseover="rota(r3)">Adhere</td>
            </tr>

       </table>



        <script>

        function rota(i) {
        var x = document.getElementById(i);
        x.style.transform="rotateX(180deg)";
        x.style.transition='0.6s';
        }
        </script>
        </body>

Upvotes: 0

Related Questions