开发者

2 button sets, but 1 set performing wrong action

I have 2 button sets that, when clicked are supposed to angle the text below them at 45 deg. However, both set 1 and set 2, wh开发者_Python百科en clicked, ONLY control the text linked to button 1. I want to have each button set control their respective text. Can someone help me fix this by providing the proper/accurate code? Here's what I have, below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <style type="text/css"> 
        body {font-family:sans-serif; font-size:12px;}
        /*#ctrls {float:left; margin-right:20px;}*/
        a {margin-left:40px;}

        div#ctrls {position:absolute; top:40px; z-index:1;}
        div#ftP {position:absolute; top:80px; z-index:0;}

        div#ctrls2 {position:absolute; top:120px; z-index:1;}
        div#ftP2 {position:absolute; top:160px; z-index:0;}
    </style> 
    <script type="text/javascript"> 
        function transform()
        {
            var rotation = document.getElementById('rotation').value;
            document.getElementById('ft').style.webkitTransform='rotate('+rotation+'deg)';
        }

        function reset()
        {
            document.getElementById('ft').style.webkitTransform='rotate(45deg)';
            document.getElementById('rotation').value = 0;
        }
    </script> 
</head> 
<body>       
    <div id="ctrls"> 
        <p type="text" id="rotation" size="4" />
        <button onclick="transform()">-</button><button onclick="reset()">+</button>  
    </div> 
    <div id="ftP"><p id="ft">hello</p></div> 

    <div id="ctrls2"> 
        <p type="text" id="rotation" size="4" /> 
        <button onclick="transform()">-</button><button onclick="reset()">+</button>  
    </div> 
    <div id="ftP2"><p id="ft">taxes</p></div> 

</body> 
</html>


The problem you're having is because both <p> tags have the same id. You have to make one have a different id. What I would do is pass the id of the text you want to transform to the javascript function so that you can know what text to rotate.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <style type="text/css"> 
        body {font-family:sans-serif; font-size:12px;}
        /*#ctrls {float:left; margin-right:20px;}*/
        a {margin-left:40px;}

        div#ctrls {position:absolute; top:40px; z-index:1;}
        div#ftP {position:absolute; top:80px; z-index:0;}

        div#ctrls2 {position:absolute; top:120px; z-index:1;}
        div#ftP2 {position:absolute; top:160px; z-index:0;}
    </style> 
    <script type="text/javascript"> 
        function transform(order)
        {
            var rotation = document.getElementById('rotation' + order).value;
            document.getElementById('ft' + order).style.webkitTransform='rotate('+rotation+'deg)';
        }

        function reset(order)
        {
            document.getElementById('ft' + order).style.webkitTransform='rotate(45deg)';
            document.getElementById('rotation' + order).value = 0;
        }
    </script> 
</head> 
<body>       
    <div id="ctrls"> 
        <p type="text" id="rotation1" size="4" />
        <button onclick="transform('1')">-</button><button onclick="reset('1')">+</button>  
    </div> 
    <div id="ftP1"><p id="ft1">hello</p></div> 

    <div id="ctrls2"> 
        <p type="text" id="rotation2" size="4" /> 
        <button onclick="transform('2')">-</button><button onclick="reset('2')">+</button>  
    </div> 
    <div id="ftP2"><p id="ft2">taxes</p></div> 

</body> 
</html>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜