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.
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");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");
Found the solution.
I did btn.style.marginLeft = "+50px" and it seems to work.