ボタンを押した際の動きを変更したい

タグ付き： widget, アンケート

コミュニティ

ボタンを押した際の動きを変更したい

トピックス by widget初心者 1792 pt 2023年11月29日 15:14 268 PV
【依頼内容】

現在、設置しているアンケートボタンである「回答を完了する」こちらにリンクを付けて商品ＬＰに飛ばしています。

こちらのボタンをＬＰへのリンクは無くし、ボタンを押すと「アンケートのご協力、ありがとうございます」

とボタン表記が変わるだけにしたいのですが、編集方法がわかりません。。

こちらご確認いただけないでしょうか？よろしくお願いいたします。

【該当記事】

https://sb-draft-preview.squadbeyond.com/articles/DOBFinOzPxaU-Hzcg/draft?token=a84738496fe9676ccfacf7bd6b8ea0d7

【該当箇所】

記事最下部の「回答を完了する」ボタン

https://gyazo.com/4c707eca0c6d4dc68d9680d0e4bde4a6
komiya 11 月, 4 数週間前 3 人 · 5 コメント
- widget
- アンケート
5 コメント

widgetマスター

モデレータ
2023年11月29日 15:22
ベースにしているWidgetは「アンケート（複数選択・単一選択・yes/no・ボタンを押すと下部表示）※要javascript」で、現在はjavascriptを削除した状態で使用していると思われます。

下記修正をすることでボタンを押して下部コンテンツ表示の状態に戻すことが可能です。
・widgetのjavascriptを設置する
・ボタンから<a>タグを削除する

また、「ボタンの表記が変わった」ように見せるには上記に加えて下記2点の修正を行ってください。

・HTMLのボタン以下の行を変更
```
～アンケート部分省略～

      <div class="send-btn">
        <button class="js-send" type="button">回答を完了する</button>
      </div>

      <div class="revealarea js-reveal is-hidden">
        <div class="send-btn">
          <button type="button">アンケートのご協力、ありがとうございます</button>
        </div>
      </div>
    </div>
```
・javascript head設置用のコードを下記に変更する
```

    <script>
        var revealBtnFncMulti = revealBtnFncMulti || {};
        (function(_) {
            _.init = function() {
                var questionBox = Array.from(document.querySelectorAll('.js-questionRevealMulti'));
                var hiddenClass = 'is-hidden';

                questionBox.forEach(function(qb) {
                    var completeBtn = qb.querySelector('.js-send');
                    var revealArea = qb.querySelector('.js-reveal');

                    completeBtn.addEventListener('click', function() {
                        completeBtn.closest('.send-btn').classList.toggle(hiddenClass);
                        revealArea.classList.toggle(hiddenClass);
                    });
                });
            };
        })(revealBtnFncMulti);
    </script>
    
```
ご確認よろしくお願いいたします！
- komiya
  
  メンバー
  2023年12月1日 10:36
  お世話になります。
  
  上記ご対応、ご教示いただき誠にありがとうございます。
  
  頂いた内容で、記述を入れたのですが
```
アンケートのご協力、ありがとうございます
```
  ↑ボタンを押しても、こちらが起動できませんでした。
  
  恐れ入りますがご確認のほど、お願いできますでしょうか？
  
  必用なリンク先など、ここで送ってよいのでしょうか？
  
  恐れ入りますがご確認のほどよろしくお願いいたします。
- widgetマスター
  
  モデレータ
  2023年12月1日 10:38
  
  ご確認ありがとうございます！
  
  お手数ですが、修正いただいたページをこちらに共有いただけますか？
  
  よろしくお願いいたします🙏
- widgetマスター
  
  モデレータ
  2023年12月1日 11:12
  該当ページはこちらで確認できました！
  
  確認したところ、元々widgetに記載があったJavaScript bodyの部分が欠けていたようです！
  
  JavaScript bodyに下記記述を追加してください💫
```
<script>
        document.addEventListener('DOMContentLoaded', revealBtnFncMulti.init, false);
    </script>
```
- komiya
  
  メンバー
  2023年12月1日 11:44
  
  ↑
  
  ありがとうございます。
  
  いただいた記述をbodyに設置しボタンの挙動が確認できました！
  
  この度は誠にありがとうございました。
  
  大変助かりました。以上で解決でございます。
  
  どうぞよろしくお願いいたします。

widgetマスター

komiya

widgetマスター

widgetマスター

komiya