I am trying to keep my button from moving to the right whenever I press the button and change the margin of the page I am on. I am doing this to kinda simulate window resizing.
Here is a code-snippet of the current code:
const button = document.createElement('button');
button.setAttribute("id", "1st");
button.innerText = "BRANCH";
button.style.color = 'red';
button.style.position = 'absolute';
button.style.zIndex = 0;
button.style.width = '16%';
button.style.height = '10%';
button.style.left = '45%';
button.style.bottom = '30%';
button.style.right = '0%';
button.style.top = '29%';
button.style.padding = '2% 3%';
document.querySelector('body').append(button);
button.addEventListener('click', () => {
console.log("button pressed")
var x = document.createElement("P");
x.innerText = "THIS IS A TEST";
x.style.marginLeft = "100%";
x.style.zIndex = -1;
document.querySelector('div').appendChild(x);
});document.querySelector()The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned."
problem is when you use document.querySelector('div') it finds the "first" div in your code.
in here document.querySelector('div') might have found the div your button is also in.
Thus onclick 100% of margin left paragraph (<p></p>) tag is added to your document.