カスタムデータをJavaScriptで取得する方法

Question

前提・実現したいこと

今行いたいのはカスタムデータの値を取得することです。

発生している問題・エラーメッセージ

現状としてはnullが返ってきており表示としてはNANになってしまっています。

![

該当のソースコード

<div class="pulldown">

  <select class="mainselect" name="s1" id="s1">
    <option class="foods" selected="selected">--食材の種類--</option>
      <%= render "foods" %>
  </select>


  
  <select name="s2" id="s2">
      <option class="foods">--食材選択--</option>
      <option class="meat" id="">--肉類--</option>
        <%= render "meat" %>
      <option class="seafood" id="">--魚介類--</option>
        <%= render "seafood" %>
      <option class="egg" id="">--卵類--</option>
        <%= render "egg" %>
      <option class="beans">--豆類--</option>
        <%= render "beans" %>
      <option class="milk">--乳類--</option>
        <%= render "milk" %>
      <option class="grain">--穀類--</option>
        <%= render "grain" %>
      <option class="potato">--芋類及び澱粉類--</option>
        <%= render "potato" %>
      <option class="fruit">--果実類--</option>
        <%= render "fruit" %>
      <option class="nuts">--種実類--</option>
        <%= render "nuts" %>
      <option class="mushroom">--キノコ類--</option>
        <%= render "mushroom" %>
      <option class="alga">--藻類--</option>
        <%= render "alga" %>
      <option class="vegetable">--野菜類--</option>
        <%= render "vegetable" %>
      <option class="oils">--油脂類--</option>
        <%= render "oils" %>
      <option class="sugar">--砂糖及び甘味類--</option>
        <%= render "sugar" %>
      <option class="pastry">--菓子類--</option>
        <%= render "pastry" %>
      <option class="drink">--嗜好飲料類--</option>
        <%= render "drink" %>
      <option class="seasoning">--調味料及び香辛料類--</option>
        <%= render "seasoning" %>
      <option class="off-the-shelf">--調理済み流通食品類--</option>
        <%= render "off-the-shelf" %>
  </select>


  <button type="button" class="btn-text" id="btn" value="取得">取得</button>

  
  <script>
    $(function(){
  //《selectタグ その①》路線を選択すると呼び出される関数
  $('select[name="s1"]').change(function(){
  //《selectタグ その①》nameの値を取得
  var line_class = $('select[name="s1"] option:selected').attr("class");
  console.log(line_class);
　//《selectタグ その②》 子要素タグの個数を数え上げ
  var count = $('select[name="s2"]').children().length;
  console.log(count);
  for(a=0; a<count; a++){
        var s2 = $('select[name="s2"] option:eq('+a+')');
　　　　　//《selectタグ その①》で選択した路線と等しいname値を持つoptionタグを表示
        if(s2.attr("class") === line_class){
          s2.show();
        } else {
          s2.hide();
      }
      }
　　　　
  });
});
  </script>

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var protein = document.getElementById('s2').getAttribute('data-protein')
  document.querySelector('#btn').addEventListener('click',()=>{
    console.log(protein)
    view.innerHTML+=s2.value;
    
    view.innerHTML+=s2.data-protein;
    
  });
});
</script>
</div>

######カスタムデータの状態

<option value="あおさ 素干し" class="alga" data-protein="22.1" data-fat="" data-carb="" data-calorie="">あおさ 素干し</option>

試したこと

まずは一箇所の情報が取得できるかを試しました。
今回でいうと下記のコードの値を取得しようと思い

data-protein="22.1"

JavaScriptに下記の二行の記述をしてみました。

<script>

  var protein = document.getElementById('s2').getAttribute('data-protein')

    
    view.innerHTML+=s2.data-protein;
    

</script>

nullということで定義は問題ないが中身がないということまではわかりました。
しかし良い解決手段がわかりませんでした。

補足

情報（FW/ツールのバージョンなど）
Ruby　on　Rails 6
jQuery 3.6.0

Comments

[yambejp]

view.innerHTML+=s2.data-protein;

s2.dataｋらproteinを引くという認識でよいですか？

[ginia3150]

引くということではありません。

data-protein="22.1"

と同じ記述にしていたのですが、これでは引くという意味になってしますのですね。

Answer 1

view.innerHTML+=s2.data-protein;
↓↓↓
view.innerHTML+=protein;

では？

Comments

[ginia3150]

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

この記述で実行してみたところnullが返ってきてしまいましたので
空であると返ってきました。

ということは
var protein = document.getElementById('s2').getAttribute('data-protein')

こちらの記述に問題があるのでしょうか？

[yambejp]

var protein = document.getElementById('s2').getAttribute('data-protein')
のあとに
console.log(protein)
で確認してみるところからでしょう

[ginia3150]

ご指摘ありがとうございます。
確認したところこのタイミングで既にnullのlogが返ってきていました。

[yambejp]

s2はselect自身でdata-proteinはoptionなら参照方法が違いますね
もう少し整理されたほうがよいでしょう

[ginia3150]

返答ありがとうございます。
正直に申し上げて、
「data-proteinはoptionなら参照方法が違いますね
もう少し整理されたほうがよいでしょう」

それが理解できていれば質問していません。

つまりoptioを参照するようの記述方法があるとおっしゃりたいんですよね？
整理というのは具体的に何を整理するのでしょうか？

考え方でしょうか？記述方法でしょうか？

初心者なりに調べてこの程度なのです。
回答していただけるだけありがたいことですが参考になるページ等があれば教えていただいてもよろしいでしょうか？

[think49]

console.log(document.getElementById('s2'))

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

[yambejp]

selectにはdata-proteinはありませんし
そのoptionを見る限りdata-proteinがみあたりません
ただ唐突に「カスタムデータの状態」としてdata-proteinの提示があります
回答者の想像力で補完してもなかなか回答が難しいので
質問内容を整理してほしいということです

[yambejp]

エスパー回答
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('#s2 option[data-protein]').forEach(x=>{
view.innerHTML+=x.dataset.protein+"<br>";
});
});
</script>
<select id="s2">
<option value="a" data-protein="100">a</option>
<option value="b" data-protein="200">b</option>
<option value="c" data-protein="300">c</option>
<option value="d" data-protein="400">d</option>
</select>
<div id="view"></div>