Help - Search - Members - Calendar
Full Version: Code not working JavaScript help
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Chbv
I want to make the red block move across the screen by changing its margin using javascript. The left and right works but not the up or down. I am using the w3schools stylesheet.
CODE

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <title></title>
    </head>
    
    <body class="w3-padding">
        <h1>Heading</h1>
        <p>Paragraph 1</p>
        
        <span id="red" style="padding:50px;background-color:red;margin:50px;">YO</span>
        
        <div class="w3-gray w3-bottom w3-margin-bottom w3-padding">
            <button onclick="left()">Left</button>
            <button onclick="right()">Right</button>
            <button onclick="up()">Up</button>
            <button onclick="down()">Down</button>
        </div>
        
        <script>
            var x = 50;
            function right() {
                x = x + 10;  
                document.getElementById("red").style.marginLeft = x + "px";
            }
            function left() {
                x = x - 10;  
                document.getElementById("red").style.marginLeft = x + "px";
            }
            var y = 50;
            function up() {
                y = y - 10;
                document.getElementById("red").style.marginTop = y + "px";
            }
            function down() {
                y = y + 10;
                document.getElementById("red").style.marginTop = y + "px";
            }
        </script>
    </body>
</html>
Click to view attachment
CharlesEF
First, your down button onclick was calling 'myFunction()' not the 'down()' function.
Second, I changed the <span> to a <div> and the code works as you want.

There are other issues which I think has to do with the CSS you are using. I also think the CSS has something to do with the <span> not moving, but I'm not 100 percent sure. I'm not great with CSS.
Click to view attachment
CharlesEF
Ok, I just tested your page without the w3 CSS and found that wasn't the problem after all. Maybe a <span> can't move up/down? I'm not sure about that.
CharlesEF
Oh, maybe the <span> problem is because it is a 'inline-block' element? If you add 'display:block;' to the style attribute of the <span> then it will work.
pandy
Yeah, it's because it's an inline element. Vertical margins on inline elements don't have a visible effect.

HTML
blah blah blah blah blah blah<br>
blah blah blah blah blah blah<br>
blah blah blah blah blah blah<br>
blah blah blah blah blah blah<br>
blah blah <span style="margin: 50px">blah</span> blah blah blah<br>
blah blah blah blah blah blah<br>
blah blah blah blah blah blah<br>
blah blah blah blah blah blah<br>
blah blah blah blah blah blah<br>
blah blah blah blah blah blah



Click to view attachment
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.