お世話になります。
レコード詳細画面に、あるステータスの時のみ、CSSを適用させたいと思っています。
(function() {
“use strict”;
kintone.events.on(‘app.record.detail.show’, function(event) {
var record = event.record;
if (record[‘ステータス’][‘value’] === ‘未処理’') {
var setClass = document.getElementsByClassName(‘クラス名’);
setClass.classList.add(‘付加するクラス名’);
return event;
}
});
})();
と記述しているのですが、Chromeのコンソールを見ると、
Uncaught TypeError: Cannot read property ‘add’ of undefined
となり、クラス名を不可するところでつまづいてしまっています。
https://developer.cybozu.io/hc/ja/community/posts/115017930683-%E5%90%84%E3%83%93%E3%83%A5%E3%83%BC%E3%81%94%E3%81%A8%E3%81%ABCSS%E3%82%92%E8%A8%AD%E5%AE%9A
などを参考に記述しているのですが、どこがよくないのか、ご教示いただけますでしょうか。
よろしくお願いいたします。
getElementsByClassName は、対象の全要素を返しますので、特定の要素を指定時は添え字が必要です。
なお参考先の getElementById は、対象の１要素を返します。
ありがとうございます。
ですが、添え字を入れてみても、やはり同じ個所でつまづいてしまいます。
恐れ入りますが、引き続きよろしくお願いいたします。
単純に、要素が取得できていないなどが考えられます。
Chrome のデバッグツールで、取得した要素を確認して、クラス名を付加してみてください。
kintone 開発で Chrome デベロッパーツールを使おう DOM操作
デバッグツールでは、要素は取得できているようなのですが、スクリプト上でconsoleすると、0になってしまいます。
添え字で指定するにも、0個だと判定されているので、undefinedになってしまいます。
現象からすると、イベント時には対象要素が無くて、その後要素が追加されて
画面表示後にデバッグツールで見ると対象要素があるということだと思います。
対象の要素は、JavaScript で追加しているボタンですか？
対応方法としては、下記が考えられます。ケースによりどれかで対応できると思います。
・要素が追加されるまで待ってから、処理する。
・JavaScript で追加しているボタンならば、その処理にクラス付加処理を組み込む。
・CSSの指定を「.親要素に付加するクラス名 .recordtransfer-button」で指定しておき、 対象要素の親要素に、クラスを追加。
親要素から指定してしておけば、後から子要素が追加されても、CSS が適用されます。
何度もありがとうございます。
プラグインで生成されているボタンなので、Javascriptで追加されています。
プラグインに処理を追加するのは難しいので、少し処理を遅らせることで対応しました。
ありがとうございました。