Target doesn't work

[ghost]

When i try to use target, i get this error:

TypeError: undefined is not an object (evaluating 'this.homeTarget.innerHTML'

this.homeTarget is undefined

HTML:

<div class="home" id="home" data-controller="main" data-action="click->main#start_quiz" data-target="main.home">
	<div class="home__wrapper">
		<div class="home__heading">BEM VINDO AO QUIZ</div>
		<div class="home__subheading">TOQUE NA TELA PARA INICIAR</div>
	</div>
</div>

Javascript:

import { Controller } from "stimulus"
export default class extends Controller {
	static targets = [ "home" ]
        start_quiz() {
		console.log("home:", this.homeTarget.innerHTML)
	}
}

What's wrong here?

[ngan]

Why not just use this.element? It'll give you the element that your controller was declared on. Not sure if the controller element and the target element can be the same 🤷‍♂️

[ghost]

well, it can work, but my issue actually is: why the target is not working?

[adrienpoly]

your code runs as expected on Glitch

code:
https://glitch.com/edit/#!/charm-talk?path=src/controllers/main_controller.js:5:15

live:
https://charm-talk.glitch.me/

[javan]

What version of Stimulus are you using? Are you using the "standard" webpack + babel setup or another build system?

[ghost]

im using it on rails with webpackler, stimulus 0.9.0

[javan]

That explains it. Target properties were added in 1.0.0: https://github.com/stimulusjs/stimulus/releases/tag/v1.0.0