 Code not working JavaScript help, Idk what is wrong with my code |
  |
| Chbv |
 Apr 25 2017, 12:59 PM
Post
#1
|
|
Group: Members Posts: 1 Joined: 25-April 17 Member No.: 26,382  |
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> 
margingrow.html ( 1.43k )
Number of downloads: 497This post has been edited by Chbv: Apr 25 2017, 01:03 PM |
  |
 
|
| CharlesEF |
Apr 25 2017, 06:33 PM
Post
#2
|
|
Programming Fanatic  Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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.
margingrow.html ( 1.39k )
Number of downloads: 336 |
|
|
|
| CharlesEF |
Apr 25 2017, 06:45 PM
Post
#3
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Apr 25 2017, 07:13 PM
Post
#4
|
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Apr 26 2017, 03:14 AM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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  |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 16th April 2024 - 03:34 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC