What is the process of editing a webpage to affect the display on a different webpage?

Question

What is the process of editing a webpage to affect the display on a different webpage?

I am currently working on creating two webpages. One will serve as a customization page where users can upload images and input text, which will then be displayed on another page. I am wondering if it is possible to achieve this functionality using CSS and HTML, and if so, how should I proceed.

Below is the code I am using to upload and display images:

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.querySelector('img');  
          img.src = URL.createObjectURL(this.files[0]); 
          img.onload = imageIsLoaded;
      }
  });
});

function imageIsLoaded() { 
  alert(this.src);  
}

This is the code for displaying images in HTML:

<input type='file' />
<br><img id="myImg" src="#" alt="your image" height=200 width=100>

Similarly, I have code to display text, but currently it only shows up on the customization page. How can I connect the two pages so that when an image or text is uploaded, it also appears on the display page?

Below is the JavaScript code for displaying text:

$(document).ready(function() {
  $(".preview").on('keyup', function() {
    $($(this).data('copy')).html($(this).val());
  });
});

The corresponding HTML code for displaying text is as follows:

<div class="field">
  <label class="paddingleft" for="fullname">Full Name</label>
  <div class="center">
    <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
  </div>
</div>

<br>

Your name is:
<div id="name"></div>

In addition to the above methods, you can also use a simpler approach by directly updating the text with each keystroke:

 <input onkeyup="$('#name').html(this.value)" ... />
 <p id='name'></p>

javascript html css

Answer 1

Answer №1

If you want to input values on the first page:

<body>
     <input type='file' />
     <br><img id="myImg" src="#" alt="your image" height=200 width=100>
     <input type='text' id="text" placeholder="Enter text"/>
     <button id="submitBtn">Submit</button>
</body>
<script>
     window.addEventListener('load', function() {
          document.querySelector('input[type="file"]').addEventListener('change', function() {
               if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    var baseString;
                    reader.onloadend = function () {
                         baseString = reader.result;
                         console.log(baseString); 
                         localStorage.setItem('image',baseString)
                         document.getElementById("myImg").setAttribute('src',localStorage.getItem("image"));
                    };
                    reader.readAsDataURL(this.files[0]);
               }
          });
          document.getElementById('submitBtn').addEventListener('click', function(){
               var text = document.getElementById('text').value;
               console.log(text)
               if(!text)
                    alert("Please enter input");
               else
                    localStorage.setItem('text',text);
          });
     });
</script>

To fetch these values in another page, follow this code:

<body>
     <img src="" id="image"/>
     <img src="" id="image1"/>
     <p id="text"></p>
</body>
<script>
     window.onload = function(){
               if(localStorage.getItem("image")){
                    document.getElementById("image").setAttribute('src',localStorage.getItem("image"));
                    document.getElementById("image1").setAttribute('src',localStorage.getItem("image"));
               }
               if(localStorage.getItem("text"))
                    document.getElementById('text').innerHTML = localStorage.getItem("text");
     }
</script>

Remember that using a modern framework would provide a better solution, but for your current technology stack, this should suffice.

Answer 2

If you want to input values on the first page:

<body>
     <input type='file' />
     <br><img id="myImg" src="#" alt="your image" height=200 width=100>
     <input type='text' id="text" placeholder="Enter text"/>
     <button id="submitBtn">Submit</button>
</body>
<script>
     window.addEventListener('load', function() {
          document.querySelector('input[type="file"]').addEventListener('change', function() {
               if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    var baseString;
                    reader.onloadend = function () {
                         baseString = reader.result;
                         console.log(baseString); 
                         localStorage.setItem('image',baseString)
                         document.getElementById("myImg").setAttribute('src',localStorage.getItem("image"));
                    };
                    reader.readAsDataURL(this.files[0]);
               }
          });
          document.getElementById('submitBtn').addEventListener('click', function(){
               var text = document.getElementById('text').value;
               console.log(text)
               if(!text)
                    alert("Please enter input");
               else
                    localStorage.setItem('text',text);
          });
     });
</script>

To fetch these values in another page, follow this code:

<body>
     <img src="" id="image"/>
     <img src="" id="image1"/>
     <p id="text"></p>
</body>
<script>
     window.onload = function(){
               if(localStorage.getItem("image")){
                    document.getElementById("image").setAttribute('src',localStorage.getItem("image"));
                    document.getElementById("image1").setAttribute('src',localStorage.getItem("image"));
               }
               if(localStorage.getItem("text"))
                    document.getElementById('text').innerHTML = localStorage.getItem("text");
     }
</script>

Remember that using a modern framework would provide a better solution, but for your current technology stack, this should suffice.

What is the process of editing a webpage to affect the display on a different webpage?

Answer №1

Similar questions

AngularJS - let's make pagination more interactive by adding an active class to the current page

Is it necessary to have both index.js and Component.js files for a single component in React?

Finding Elements in a Frameset in HTML with the Help of Selenium WebDriver

Is there a way to switch out the navigation icons on the react-material-ui datepicker?

What could be the reason that the style tag present in this SVG is not impacting any of the elements?

Guide on Implementing Link href in Next.js v12

Tips on using Bootstrap 4 containers within a container-fluid and ensuring text stays within a container at all times

Sending data to the server using the $.post method with an

Ways to attach the close event to the jquery script

Tool that closely mirrors the functionalities of Google Maps

What is the best way to choose all <pre> tags that have just one line of content?

Guide to establishing a connection to the Companies House API: Essential guidelines on setting up cURL headers and requisite API key specifications

Express functions properly when handling the root route, but encounters issues with sub routes as it sends empty response bodies

Unable to detect HTML special characters in the text

Exploring elements within a JavaScript array

The HTML element in the side menu is not adjusting its size to fit the parent content

Integrate functionality to track elapsed hours in stopwatch timer

Angular 2 keypress validation: Ensuring data integrity through real-time input verification

Incorporate the teachings of removing the nullable object key when its value is anything but 'true'

Failure to Trigger AJAX Success Event