HTMLButtonElement: interestForElement property
The interestForElement property of the HTMLButtonElement interface gets or sets the target element of an interest invoker, in cases where the associated <button> element is specified as an interest invoker.
See Creating an interest invoker for more details.
Value
An Element object instance, or null if the associated <button> element does not have a target element set.
Examples
Basic interestForElement usage
In this example, we use a <button> element's interestForElement property to set its target element and then retrieve the target element's tagName. The tagName is then printed in the <button> element's text content.
HTML
We include a <button> element and a <div> element. We turn the <div> element into a popover by setting a popover attribute on it.
<button href="#">a button</button>
<div id="mypopover" popover>I am a <code><div></code> element.</div>
JavaScript
We get references to the <button> and <div> elements in script, then declare an interest invoker-target relationship between the <button> and the <div> by setting the <button> element's interestForElement property equal to a reference to the <div>. We then set the button's text content equal to a string containing the target element's tagName, retrieved via invoker.interestForElement.tagName.
const invoker = document.querySelector("button");
const popover = document.querySelector("div");
invoker.interestForElement = popover;
invoker.textContent = `My target is a ${invoker.interestForElement.tagName} element`;
Result
The example renders like this:
Try showing interest in the button (for example, by hovering or focusing it) to make the <div> appear.