[ANSWERED] javascript – Top marging or any margin moves all the buttons instead of one. Keep in mind that I am not able to use CSS cause I am using webstorm interpreter

Question 1

The reason for the behaviour is that the buttons are displayed inline in the HTML document. If you want to move the buttons freely without interfering with other elements, I suggest you using positition absolute and top / left.

Bear in mind that the two last buttons are placed on top of each other since they have identical coordinates.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gavito Auto</title>
</head>
<body>
<div id="button1">

</div>

<script>
    //Buttons
//// BUY CAR PARTS BUTTON

    function screen_main_button(name, func, moveX, moveY){
        // 1. Create the button

        var button = {};
        button.name = name;
        button.func = func;
        button.button = document.createElement("button");
        button.button.innerHTML = button.name;
        button.button.style.position = "absolute";
        button.button.style.width = "200px";
        button.button.style.height = "200px";
        button.button.style.left = moveX;
        button.button.style.top = moveY;
        button.button.style.backgroundColor = "orange";

        // 2. Append to body
        var body1 = document.getElementsByTagName("body")[0];
        body1.appendChild(button.button);

        // 3. Add event handler
        button.button.addEventListener ("click", function() {
           button.func()
        });
    }


    //BUTTON FUNCTIONS
    works = function(){
        alert("this is working")
    };

    //button calls
    screen_main_button("Buy Car Parts", works, "370px", "100px");
    screen_main_button("Buy A Car", works, "10px", "100px");
    screen_main_button("Request A Car Repair", works, "10px", "100px");

</script>
</body>
</html>

Question 2

I am trying to move each button individually without moving other elements. As said before my issue is that every time I use margintop or marginleft it just moves everything, every botton.
Keep in mind that I cannot use CSS because I am using Jet Brains WebStorm. Here is the code. So you can see what I am talking about. Modify the margintop and marginleft values.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gavito Auto</title>
</head>
<body>
<div id="button1">

</div>

<script>
    //Buttons
//// BUY CAR PARTS BUTTON

    function screen_main_button(name, func, moveX, moveY){
        // 1. Create the button

        var button = {};
        button.name = name;
        button.func = func;
        button.button = document.createElement("button");
        button.button.innerHTML = button.name;
        button.button.style.width = "200px";
        button.button.style.height = "200px";
        button.button.style.marginLeft = moveX;
        button.button.style.marginTop = moveY;
        button.button.style.backgroundColor = "orange";

        // 2. Append to body
        var body1 = document.getElementsByTagName("body")[0];
        body1.appendChild(button.button);

        // 3. Add event handler
        button.button.addEventListener ("click", function() {
           button.func()
        });
    }


    //BUTTON FUNCTIONS
    works = function(){
        alert("this is working")
    };

    //button calls
    screen_main_button("Buy Car Parts", works, "370px", "100px");
    screen_main_button("Buy A Car", works, "10px", "100px");
    screen_main_button("Request A Car Repair", works, "10px", "100px");

</script>
</body>
</html>

Bollate

[ANSWERED] javascript – Top marging or any margin moves all the buttons instead of one. Keep in mind that I am not able to use CSS cause I am using webstorm interpreter

By

Solution 1 :

Problem :

Comments

Comment posted by Emiel Zuurbier

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate