connect() not work when change with javascript

[karaka200]

Hi. I create a stimulus controller and use on a div element.
Now when change innerHTML of this div element with click on a button, text change but color not change to red and connect() not work.

<div data-controller="test">
    <span>This text color change to red</span>
</div>
<button type="button" data-action="test#changeColor">click</button>

test_controller.js

...
connect() {
    this.element.style.color = "red";
}
changeColor(event) {
    this.element.innerHTML = "<span>HelloWorld!</span>"
}
...

[adrienpoly]

actions are scoped inside the controller node

This will work

<div data-controller="test">
    <span>This text color change to red</span>
   
    <button type="button" data-action="test#changeColor">click</button>
</div>

if you need to have your button outside of this element then you probably need to define a target

[marcoroth]

Hey @karaka200

The element/button containing the the data-action attribute needs to be under the element which has the data-controller on it.

[karaka200]

@marcoroth @adrienpoly I'm sorry you right but in this code still not work:

<div data-controller="test">
    <span>This text color change to red</span>
   
    <button type="button" data-action="test#changeColor">click</button>
</div>