Here I tried to create a JS function for creating buttons, which I have done so successfully. What hasn't worked for me, is finding a way to move/position that button within the same function. I scoured the Internet for an answer, but couldn't find one.

function createButtons(dialogueString, buttonIdString) {
    var btn = document.createElement("button");
    btn.style.left = "50%"; //here is one of my attempts to move the button but it is not working
    btn.id = buttonIdString;
    btn.innerHTML = dialogueString;
    document.body.appendChild(btn);
};
createButtons("Hello", "choice1");

As you can see above, I tried using btn.style.left to move the button to the left, I tried writing "200px", instead of "50%" and many other stuff, but nothing has worked. If you have any idea how to solve this, please let me know, I would really appreciate it.

CodePudding user response：

just add btn.style.position = 'absolute'; or btn.style.position = 'relativ';to your function

function createButtons(dialogueString, buttonIdString) {
    var btn = document.createElement("button");
    btn.style.left = "50%"; //here is one of my attempts to move the button but it is not working
    btn.style.position = 'absolute';
    btn.id = buttonIdString;
    btn.innerHTML = dialogueString;
    document.body.appendChild(btn);
};
createButtons("Hello", "choice1");

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can make css class with desired style and include it in js.

For example:

//style.css
.buttonStyle{
  color: red;
}

//javascript part
btn.classList.add("buttonStyle");

CodePudding user response：

Found the solution. I did btn.style.marginLeft = " 50px" and it seems to work.