State変更後のdom要素を取得する

Open Q&A
1

下記ののような構造をとる接客サービスを作成しており、Stateの変更時にkarte-jsのidを持つ要素のdomを取得する（具体的には高さを取りたい）です。

<div class="container" id="karte-js">
  <div krt-if="state === 1">
    ...
  <div>
  <div krt-if="state === 2">
      ...
  <div>
</div>

試しに

widget.onChangeVal('state', function() {...})

の内部でstateの変更時に

document.getElementById("js-karte-chatbot");

で取得を試みたのですが、console.logをするとnullが返って来る状況です。

idはjsのみでの利用で、CSSでは利用しておりません。

chromeのコンソール上で試してみてもnullとなるのですが、Elementsタブから該当要素を選択してもう一度コンソールを実行すると取得に成功します。

stateが変更された直後にdomを取得する良い手段はないものでしょうか？

2

idの値が、HTML側では “karte-js” 、JavaScript側では “js-karte-chatbot” と不一致のようですが、こちらは記載ミスでしょうか？

「仮にstate変更の直後にstate変更で表示される要素を取得したいがwidget.onChangeValだと処理タイミングがDOMの更新前になってしまう」ということであれば、方法としては下記のいずれかになる認識です。

  • setTimeoutで要素取得を遅らせる
  • krt-ifではなくkrt-showを使う