# フィールド1に記入があったらフィールド2を表示したい

**URL:** <https://community.cybozu.dev/t/topic/3921>\
**Category:** kintone 開発相談\
**Created:** [2019 年 4 月 11 日午前 4:23 UTC](https://community.cybozu.dev/t/topic/3921 "2019-04-11T04:23:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1055](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@Legacy\_Account1055](https://community.cybozu.dev/u/Legacy_Account1055)\
**Post date:** [2019 年 4 月 11 日午前 4:23 UTC](https://community.cybozu.dev/t/topic/3921/1 "2019-04-11T04:23:19Z")

</div>

始めて質問させていただきます。JavaScript初心者です。

フィールド1に入力されたらフィールド2を表示、フィールド2に入力されたらフィールド3を表示・・・となるような処理にしたいのですが、

以下のようになり中々うまくいきません。

文字列（一行）、文字列（複数行）に文字や数字を入れてもフィールドが表示されるようにしたいです。

もし可能でしたらどのようなコードで実現できるのかご教示いただければ幸いです。

&nbsp;

以下が作成したソースになります。

\<JavaScript\>

(function() {  
“use strict”;

//レコードの追加、編集、詳細画面で適用する  
var events = [‘app.record.detail.show’,  
‘app.record.create.show’,  
‘app.record.create.change.biko1’,  
‘app.record.create.change.biko2’,  
‘app.record.create.change.biko3’,  
‘app.record.create.change.biko4’,  
‘app.record.edit.show’,  
‘app.record.eSdit.change.biko1’,  
‘app.record.eSdit.change.biko2’,  
‘app.record.eSdit.change.biko3’,  
‘app.record.eSdit.change.biko4’];

kintone.events.on(events, function(event) {

var record = event.record;

//備考1に記載があったら備考2を表示  
if ( record[‘biko1’][‘value’] === null) {  
kintone.app.record.setFieldShown(‘biko2’, false);  
}else {  
kintone.app.record.setFieldShown(‘biko2’, true);  
}

for (var i = 2; i \< 5; i++) {  
if (record[‘biko’+i][‘value’] === null) {  
kintone.app.record.setFieldShown(‘biko’+(i + 1), false);  
}else {  
kintone.app.record.setFieldShown(‘biko’+(i + 1), true);  
}

}

});  
})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1906](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Legacy\_Account1906](https://community.cybozu.dev/u/Legacy_Account1906)\
**Post date:** [2019 年 4 月 12 日午前 5:34 UTC](https://community.cybozu.dev/t/topic/3921/2 "2019-04-12T05:34:17Z")

</div>

yurika さん

まず、イベントが発生したときに１度全部のフィールドを非表示にする必要があると思います。

そのあとの、22行目以降の表示/非表示の切り替えの処理ですが、デバッグしてみると、どこがうまくいっていないのか分かると思います。  
[動かない？そんな時はデバッグをしてみよう！入門編](https://community.cybozu.dev/hc/ja/articles/207613916)

yurika さんの記載してくださったコードを見てみました。

22行目の「備考1」に記載があるかどうかを判別しているif文ですが、  
コンソールの画像から分かるように、「備考１」に値が入っていない場合、「null」ではなく「undefined」と入っています。  
なので、ここを書き変えるとうまくいきそうな気がします。

参考までに、私の書いたコードを以下に載せます。  
（でもこれだと、「備考４」まで記載したあとに、「備考２」を空にすると「備考３」だけ非表示になるので、考慮が必要です\<(\_ \_)\>）

```
(function() {
    "use strict";

    //レコードの追加、編集、詳細画面で適用する
    var events = ['app.record.detail.show',
        'app.record.create.show',
        'app.record.create.change.biko1',
        'app.record.create.change.biko2',
        'app.record.create.change.biko3',
        'app.record.create.change.biko4',
        'app.record.edit.show',
        'app.record.edit.change.biko1',
        'app.record.edit.change.biko2',
        'app.record.edit.change.biko3',
        'app.record.edit.change.biko4'];

    kintone.events.on(events, function(event) {
        var record = event.record;

        //まず全てのフィールドを非表示にする
        kintone.app.record.setFieldShown('biko2', false);
        kintone.app.record.setFieldShown('biko3', false);
        kintone.app.record.setFieldShown('biko4', false);

        for (var i = 1; i < 4; i++) {
            var num = 'biko' + i;
            if (record[num]['value'] === undefined) {
                kintone.app.record.setFieldShown('biko' + (i+1), false);
            } else {
                kintone.app.record.setFieldShown('biko' + (i+1), true);
            }
        }
    });
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1055](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@Legacy\_Account1055](https://community.cybozu.dev/u/Legacy_Account1055)\
**Post date:** [2019 年 4 月 12 日午前 7:43 UTC](https://community.cybozu.dev/t/topic/3921/3 "2019-04-12T07:43:03Z")

</div>

たけちょさん

ご回答ありがとうございます。

「null」ではなく「undefined」を使うんですね！勉強になりました。

ただ「文字列（一行）」フィールドはJavaScriptが正しく動くのですが、

「文字列（複数行）」フィールドだと表示がうまくいかないのが不思議です。。。涙

---

<div class="post-metadata">

**Author:** ![Legacy\_Account729](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@Legacy\_Account729](https://community.cybozu.dev/u/Legacy_Account729)\
**Post date:** [2019 年 4 月 15 日午前 6:30 UTC](https://community.cybozu.dev/t/topic/3921/4 "2019-04-15T06:30:52Z")

</div>

yurikaさん

&nbsp;

すでに解決済みかもしれませんが・・

[https://cybozudev.zendesk.com/hc/ja/articles/201941984#step3](https://cybozudev.zendesk.com/hc/ja/articles/201941984#step3)

こちらをご参照いただきますと、フィールド値変更イベント(event.record.〇〇.change.フィールドコード)で指定可能なフィールドが決まっております。

「文字列（複数行）」フィールドは指定可能ではないため、イベントが実行されない状態かと思われます。

&nbsp;

フィールド値変更イベントで指定可能なフィールド

- ラジオボタン
- ドロップダウン
- チェックボックス
- 複数選択
- ユーザー選択
- 組織選択
- グループ選択
- 日付
- 時刻
- 日時
- 文字列(1行)
- 数値
- テーブル

ご参考になれば幸いです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1055](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@Legacy\_Account1055](https://community.cybozu.dev/u/Legacy_Account1055)\
**Post date:** [2019 年 4 月 17 日午前 7:21 UTC](https://community.cybozu.dev/t/topic/3921/5 "2019-04-17T07:21:11Z")

</div>

高木さん

ご回答ありがとうございます！

「文字列（複数行）」フィールドは指定可能なフィールドに含まれていると思っていました。。。

これからはしっかり調べてカスタマイズしていこうと思います。ありがとうございました！