【解決方法】javascript関数で共通要素IDを利用するには?

[ad_1]

以下のように、JavaScript 関数で共通の要素 ID を使用しています。

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

 
</head>
<body style="margin:0;padding:0">

<div class="container-fluid" style="margin-top:20px">
    
    <form action="#" method="post">
        
        <div class="row">
            <div >
                <p id="tpid"></p>
                <img id="img1" style="width:200px; height:300px"/>
            </div>
            
        </div>
        

        
        
        
    </form>
    
    
</div>

<script>

        window.addEventListener('load', function() {
            var favoritemovie = sessionStorage.getItem("favoriteMovie");
            document.getElementById('tpid').innerHTML = favoritemovie;

            if(document.getElementById('tpid').innerHTML=="1001"){
                document.getElementById('img1').innerHTML = 
                '<img src="https://www.codeproject.com/Questions/5354508/img/new/img14.webp" />';
            }
        });

        
        

</script>
    


</body>
</html>

以下のように、window.onload 関数で共通 ID を使用しました。

document.getElementById('tpid').innerHTML = favoritemovie;

これは、要素「tpid」の変数を保存するためのものであり、保存されたら、同じ関数で以下のコードによって条件付きで呼び出します。

if(document.getElementById('tpid').innerHTML=="1001"){
              document.getElementById('img1').innerHTML =
              '<img src="https://www.codeproject.com/Questions/5354508/img/new/img14.webp" />';
          }

共通の Element 値を呼び出して、同じ関数内の 2 つの異なるタスクで利用することは可能ですか。

上記のようにjavascriptでImgをバインドしようとしていますが、失敗しました。 window.load イベント関数での Common Element 呼び出しが原因で、img がバインドされていません。

正しい対処法は？.

私が試したこと：

私が欲しいものを正確にグーグルで見つけられませんでした。

解決策 1

あなたが何を求めているのか 100% 確信しているとは言えませんが、コードをより汎用的にする方法を求めている場合は、HTML とJavascriptそのまま：

// HTML
// ---
// Here the data-image attribute holds the id of the corresponding
// HTML image which should be updated

<p id="abc" data-image="def"></p>
<img id="def">

// Javascript
// ---

const images = [
  { value: '1001', image: 'img/new/img14.webp' }
];

function load_image(elementId, storageId) {
  const storage = sessionStorage.getItem(storageId);
  const p = document.getElementById(elementId);

  p.innerHTML = storage;

  for (const image of images) {
    if (storage === image.value) {
      const targetId = p.getAttribute('data-image');
      const target = document.getElementById(targetId);

      target.src = image.image;
      break;
    }
  }
}

window.addEventListener('load', () => {
  load_image('abc', 'favoriteMovie');
});

これが行うことは、を受け入れるロジックを含む関数を導入することです elementId 比較したいテキストを含む HTML 要素の ID を表し、 storageId セッションストレージ変数の名前を表します。

の images variable は、画像パスに沿った各値の配列です。この関数は HTML 要素を取得してテキストを取得し、画像をループ処理して、画像の値を要素の内部 HTML と比較します。値が一致する場合は、これを使用します data-image 対応する属性を見つける <img> 要素を更新します src 画像を指す属性。

つまり、パスに要素と画像をいくつでも追加して、 load_image 正しい要素 ID とセッションストレージキーで機能します。

[ad_2]