How to utilise common element ID in javascript function?

Question

0.00/5 (No votes)

See more:

I have utilise common element id in JavaScript function as below.

<!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="img/new/img14.webp" />';
            }
        });

        
        

</script>
    


</body>
</html>

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.

if(document.getElementById('tpid').innerHTML=="1001"){
              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.

Posted 12-Feb-23 22:39pm

MAHESH WAGHELA

Updated 12-Feb-23 23:15pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Chris Copeland · Answer 1 · 2023-02-12T23:15:00

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:

C#

// 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');
});

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.