Click here to Skip to main content
15,908,634 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have utilise common element id in JavaScript function as below.

<!Doctype html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
<link href="" rel="stylesheet">
<script src=""></script>

<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"/>



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

                document.getElementById('img1').innerHTML = 
                '<img src="img/new/img14.webp" />';




I have utilised common ID on window.onload function as below.
document.getElementById('tpid').innerHTML = favoritemovie;

this is for save variable on Element "tpid" and once it is saved then conditionally call it by below code on same function.
              document.getElementById('img1').innerHTML =
              '<img src="img/new/img14.webp" />';

Is it possible to call common Element value and utilise it on two different task in same function.

I am also trying to bind Img by javascript as above but failed. img not binding due to Common Element call on window.load event function.

What is the right way to handle?.

What I have tried:

not found on google exact what I want.
Updated 12-Feb-23 23:15pm

1 solution

I can't say I'm 100% sure of what it is you're asking for but if you're asking for a way to make the code you have more generic, you can make things more dynamic by amending both the HTML and Javascript as so:
// ---
// 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;

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

What this does is introduce a function containing your logic which accepts an elementId representing the ID of the HTML element containing the text you want to compare, and storageId representing the name of the session storage variable.

The images variable is an array of each value along with the image path. The function gets the HTML element and gets the text, then it loops over the images and compares the image value with the inner HTML of the element. If the value matches, it then uses this data-image attribute to locate the corresponding <img> element and updates the src attribute to point to the image.

This means you can add any number of elements and images to the path and just call the load_image function with the correct element ID and session storage key.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900