Inserted buttons data-counter value not appending

JavaScript
1

I have opened a different post with some small debugging help here because in the previous one some different issue with different logic was being discussed.

I have movd here from mutation observer to scroll, and all instances with new button are injected in DOM, but I used this counter in button data-counter="${currentCounter}"> it is not appending just printing "1" in all instances.

window.addEventListener("scroll", function () {
	const toolBarDivs = document.querySelectorAll('div[aria-label*="replies"]:not([data-sibling-injected])')
	toolBarDivs.forEach(toolBarDiv => {
		injectButton(toolBarDiv)
	})
})

function injectButton(toolBarDiv) {
	if (!toolBarDiv.dataset.buttonCounter) {
		toolBarDiv.dataset.buttonCounter = 1
	}

	const currentCounter = toolBarDiv.dataset.buttonCounter
	toolBarDiv.dataset.buttonCounter = parseInt(currentCounter) + 1

	const newDiv = document.createElement("div")
	newDiv.classList.add("css-175oi2r", "r-18u37iz", "r-1h0z5md", "r-13awgt0", "copy-paste-button")

	newDiv.innerHTML = `
    <button aria-label="copypaste" role="button" class="css-175oi2r r-1777fci r-bt1l66 r-bztko3 r-lrvibr r-1loqt21 r-1ny4l3l"
      data-testid="copypaste" type="button" data-copy-paste-button-added="true"
      data-counter="${currentCounter}">
      Copaste
    </button>
  `

	const targetIndex = 3
	if (toolBarDiv.children.length > targetIndex) {
		toolBarDiv.insertBefore(newDiv, toolBarDiv.children[targetIndex])
	} else {
		toolBarDiv.appendChild(newDiv)
	}

	toolBarDiv.dataset.siblingInjected = "true"
}

document.body.addEventListener("click", function (event) {
	if (event.target.matches('button[data-testid="copypaste"]')) {
		console.log("Button clicked:", event.target)
		let currentElement = event.target
		while (currentElement && !currentElement.hasAttribute("data-testid")) {
			currentElement = currentElement.parentElement
		}
		if (currentElement && currentElement.getAttribute("data-testid") === "tweetText") {
			console.log("Stopped at:", currentElement)
		}
	}
})
2

Without a more complete example it is a bit difficult to figure out what is going on here.

I have tried to create a simplified version

HTML

<div class='tool-bar'></div>
<div class='tool-bar'></div>
<div class='tool-bar'></div>
<div class='tool-bar'></div>
<div class='tool-bar'></div>

JS

window.addEventListener("scroll", function () {
	const toolBarDivs = document.querySelectorAll('div.tool-bar:not([data-sibling-injected])')
	toolBarDivs.forEach(injectButton)
})

function createButtonHTML(counter) {
    // simplified for testing
    return `<button>Copaste ${counter}</button>`;
}

function injectButton(toolBarDiv) {
	if (!toolBarDiv.dataset.buttonCounter) {
		toolBarDiv.dataset.buttonCounter = 1
	}

	const currentCounter = toolBarDiv.dataset.buttonCounter
	toolBarDiv.dataset.buttonCounter = parseInt(currentCounter) + 1

//  has no effect on currentCounter so commented out
// 	const newDiv = document.createElement("div");
// 	newDiv.classList.add("css-175oi2r", "r-18u37iz", "r-1h0z5md", "r-13awgt0", "copy-paste-button")
// 	newDiv.innerHTML = createButtonHTML(currentCounter);

// 	const targetIndex = 3
// 	if (toolBarDiv.children.length > targetIndex) {
// 		toolBarDiv.insertBefore(newDiv, toolBarDiv.children[targetIndex])
// 	} else {
// 		toolBarDiv.appendChild(newDiv)
// 	}

    toolBarDiv.dataset.siblingInjected = "true"
}

codepen You will need to right click and inspect the red boxes.

The result of my test is that dataset.buttonCounter will be set to 2 — That’s it. siblingInjected will prevent the toolbar from being selected a second time.

I would also add that the scroll event will fire hundreds and hundreds of times as you scroll, so this may not be the best solution — At least not without debounce.

To get to the bottom of this issue, it might be a good idea for you to create a simplified example. Much like I have tried to do.

Edit: I haven’t followed your other thread, so this maybe irrelevant now

1 Like
3

True, will get back to you after grasping your solution. Thanks.

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.